Поделиться через

Создавание встроенных в SharePoint приложений на основе холста с нуля для просмотра, редактирования, добавления и удаления элементов в списке, созданном в Microsoft Списки

  • Статья

В этой статье сценария вы узнаете, как создать приложение с функциональной возможностью формы SharePoint с нуля. Приложение продемонстрирует, как просматривать, редактировать, добавлять и удалять элементы списка с помощью приложения на основе холста, не посещая сайт SharePoint.

Примечание

Подробнее о различных сценариях работы с формами SharePoint и дополнительные примеры можно найти в разделе Обзор сценариев SharePoint.

Предварительные условия

  • У вас должен быть доступ к сайту SharePoint для создания списка и элементов списка.
  • Вы должны быть осведомлены о создании и настройке списков.

Подробности сценария

Цель этого сценария — продемонстрировать, как создать приложение на основе холста с нуля для работы со списком. В конце этого демонстрационного примера вы сможете выполнять следующие задачи из приложения на основе холста без необходимости доступа к списку или его элементу:

  • Просмотр всех элементов из списка.
  • Поиск элементов в списке на основе текстового значения определенного столбца.
  • Выбор элемента списка.
  • Изменение элемента списка.
  • Создание нового элемента списка.
  • Удаление элемента списка.

Сценарий является базовой иллюстрацией возможностей приложений на основе холста при интеграции с SharePoint. Чтобы улучшить макет с помощью улучшенного дизайна или дополнительных экранов, перейдите к следующим статьям:

Важно!

Пример в этом сценарии создает образец приложения для просмотра, редактирования, добавления и удаления элементов списка. Вы можете изменить подход, чтобы настроить приложение по-разному в зависимости от вашего выбора или бизнес-целей. Когда вы настраиваете свое приложение с пользовательскими именами для элементов управления, обязательно используйте правильные имена элементов управления в формуле, выполняя действия, описанные в этом примере.

Пример

Этот пример сценария проведет вас через шаги по созданию приложения и подключению его к списку для просмотра, редактирования, добавления и удаления элементов списка.

Шаг 1. Создайте список с помощью Microsoft Списки

Создайте список со столбцами и элементами списка. В этом сценарии мы использовали список со следующими столбцами и элементами списка:

Структура списка.

Примечание

Оба столбца имеют тип Одна строка текста.

Шаг 2. Создание приложения на основе холста с нуля

Создайте приложение на основе холста с нуля.

Шаг 3. Подключение приложения к SharePoint

  1. Выберите Источники данных из левой панели.

    Выбор источников данных.

  2. Выберите источник данных SharePoint. Вы также можете выполнить поиск по имени в поле поиска.

    Выберите источник данных SharePoint.

  3. Выберите Добавить подключение.

    Добавить подключение SharePoint.

  4. Выберите тип подключения. Вы можете подключиться к сайту SharePoint Online или локальному сайту SharePoint со шлюзом данных, если он настроен. В этом сценарии используется подключение к сайту SharePoint Online.

    Создание подключения SharePoint.

  5. Выберите сайт SharePoint, содержащий список, созданный вами ранее.

    Выберите сайт SharePoint.

  6. Выберите созданный вами список. В этом сценарии используется список с именем Фигуры.

    Выберите список.

  7. Нажмите Подключиться. Источник данных добавляется в приложение.

    Добавлен источник данных.

Шаг 4. Добавление таблицы данных для просмотра элементов списка

  1. Выберите + (вставить) на левой панели.

    Выберите Вставить.

  2. Разверните Макет.

  3. Выберите Таблица данных.

    Выберите таблицу данных.

  4. Выберите этот источник данных в качестве вашего подключения SharePoint.

    Выбор источника таблицы данных.

  5. Переместите таблицу данных в нижний правый угол внутри экрана, чтобы освободить место для дополнительных компонентов.

    Перемещение таблицы данных.

