Разработчик платформы Power APPS о многом позаботился для удобной разработки Canvas приложений в режиме Low-Code. Но некоторых моментов, которые нередко используются в профессиональной разработке современного ПО, не хватает. В данном случае мы поговорим о вызове вспомогательных всплывающих форм (PopUp Forms).

Вызов форм обычно бывает модальный, когда вызванная форма не позволяет осуществлять с основной формой приложения никаких действий, пока не будет закрыта вызванная. Немодальная форма будет отображена поверх основной, но не будет мешать работе элементами основной формы. Для чего нужны такие формы в вебе, в т.ч. в приложениях Power APPS? Когда поле ввода (TexInput) подразумевает подстановку только тех значений, которые допустимы правилами ввода, определяемые разработчиком ПО и исключающие свободный ввод со стороны пользователя, помогающие быстро ввести нужные данные. Например, вызов калькулятора для поля или же выбор из специального справочника данных. 

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

• При перетаскивании контейнера все элементы в нем сохраняют свои координаты позиции, т.е. выполняет роли группирующего элемента интерфейса приложения.
• Для контейнера можно выставить важные свойства: заливку фона, закругления формы и тень (лучшая визуализация вызова формы поверх).
• Для управления вызовом контейнера используется изменение булева значения для свойства Visible.

Рассмотрим на примере. Допустим по нажатию кнопки мы должны вызвать небольшую форму с полем ввода и после нажатия на кнопке ОК вызванная форма должна закрываться, а значение ввода внесено в мини-текстовый редактор. 

Для этого на основную форму разметим все необходимые компоненты, а на стартовое событие приложения OnStart напишем код инициализации начального значения переменной vShow = false. Для Container1 (вызываемая форма) по умолчанию свойство Visible=vShow, т.е. скрыто. И заодно вернем значения по умолчанию для полей и редакторов.

Далее, укажем событие на OnSelect кнопки вызова формы простое обновление значения переменной vShow на true:

UpdateContext({vShow:true});

А для элементов контейнера пропишем обратные значения для реализации закрытия формы.

На "крестик" (простое закрытие окна) не нужно учитывать изменение переменной в редакторе, здесь достаточно просто скрыть окно.