M365 / Microsoft 365 / Microsoft Office / Office 365 / Power Apps / Power Platform / SharePoint / SharePoint Online / SharePoint Online / SharePoint Online
0

Power Platform : PowerApps – Demonstration of popups in PowerApps form.

by Khasim Shaik · July 15, 2022

Be happy 🙂 not because everything is good , but because you can see the good in everything.

Hello Everyone,

Hope you all are doing well.

Today in this article I am going to discuss about how to create a canvas app with popup window in PowerApps.

We have good number of articles on Power Platform, please have a look.

https://knowledge-junction.in/category/technology-articles/power-platform/

So without getting late, lets get started.

Background

In one of our project required PowerApps form with popup window. We prepared a PowerApps form and use a Toggle to open/close the popup window. And also in that popup window we need to show the hidden values of fields.

Introduction

PowerApps:

Power Apps is a suite of apps, services, and connectors, as well as a data platform, that provides a rapid development environment to build custom apps for our business needs. Using Power Apps, we can quickly build custom business apps that connect to our data stored either in the underlying data platform or in various online and on-premises data sources (such as SharePoint, Microsoft 365, Dynamics 365, SQL Server, and so on).

Canvas App:

A canvas app is commonly seen in tablet or mobile apps when embedded in a Power BI dashboard. It’s exactly how it sounds – we get a blank canvas. From that, we can drag, drop, move, resize and reformat the components where we need them to build our user interface.

SharePoint:

Microsoft SharePoint is a cloud-based service that helps organizations share and manage content, knowledge, and applications to:

Empower teamwork
Quickly find information
Seamlessly collaborate across the organization

SharePoint List:

A list is a collection of data that we can share with our team members and people who we’ve provided access to. We’ll find a number of ready-to-use list templates to provide a good starting point for organizing list items.

Create a SharePoint List

Go to office.com, and sign in to our M365 account – https://www.office.com/?auth=2
Launch SharePoint from Office365 app launcher.

Micrososoft365 - SharePoint — *fig: Micrososoft365 – SharePoint*

Create a Team/Communication site.

Micrososoft365 - SharePoint create site — *fig: Micrososoft365 – SharePoint create site*

Click on New and select List on SharePoint site.

Micrososoft365 - SharePoint site new list — *fig: Micrososoft365 – SharePoint site new list*

Click on create a Blank list.

Micrososoft365 - SharePoint site create blank list — *fig: Micrososoft365 – SharePoint site create blank list*

In the list go to Gear icon and click on list settings.

Micrososoft365 - SharePoint list listings — *fig: Micrososoft365 – SharePoint list listings*

We create the columns of SharePoint list in the list settings as below.

Title – Single line of text

Show/Hidden – Yes/No

Hidden1 – Single line of text

Hidden2 – Single line of text

Micrososoft365 - SharePoint create list columns — *fig: Micrososoft365 – SharePoint create list columns*

Now list is ready with created columns.

Micrososoft365 - SharePoint list columns — *fig: Micrososoft365 – SharePoint list columns*

Create a Canvas App in PowerApps

Go to PowerApps from Office 365 app launch.

Micrososoft365 - PowerApps — *fig: Micrososoft365 – PowerApps*

Click on Blank app on PowerApps Home.

Micrososoft365 - PowerApps - Blank app — *fig: Micrososoft365 – PowerApps – Blank app*

Create Blank Canvas app.

Micrososoft365 - PowerApps - Blank canvas app — *fig: Micrososoft365 – PowerApps – Blank canvas app*

Now we can see PowerApps Canvas App – Home. And by default, we have a screen here to create our app. Rename the Screen1 as MainScreen.

Micrososoft365 - PowerApps - Blank canvas app Home — *fig: Micrososoft365 – PowerApps – Blank canvas app Home*

Go to Insert and select a Label for heading of the app and rename it. Now set the label properties as per our requirement.

Micrososoft365 - PowerApps - canvas app heading — *fig: Micrososoft365 – PowerApps – canvas app heading*

Go to Forms and select Edit forms and rename it.

Micrososoft365 - PowerApps - Insert Forms — *fig: Micrososoft365 – PowerApps – Insert Forms*

In Form1 properties, Click on Data source and search for SharePoint and select it.

Micrososoft365 - PowerApps - add data source — *fig: Micrososoft365 – PowerApps – add data source*

Add a SharePoint connection now.

Micrososoft365 - PowerApps - add connection — *fig: Micrososoft365 – PowerApps – add connection*

Select SharePoint site where list was created.

Micrososoft365 - PowerApps - search site/URL — *fig: Micrososoft365 – PowerApps – search site/URL*

Choose the list created and click on connect.

