Как вы можете создать свое первое приложение с низким кодом с помощью Microsoft Power Platform

TLDR; в этой статье вы узнаете, как создать свое первое приложение с низким кодом с помощью Power Platform.

Вы научитесь:

• Размещать элементы управления для отображения и сбора данных.
• Реагировать на события.
• Сохранять состояние в переменной.

Ссылки

• Приложения Canvas
• Учебник по приложениям Canvas
• Ссылка на элемент управления
• URL-адрес видео

Что такое низкий код и почему нам это важно?

Разработка с низким кодом — это использование блоков вместо конкретного кода для создания приложений и сервисов. Существует множество платформ с низким кодом, платформа Microsoft называется Microsoft Power Platform.

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

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

Приложение на холсте

Существует множество типов приложений с низким кодом, которые можно создавать с помощью Microsoft Power Platform. Canvas apps позволяет создавать традиционные приложения различными способами.

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

Идея заключается в том, что вы создаете приложение подобно слайду Powerpoint и используете выражения Excel для добавления логики.

ДЕМО — создайте свое первое приложение

1. Перейдите на сайт https://make.powerapps.com.
2. Выберите «+ Создать», чтобы создать приложение на холсте.
3. Выберите «Пустое приложение» в основной области справа.
4. Дайте ему имя и выберите «Планшет».
5. Выберите «+» в меню слева, чтобы добавить элементы управления.
6. Выберите метку Text и перетащите ее на экран.
7. Выберите элемент управления и измените свойство Text либо в элементе управления, либо через выпадающий список, как показано ниже:

1. Выберите кнопку и перетащите ее на экран. Измените ее значение на «Сохранить».
2. Выберите кнопку и убедитесь, что свойство OnSelect выбрано.
3. Измените значение fx на UpdateContext({ myvar: "clicked" }), это создаст переменную myvar и присвоит ей значение «clicked»:

1. Выберите ваш ярлык и измените его содержимое в области fx на следующее "Show text:" & myvar, это обеспечит отображение содержимого статического текста и значения myvar.

& конкатенирует две строки вместе.

1. Протестируйте свою программу, нажав на значок воспроизведения в правом верхнем углу:

1. Попробуйте нажать на кнопку и убедитесь, что на ней написано «clicked».

Отлично, вы создали свое первое приложение Canvas, но мы можем немного улучшить его, полагаясь на текстовый ввод.

Используйте текстовое поле

1. Перетащите текстовый ввод на основную поверхность.
2. Обратите внимание на имя текстового ввода, теперь вы будете ссылаться на него в свойстве OnSelect кнопки:

1. Измените fx-значение OnSelect кнопки на следующий код

   UpdateContext({ myvar: TextInput2.Text })

Приведенный выше код установит myvar в содержимое элемента управления TextInput2 и его свойство Text.

1. Запустите вашу программу:
   1. Введите какой-нибудь текст, например, «abc» в текстовое поле.
   2. Нажмите на кнопку, теперь вы должны увидеть, что метка обновляется соответствующим образом до «Show text: abc», это работает.

Далее давайте улучшим нашу программу, очистив поле ввода после нажатия кнопки.

Очистка полей ввода

1. Выберите кнопку и добавьте следующий код в область fx:

   Reset(TextInput2)

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

   UpdateContext({ myvar: TextInput2.Text });

   Reset(TextInput2);

Перетащите поле fx вниз по вертикали, чтобы увидеть его больше. Обратите внимание, как мы добавили точку с запятой, ; выше, чтобы разделить несколько утверждений.

Этот код очистит поле ввода текста и вернет его к значению по умолчанию.

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

1. Выберите поле ввода текста и найдите свойство в детализации элемента управления справа под названием «Clear button» и включите его, как показано ниже:

1. Запустите программу и обратите внимание на «X», который появится в текстовом поле. Этот «X» позволит вам очистить текстовое поле через пользовательский интерфейс.

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