Шаг 5. Добавление возможности поиска и выбора элемента

  1. Вставьте элемент управления Ввод текста на холст и переместите его под раскрывающийся список.

    Вставка элемента управления для ввода текста.

  2. Обновите свойство По умолчанию поля поиска, задав значение Поиск по фигуре.

    Свойство по умолчанию для ввода текста.

  3. Вставьте элемент управления Список на холст и переместите его под элемент управления ввода текста, добавленный на предыдущем шаге.

    Вставка элемента управления поля списка.

  4. В правой части экрана студии установите для свойства Items элемента управления Список значение списка Фигуры для этого примера.

    Элементы поля списка.

  5. Задайте для свойства Значение для элемента управления списка значение Фигруа вместо Цвет для этого примера.

    Значение поля списка.

  6. Обновите свойство Элементы списка, добавленное на предыдущем шаге, на следующую формулу:

    Filter([@Shapes], StartsWith(Shape, TextInput1.Text))

    Свойство элементов поля поиска.

    Формула содержит следующие функции:

    • Filter() — используется в этой формуле для фильтрации элементов в списке на основе определенных параметров. [@Shapes] в этой функции определяет, какой источник данных фильтровать.
    • StartsWith() — используется в этой формуле для фильтрации элементов списка на основе столбца Фигура, который начинается с символов, введенных в элемент управления TextInput1, добавленный ранее.

Шаг 6. Добавлените возможности редактирования элемента

  1. Вставьте элемент управления Форма редактирования.

    Добавление формы редактирования.

  2. В правой части экрана студии установите для свойства Источник данных для элемента управления формы редактирования значение Фигуры.

    Источник данных формы редактирования.

  3. Выберите Редактировать поля для элемента управления формы редактирования и удалите все остальные поля, например Вложения, если имеются.

    Удалите поле вложений.

  4. Убедитесь в наличии полей Фигура и Цвет. Если нет, добавьте их, используя Добавить поле.

    Добавление полей фигур и цвета.

  5. Измените макет экрана, чтобы элемент управления Форма редактирования был виден и не перекрывался с другими элементами управления.

    Изменение компоновки экрана.

  6. Задайте для свойства OnSelect элемента управления "Список" следующую функцию:

    Set(TextSelected,1)

    OnSelect для списка.

    Функция Set() устанавливает для новой переменной с именем TextSelected значение 1, когда выбрано значение в списке. Переменная TextSelected используется в этом сценарии как флаг для управления действиями и поведением возможностей добавления, редактирования и удаления, как вы увидите в следующих разделах.

  7. Задайте для свойства Элемент элемента управления "Форма редактирования" следующую формулу:

    If(TextSelected=1,ListBox1.Selected,DataTable1.Selected)

    ![Свойство "Элемент" для формы редактирования.](./media/scenarios-sharepoint-form-from-scratch/edit-form-item-property.png "Свойство "Элемент" для формы редактирования")

    Функция If() сначала проверяет, имеет ли переменная TextSelected значение 1. Если это так, в форме редактирования отображается выбранный элемент из списка. Если нет, в форме редактирования отображается выбранный элемент из таблицы данных.

  8. Вставьте кнопку.

    Вставьте кнопку.

  9. В правой части экрана студии установите для свойства Текст кнопки, добавленной на предыдущем шаге, значение Сохранить.

    ![Кнопка "Сохранить".](./media/scenarios-sharepoint-form-from-scratch/save-button.png "Кнопка "Сохранить"")

  10. Задайте для свойства OnSelect кнопки Сохранить следующую формулу:

    SubmitForm(Form1);
Set(TextSelected,0)

    ![Свойство OnSelect для кнопки "Сохранить".](./media/scenarios-sharepoint-form-from-scratch/onselect-save-button.png "Свойство OnSelect для кнопки "Сохранить"")

    Формула содержит следующие функции:

    • SubmitForm() — используется в этой формуле для отправки формы редактирования и сохранения значений в списке.
    • Set() — сбрасывает переменную TextSelected обратно в значение o, чтобы новый элемент мог быть выбран из списка.

  11. Вставьте элемент управления Текстовая подпись.

    Текстовая подпись.

  12. Обновите свойство Текст элемента управления Текстовая подпись, добавленного на предыдущем шаге, на текст Чтобы изменить значения для элемента, выберите его в таблице или выполните поиск.

    Обновленная текстовая подпись.

  13. Переставьте элементы управления на экране, чтобы упорядочить элементы управления редактированием.

    Изменение порядка элементов управления редактирования.