Micrososoft365 - PowerApps - connect list — *fig: Micrososoft365 – PowerApps – connect list*

The list columns are added in the Form1 as Data cards. In properties we can change the columns and layout of the form as per our requirement.

Micrososoft365 - PowerApps - Form Data Cards — *fig: Micrososoft365 – PowerApps – Form Data Cards*

Set the Border for the heading and the Form1 in properties.

Micrososoft365 - PowerApps - Border — *fig: Micrososoft365 – PowerApps – Border*

Lets try with Popup

High level steps:

Insert Rectangles for popup.

Insert details (label/Text input/button) which we want show on popup.

Initialize and set the variable for the popup.

Add functions on respective fields (Toggle/Button) to open/close the popup.

Detailed steps:

Insert a Rectangle from the Icons and resize it as the size of the MainScreen.

Micrososoft365 - PowerApps - Insert Rectangle — *fig: Micrososoft365 – PowerApps – Insert Rectangle*

In Fill property of rectangle use this function RGBA(153, 153, 153, 1). And change the Alpha value 1 to 0.7. Now the rectangle shown as transparent on the MainScreen.

Micrososoft365 - PowerApps - Insert Rectangle fill property — *fig: Micrososoft365 – PowerApps – Insert Rectangle fill property*

Now Insert another Rectangle from Icons and resize it as per our requirement for popup it on the MainScreen.

Here we have a condition.
In toggle “On” mode, open a popup and show the hidden values “Hidden1” and ”Hidden2.
In toggle “Off” mode, do not open popup.
So, insert 2 Labels and 2 Text inputs in the popup window which we want to show. Rename the labels as Hidden1 and Hidden2 and set the Default property of Text input to (“”) no value.

Now Insert a Button on popup window and rename it.

Now select the all the popup related fields (Rectangle 1&2, Label 1&2, Text input 1&2 and Button1) and click on “…” and select Group.
Now all the selected fields are moved to in that group.
This group will help to change the properties of all the fields at a time in that group.

Set a variable “ConfirmPopup” as false in the OnSelect Property of the Button1. This helps to go back to the MainScreen.

Micrososoft365 - PowerApps - add functions OnSelect property of button — *fig: Micrososoft365 – PowerApps – add functions OnSelect property of button*

Now set the Group Visible property to false, this will hide the popup window.

Micrososoft365 - PowerApps - Group Visible Property — *fig: Micrososoft365 – PowerApps – Group Visible Property*

Initialize the variable “ConfirmPopup” in the Visible Property of the Group.

Micrososoft365 - PowerApps - initialize variable on Visible property of Group — *fig: Micrososoft365 – PowerApps – initialize variable on Visible property of Group*

Set the variable “ConfirmPopup” as True in the OnCheck Property of the DataCardValue2 (Toggle).
This helps to open the Popup window.

Micrososoft365 - PowerApps - set variable on OnCheck property of Toggle — *fig: Micrososoft365 – PowerApps – set variable on OnCheck property of Toggle*

Unlock the Data Card in Advanced properties and use this function “If(DataCardValue2.Value=false,””,Text(Hidden1Text))” on Default property of DataCardValue3 (Hidden1Value).
This means we are showing the Hidden1Text in popup window as the value of DataCardValue3 and save it in the list.

Micrososoft365 - PowerApps - functions on Default property of DataCardValue3 — *fig: Micrososoft365 – PowerApps – functions on Default property of DataCardValue3*

Unlock the Data Card in Advanced properties and use this function “If(DataCardValue2.Value=false,””,Text(Hidden2Text))” on Default property of DataCardValue4 (Hidden2Value).
This means we are showing the Hidden2Text in popup window as the value of DataCardValue4 and save it in the list.

Micrososoft365 - PowerApps - functions on Default property of DataCardValue4 — *fig: Micrososoft365 – PowerApps – functions on Default property of DataCardValue4*

Now we can hide the Hidden1 Data card & Hidden2 Data Card because they will work internally in the popup window.
Set the Visible property of the Hidden1 Data card & Hidden2 Data Card as false.

Micrososoft365 - PowerApps - Visible property of Data Card — *fig: Micrososoft365 – PowerApps – Visible property of Data Card*

Click on Form and edit fields.
Add a custom Data Card and rename it.

Micrososoft365 - PowerApps - add custom Data Card — *fig: Micrososoft365 – PowerApps – add custom Data Card*

Insert a Button on Submit Data Card and rename it as SubmitButton.
And use this function “SubmitForm(POCForm); Navigate(SuccessScreen);Reset(Hidden1Text);Reset(Hidden2Text)” OnSelect property of CloseButton.
This helps to submit the form and navigate success screen and reset the values.