Power Platform : PowerApps – Demonstration of popups in PowerApps form.
Be happy 🙂 not because everything is good , but because you can see the good in everything.
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.
So without getting late, lets get started.
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.
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).
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.
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
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.
- Create a Team/Communication site.
- Click on New and select List on SharePoint site.
- Click on create a Blank list.
- In the list go to Gear icon and click on list settings.
- 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
- Now list is ready with created columns.
Create a Canvas App in PowerApps
- Go to PowerApps from Office 365 app launch.
- Click on Blank app on PowerApps Home.
- Create 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.
- Go to Insert and select a Label for heading of the app and rename it. Now set the label properties as per our requirement.
- Go to Forms and select Edit forms and rename it.
- In Form1 properties, Click on Data source and search for SharePoint and select it.
- Add a SharePoint connection now.
- Select SharePoint site where list was created.
- Choose the list created and click on connect.
- 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.
- Set the Border for the heading and the Form1 in properties.
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.
- Insert a Rectangle from the Icons and resize it as the size of the MainScreen.
- 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.
- 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.
- Now set the Group Visible property to false, this will hide the popup window.
- Initialize the variable “ConfirmPopup” in the Visible Property of the Group.
- Set the variable “ConfirmPopup” as True in the OnCheck Property of the DataCardValue2 (Toggle).
- This helps to open the Popup window.
- 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.
- 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.
- 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.
- Click on Form and edit fields.
- Add a custom Data Card and rename it.
- 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.
- Now Insert a New Screen select type Success.
- Insert a Button on SuccessScreen and rename it as CloseButton.
- Use this function “Navigate(MainScreen)” OnSelect Property of CloseButton.
- If we click on the CloseButton it navigates to MainScreen with new form.
- If we switch the Show/Hidden (Toggle-On) field On, then it opens the popup.
Hope this article will help us to Demonstration of popups in PowerApps form.
Also get my article updates on my social media handles.
Twitter – https://twitter.com/KhasimShaik2009
Thank you for your support, will catch up with new article soon.
Keep learning and keep smiling.
Have a great day.