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

Создание карточки со списком покупок

  • Статья

В этом учебнике мы создадим карточку, отображающую список покупок и позволяющую добавлять элементы. Вы будете использовать конструктор карточек, переменные и Power Fx.

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

Снимок экрана готовой карточки со списком покупок.

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

Создание карточки

  1. Войдите в Power Apps и выберите свою среду.

  2. В левой области выберите Карточки. Если этого пункта нет на боковой панели, выберите …Еще, а затем выберите нужный пункт.

  3. Щелкните + Создать карточку.

  4. В разделе Имя карточки введите SimpleShoppingCard, затем выберите Создать.

  5. Выберите текст Здесь будет размещен заголовок карточки. На панели свойств текстовой метки установите для параметра Текст значение Список покупок.

  6. Выберите текст Добавьте и удалите элемент для настройки новой карточки. На панели свойств текстовой метки установите для параметра Текст значение Используйте поле ниже, чтобы добавить элементы в список.

Добавление переменной

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

  1. В левой области выберите Переменные.

  2. Выберите + Создать переменную.

  3. В окне Новая переменная введите MyGroceryList в поле Имя. Для параметра Тип выберите значение Таблица.

  4. Выберите фигурные скобки справа от пункта Значение по умолчанию и введите "" между скобками. Это указывает на то, что наша таблица содержит текстовые значения в столбце, неявно называемом Value

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

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

Добавление списка на карточку

  1. В левой области выберите Вставить.

  2. На панели инструментов выберите Показать, чтобы развернуть категорию, затем выберите Текстовая метка.

  3. В области свойств текстовой метки выберите вкладку Дополнительно.

  4. Установите Повторять для каждого для MyGroceryList.

    Снимок экрана области дополнительных свойств текстовой метки со списком MyGroceryList в свойстве «Повторять для каждого».

    Установка свойства Повторять для каждого текстовой метки повторяет текстовую метку для каждого элемента в указанной таблице. В этом примере таблица MyGroceryList — это переменная, которую вы создали. Другими словами, отдельная текстовая метка создается на карточке для каждого элемента в списке покупок.

  5. Выберите вкладку Свойства. Задайте для свойства Текст значение ThisItem.Value.

    Назначение определяемой системой переменной ThisItem.Value текстовой метке отображает значение текущего элемента в массиве MyGroceryList в виде текстовой метки. Массив — еще один термин для табличной переменной. Имя переменной можно ввести в строке формул или на панели свойств.

    Снимок экрана имени переменной, введенного в свойство «Text» текстовой метки.

Добавление поля ввода

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

  1. В левой области выберите Вставить.

  2. На панели инструментов выберите Ввод, чтобы развернуть категорию, затем выберите Ввод текста.

  3. На панели свойств ввода текста установите для свойства Name значение NewItem и установите в свойстве Label текст Новый элемент:.

    Снимок экрана с именами переменных, введенными в свойствах Name и Label текстового поля ввода.

    Свойство Name позволяет ссылаться на элемент управления в выражении Power Fx. Это должно быть одно слово, без пробелов и специальных символов. Свойство Label отображается на карточке. Имя и метка элемента управления не обязательно должны быть одинаковыми, как здесь, но использование похожих имен упрощает отслеживание элементов управления.

Добавление кнопки Power Fx

  1. В левой области выберите Вставить.

  2. На панели инструментов выберите Ввод, чтобы развернуть категорию, затем выберите Кнопка.

  3. На панели свойств кнопки установите для свойства Заголовок значение Добавить элемент.

  4. На панели свойств выберите PowerFx, чтобы поместить курсор в строку формул.

  5. Введите следующее выражение Power Fx в строку формул: Collect(MyGroceryList, {Value: NewItem})

    Это выражение использует функцию Power Fx Collect для добавления значения пользовательского ввода NewItem в табличную переменную MyGroceryList в неявный столбец Value. Поскольку выражение привязано к свойству OnSelect кнопки, оно запускается, когда пользователь нажимает кнопку.

    Снимок экрана выражения Power Fx в строке формул, назначенного свойству OnSelect кнопки.

Тестирование карточки

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

Проверьте свою карточку, добавив несколько продуктов в список покупок.

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

Узнайте, как сделать более сложную карточку с помощью соединителей Microsoft Dataverse.