Archive
[Beginners] Canvas Apps | Options to store configuration data
While building Canvas apps, its pretty common ask to store the configuration data or a Dictionary of key and value pairs. As an example, you might be sending an email from Canvas App and you would want the sender email DL (Distribution List) to be configurable. Think of these settings like an ASP.NET web.config file.
In this article, lets see what are the options to store configuration data.
Creating a hidden configuration screen :
An easy way of setting configuration values is just to create a hidden screen and put your configuration values in text input controls. In this way, you can change application settings without editing code.
- Create a ‘Settings Screen’ and make it as the last screen, so that it’s easily found.
- I’ve create a simple ‘Settings Screen’ with a text input control ‘txtEmailDL‘.
- We will restrict the ‘Settings Screen’ screen to the end users by making sure no logic/formula on the App takes Users to this screen. This way the screen accessible only when the app is edited, and Makers or Admin can go to this screen and configure values.
- Now, lets see how to read the configuration data and use it across the App.
- I’ve created a flow which expects ‘EmailDL’ parameter from the Canvas App.
- On my Canvas Apps ‘Main’ screen, I’ve a button which triggers the flow by passing the Email DL value. Here I am reading the txtEmailDL control value from my ‘Settings Screen’ and pass it to the flow.
- This way yo can read the txtEmailDL control value from ‘Settings Screen’ across all the screens of Canvas application.
Drawbacks of this approach:
- You must republish the app to change values and make them persist.
- Because values persist in the app, you must create a process that updates these values before you export the app in preparation for a move to another environment.
Store the configuration data in external source (Dataverse):
Keep in mind that Dataverse requires a premium connector and since you are using Dataverse you will need a premium license. To use this approach:
- Create a new Dataverse table to store configuration values. Because the values persist outside the app, they can be modified at any time without redeploying the app.
- As an example, create a table with a custom ‘Data’ column and keep configuration settings required for your Canvas app in json format.
- Every time you open Canvas App, read the configuration from Dataverse.
Drawbacks of this approach:
- This approach requires a call-back to Dataverse connector evertytime you open the Canvas Apps. Therefore, there will be a slight effect on performance.
Hope you got some beginner understanding of how to store configuration data and consume in Canvas Apps. If you are a beginner, I highly recommend go through coding standards.
🙂
[Step by Step] Power Apps | Show pop ups in Canvas App
In this article lets see how to show pop-ups in Canvas Apps using Container controls. I am going to explain this topic with two different examples. A ‘Single Popup’ and ‘Dual Popup’.
Single Popup in action:
Dual Popups in action:
Now that you got an idea of the two examples, lets go ahead and learn how to build them.
Step by Step to show single popup:
- Create a new Canvas App.
- Add a button ‘Demo Single Popup’ to the screen to show popup.
- To display a popup, we would need 2 Container controls.
- First container will bring the gray out affect speeded across the screen.
- Second container will hold the display content and acts as popup pane.
- So add the 1st Container on the screen and spread it across the screen.
- I’ve named the Container as ‘cont_One’.
- In the “Fill” property of Container (i.e., cont_One), set the value as RGBA(169, 169, 169, .75)
- RGBA(169, 169, 169, .75) gives gray out affect. You may also use your own color combination.
- Now add the 2nd Container, by selecting the 1st Container (i.e., cont_One). Make sure you select ‘cont_One’ before adding the second container.
- I’ve named the2nd Container as ‘cont_Two’.
- Place the 2nd Container (i.e., cont_Two) middle of the screen and set the background color.
- Its time to add pop up content. So, select ‘cont_Two’ and add the controls. I’ve added a Label and Button controls as shown below.
- Now that we got the layout ready, its time to implement hide/show of popup logic.
- As we need to show popup only on ‘Demo Single Popup’ button click, set a Boolean variable by name ‘ShowPopup‘ on ‘OnSelect’ of ‘Demo Single Popup’ button.
- Formula : UpdateContext({ShowPopup : true});
- Now select 1st Container (i.e., cont_One) and set ‘Visible’ as ‘ShowPopup‘ variable which we defined in the previous step.
- As the popup should be closed on click of ‘Close’ button on 2nd Container (i.e., cont_Two), select the ‘Close’ button and on ‘OnSelect’ event, set the ShowPopup to ‘false’.
- Formula : UpdateContext({ShowPopup: false});
- That’s it. Play the App and you should see popup on click of ‘Demo Single Popup’ button and should close on click of ‘Close’ button.
Step by Step to show dual popup:
In the dual popup scenario, everything remains same as we did for single popup and additionally we will add a 3rd Container. Lets get started.
- Repeat the steps you did during single popup.
- There is a slight change than what we did in single popup demo in terms of controls.
- I’ve added ‘Rating’ control instead of label.
- Now that we added ‘cont_One’ and ‘cont_Two’, to get the dual popup, select ‘cont_One’ and add a new Container and name it as ‘cont_Three’
- Place the ‘cont_Three’ on top of ‘cont_Two’ and add controls as shown below.
- We got the layout ready, its time to implement hide/show of popup logic as below.
- On click of ‘Demo Dual Popup’ button on main screen
- Show ‘cont_One’.
- Show ‘cont_Two’
- Hide ‘cont_Three’.
- On click of ‘Rate Us’ button of ‘cont_Two’
- Show ‘cont_One’.
- Hide ‘cont_Two’.
- Show ‘cont_Three’.
- On click of ‘Close’ button of ‘cont_Three’
- Hide ‘cont_One’.
- Hide ‘cont_Two’.
- Hide ‘cont_Three’.
- On click of ‘Demo Dual Popup’ button on main screen
- Don’t worry, if the above conditions scares you. Its easy to implement. Its how we did by defining ‘ShowPopup‘ variable in showing single popup example. Additionally we would need another variable ‘ShowDualPopup‘ for dual popup.
- On ‘OnSelect’ event of ‘Demo Dual Popup’ button, set ‘ShowPopup‘ variable as ‘true’ and another variable ‘ShowDualPopup‘ as ‘false’.
- Formula : UpdateContext({ShowPopup : true, ShowDualPopup:false});
- Now select 1st Container (i.e., cont_One) and set ‘Visible’ as ‘ShowPopup‘ variable. (Refer screen from single popup example if you need help).
- Now select 3rd Container (i.e., cont_Three) and set ‘Visible’ as ‘ShowDualPopup‘ variable.
- As we need to show ‘cont_Three’ only on click of ‘Rate us’ button of ‘cont_Two’, on ‘OnSelect’ of ‘Rate us’ button set the ‘ShowDualPopup‘ variable to ‘true’.
- Formula : UpdateContext({ShowDualPopup : true});
- Important point to note is that, we dont need logic to Hide/Show ‘cont_Two’ as it gets visible when ‘cont_One’ is visible and it gets hidden when ‘cont_Three’ is visible as ‘cont_Three’ is top of ‘cont_Two’.
- Finally, as we need to hide all the popups (i.e., cont_One and cont_Three) once you click the ‘Close’ button on ‘cont_Three’, on ‘OnSelect’ of ‘Close’ button set both ShowPopup and ShowDualPopup variables to ‘false’.
- Formula : UpdateContext({ShowPopup:false,ShowDualPopup :false})
- That’s all needed for dual popups. Play the App and you should see dual popups.
🙂
Canvas App | Formula to combine combo box selected items
In this short blog post, lets see how to write formula to combine combo box selected items in to text with a separator.