Шаг 7. Добавлените возможности добавления элемента

  1. Вставьте кнопку.

  2. Переставьте элементы управления на экране, чтобы кнопка была видна.

  3. Обновите свойство Текст кнопки, добавленной на предыдущем шаге, на текст Добавить.

  4. Задайте для свойства OnSelect кнопки Добавить следующую функцию:

    NewForm(Form1)

    ![Свойство OnSelect для кнопки "Добавить".](./media/scenarios-sharepoint-form-from-scratch/add-button-onselect.png "Свойство OnSelect для кнопки "Добавить"")

    Функция NewForm() очищает элемент управления Форма редактирования, добавленный в форму с именем Form1, чтобы можно было добавить новый элемент списка.

Шаг 8. Добавлените возможности удаления элемента

  1. Вставьте кнопку.

  2. Переместите кнопку, добавленную на предыдущем шаге, под кнопку Сохранить.

  3. Обновите свойство Текст кнопки, добавленной на предыдущем шаге, на текст Удалить.

  4. Задайте для свойства OnSelect кнопки Удалить следующую формулу:

    Remove([@Shapes], If(TextSelected=1,ListBox1.Selected,DataTable1.Selected));
Set(TextSelected,0)

    ![Свойство OnSelect для кнопки "Удалить".](./media/scenarios-sharepoint-form-from-scratch/onselect-delete-button.png "Свойство OnSelect для кнопки "Удалить"")

    Формула содержит следующие функции:

    • Remove() — используется в этой формуле для удаления выбранного элемента списка.
    • If() — сначала проверяет, имеет ли переменная TextSelected значение 1. Если это так, кнопка Удалить удаляет выбранный элемент из списка. Если нет, кнопка Удалить удаляет выбранный элемент из элемента управления таблицы данных.
    • Set() — сбрасывает переменную TextSelected обратно в значение o, чтобы новый элемент мог быть выбран из списка.

Теперь, когда у вас настроены все компоненты приложения, убедитесь, что экран выглядит так, как в следующем примере:

Приложение после добавления всех компонентов.

Шаг 9. Сохранение приложения

Теперь, когда в приложение добавлены возможности просмотра, редактирования, добавления и удаления, сохраните приложение.

  1. Выберите меню Файл.

  2. Выберите Сохранить.

  3. При первом сохранении параметр Сохранить приведет вас к функции Сохранить как. Выберите Сохранить, чтобы сохранить приложение в облаке.

    Сохраните приложение.

  4. Закройте Power Apps Studio.

Шаг 10. Тестирование приложения

  1. Перейдите к Power Apps.

  2. Выберите Приложения.

  3. Выберите созданное приложение.

    Запустите приложение.

  4. Протестируйте компоненты приложения.

    Воспроизвести анимацию приложения.

    Совет

    Вы можете быстро просмотреть поведение компонента с помощью клавиши клавиатуры Alt и щелчка левой кнопкой мыши при редактировании приложения внутри Power Apps Studio.

    Например, вместо выбора Предварительный просмотр приложения сверху справа или клавиши F5 с клавиатуры, которые запускают приложение в режиме предварительного просмотра, удерживайте нажатой клавишу Alt на клавиатуре, затем выберите строку из таблицы данных, чтобы изменить элемент управления формы редактирования на выбранную строку, как если бы приложение было запущено в режиме предварительного просмотра.

    Alt + щелчок левой кнопкой мыши по раскрывающемуся меню для предварительного просмотра.

    Кроме того, удерживайте клавишу Alt нажатой на клавиатуре, и вы можете продолжить выполнять предварительный просмотр внутри Power Apps Studio. Например, выбор нескольких компонентов для разных действий или проверок.

Дальнейшие шаги

Если вы вносите изменения в приложение, необходимо опубликовать изменения, чтобы они были видны другим пользователям.

Когда приложение будет готово к использованию, поделитесь приложением.

См. также

Примечание

Каковы ваши предпочтения в отношении языка документации? Пройдите краткий опрос (обратите внимание, что этот опрос представлен на английском языке).

Опрос займет около семи минут. Личные данные не собираются (заявление о конфиденциальности).