Archive

Archive for the ‘Canvas Apps’ Category

[Beginners] Canvas Apps | Options to store configuration data

February 6, 2023 Leave a comment

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.

🙂

Categories: Canvas Apps, CRM Tags: ,

Canvas App | Attachments | File Size and File Type validations

December 20, 2022 Leave a comment

Have you ever got “File to large” error while using Attachments control, something as below.

In this short article lets understand how to configure the size limits and also File Type validation

Steps to set the ‘MaxAttachmentSize’ for the ‘Attachments’ control:

MaxAttachmentSize  property limits the maximum allowed file size in MB of each new attachment. So we need to set this property as shown below.

  • Open the Canvas App and select the Attachments card.
  • From the Properties set the ‘Maximum attachment size (in MB)’ to desired limit.
  • Save and Publish

Validate attached file by file type:

  • If you need your Attachments control to accepts certain file type(s), add validation logic on OnAddFile event of Attachments control.
  • Formula to validate single file type (i.e., .msapp):
If(
    Not(
        EndsWith(
            First(Self.Attachments).Name,
            ".msapp"
        )
    ),
    Notify(
        "Only a MSAPP File (.msapp) is allowed.",
        NotificationType.Error
    );
    // Clear the attached file
    Reset(Self)
)
  • Formula to validate multiple file types (i.e., msapp and zip):
If(
    Not(
        EndsWith(
            First(Self.Attachments).Name,
            ".msapp"
        )
    ) And Not(
        EndsWith(
            First(Self.Attachments).Name,
            ".zip"
        )
    ),
    Notify(
        "Either a MSAPP File (.msapp) or Zip File (.zip) is allowed.",
        NotificationType.Error
    );
    // Clear the attached file
    Reset(Self)
)

Notes:

  • The attachment control has these limitations:
    • The attachment control only supports lists and Dataverse tables as the data sources.
    • Attachments control on a web browser lets you select multiple files, However, when using attachments control on Power Apps Mobile, you can only add files one at a time.
  • MaxAttachments  property limits the maximum number of files the control will accept.

🙂

Categories: Canvas Apps Tags: ,

[Step by Step] Power Apps | Show pop ups in Canvas App

November 15, 2022 Leave a comment

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’.
  • 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.

🙂

Categories: Canvas Apps, CRM, PowerApps Tags: , ,

Canvas App | Formula to combine combo box selected items

November 2, 2022 1 comment

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:
  • Use ‘ThisRecord.{Attribute_Name}’ in the Concat function.
    • Formula : Concat(cmbFruitsTable.SelectedItems,ThisRecord.Name,”,”)

🙂

Categories: Canvas Apps, PowerApps Tags: , ,

Canvas App | Edge Browser | Quick way to test the Apps Responsiveness

March 31, 2022 Leave a comment

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.

🙂

Categories: Canvas Apps Tags: , ,

Power Apps | Canvas App | StartScreen property

November 8, 2021 Leave a comment

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:

  • 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.

🙂

Categories: Canvas Apps, PowerApps Tags: ,