Formulas:
Single column collection:
- If the Combo box items is a single column collection as specified below.
- Use ‘ThisRecord.Value’ in the Concat function.
- Formula : Concat(cmbFruits.SelectedItems,ThisRecord.Value,”,”)
Multi column collection:
- If the Combo box items is a Multicolumn Collection as specified below.
- Use ‘ThisRecord.{Attribute_Name}’ in the Concat function.
- Formula : Concat(cmbFruitsTable.SelectedItems,ThisRecord.Name,”,”)
🙂
Canvas App | Edge Browser | Quick way to test the Apps Responsiveness
Its imperative to test the Canvas App’s responsiveness and on different devices to make sure the layout is responsive and intuitive. In this article, lets see how to test your Canvas App in different device orientations.
Steps to test the Canvas Apps Responsiveness:
- Open the App in Edge browser.
- Press F12 to open the ‘Dev Tools’ Pane.
- From ‘DevTools’ pane, click on ‘Toggle device emulator’ icon (Highlighted in screen below)
- Now you have the options to test the responsiveness using ‘Responsive’ option.
- Or pick any of the device option form the list. Use the ‘Rotate’ option, to test in Landscape orientation.
🙂
Power Apps | Canvas App | StartScreen property
In the latest Canvas App updates, following key announcement has been made on App’s ‘OnStart’ property.
- Using the Navigate function in the OnStart property has been retired. (Refer below screen as App throws warning if you have Navigate function on OnStart)
- Existing apps will continue to work. For a limited time, you can still enable it in the app settings (available under Retired).
- However, using Navigate in this manner can lead to app load delays.
- Use the new StartScreen property instead, to calculate the first screen displayed.
StartScreen:
- App.StartScreen: a new declarative alternative to Navigate in App.OnStart.
- The StartScreen property determines which screen will be displayed first.
- By default, this property will be empty, and the first screen in the Studio Tree view is shown first.
- Following is an example, to Navigate to ‘Screen2’ based on a Condition.
- If(User().Email=”RajeevPentyala@expnov21.onmicrosoft.com”,Screen2,Screen1)
- If you notice, no ‘Navigate’ function is used in above example.
- If StartScreen returns an error, the first screen in the Studio Tree view will be shown as if StartScreen hadn’t been set.
- Global variables and collections, including those created in OnStart, are not available in StartScreen.
Refer Docs for more info.
🙂