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.

.

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.com/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

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.
Micrososoft365 - PowerApps - Insert Rectangle for popup
fig: Micrososoft365 – PowerApps – Insert Rectangle for popup
  • 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.
Micrososoft365 - PowerApps - Insert label/Text input on popup
fig: Micrososoft365 – PowerApps – Insert label/Text input on popup
  • Now Insert a Button on popup window and rename it.
Micrososoft365 - PowerApps - Insert button on popup
fig: Micrososoft365 – PowerApps – Insert button on popup
  • 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.
Micrososoft365 - PowerApps - Group the popup fields
fig: Micrososoft365 – PowerApps – Group the popup fields
  • 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.
Micrososoft365 - PowerApps - Insert button on custom Data Card
fig: Micrososoft365 – PowerApps – Insert button on custom Data Card
  • Now Insert a New Screen select type Success.
Micrososoft365 - PowerApps - Add success screen
fig: Micrososoft365 – PowerApps – Add success screen
  • Insert a Button on SuccessScreen and rename it as CloseButton.
  • Use this function “Navigate(MainScreen)” OnSelect Property of CloseButton.
Micrososoft365 - PowerApps - Add button on success screen
fig: Micrososoft365 – PowerApps – Add button on success screen
  • If we click on the CloseButton it navigates to MainScreen with new form.
Micrososoft365 - PowerApps - main screen
fig: Micrososoft365 – PowerApps – main screen
  • If we switch the Show/Hidden (Toggle-On) field On, then it opens the popup.
Micrososoft365 - PowerApps - popup window
fig: Micrososoft365 – PowerApps – popup window

.

Hope this article will help us to Demonstration of popups in PowerApps form.

Also get my article updates on my social media handles.

LinkedIn – https://www.linkedin.com/in/khasim-shaik-8784a1232/

Twitter – https://twitter.com/KhasimShaik2009

Facebook – https://www.facebook.com/profile.php?id=100078255554660

Thank you for your support, will catch up with new article soon.

Keep learning and keep smiling.

Have a great day.

Thanks.

Khasim Shaik

SharePoint & Power Platform Developer at OS InfoTech

You may also like...

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: