This blog will discuss a new component for Power Apps Model Driven Apps called Custom Page. In fact, this component joins the family of existing pages like Forms, Views and Dashboards. This new type of page is based on the Canvas Apps container and will surely add power, flexibility and a lot of possibilities to model driven apps.
The images below shows the rendering of a Custom page from the Canvas App studio and from a model driven app.
Please note that the documentation for this new component is still in pre-release. You can have a look at it at the following link.
To discover this new type of page, I added a terms and conditions page that will be displayed at the first login of a user. Indeed, the goal is that the user will be able to access its features on the model driven app if and only if he has accepted the conditions of use.
How it works ?
Step 1: (First use of the app)
- At the first use of the application, the user sees only the basic features of the application. Indeed, this is possible thanks to the security roles. In my case, I used the standard security role “Basic User”.
At the time of writing this blog. Custom Page management is only available on https://make.preview.powerapps.com/
Step 2: (Accepting the usage terms)
- Fluent UI controls are used by default. I was surprised by the final rendering of my page.
- The Canvas app (Custom Page) should be responsive, otherwise it will not be displayed properly when integrated on the MDA. I highly recommend reading this documentation to build responsive Canvas Apps.
- When the submit button is clicked, a flow is executed in the background that will assign the new security role to the user so that he can access all his features.
- You can refer to this blog to build this kind of Cloud Flow.
- The flow creates a task for the user that will ask him to refresh the browser so that he can take advantage of his new security role.
- This step was not planned. Indeed, I wanted to trigger a browser refresh from the Custom Page. Unfortunately, I didn’t find a way to do this using the PowerFx commands that are used to trigger navigation.
- As this cannot be done automatically, a task will be assigned to the user to refresh his browser.
- While the flow is running, a spinner is displayed on the screen.
- In order to know that the flow execution is completed. A response will be sent to the Canvas Apps.
- The Canvas App will display a spinner before receiving a response from the flow. You can refer to this blog if you can to build a spinner and use it in your apps.
- At the end of the flow execution, the custom page triggers a navigation on the MDA to the activity view.
- Custom pages use PowerFx commands to interact with the host model driven app.
- You can find some examples in the following documentation.
Below are the commands triggered by clicking on the Submit button:
Set(isRunning, true); Set( Result, SetuserSecurityRoleafteracceptingTermsandconditions.Run(Checkbox1.Checked).result ); Notify( "The process was executed successfully. ", NotificationType.Success, 0 ); Set(isRunning, false); Navigate(Activities);
Step 3: (Using the app)
- This approach was not my first option.
- Indeed, I wanted to hide the custom page from the navigation menu according to the privileges of the security role of the current user. Unfortunately, this is not yet achievable on the MDA designer.
- I used a solution proposed on this blog to check the security roles of the connected user.
Below are the commands to initiate the global variables when loading the application. These variables will be used to implement the read-only mode in the custom page. I use
Set(isRunning, false ); ClearCollect(UserRoles,(LookUp(Users,domainname=User().Email).'Security Roles (systemuserroles_association)').Name); If(IsBlank(LookUp(UserRoles,Name="System Administrator")),Set(isAccepted, false ),Set(isAccepted, true ));
The mix of Model Driven App and Canvas App will further accelerate the development of new business processes and will also give more agility and faster adaptability to enterprise business processes.
The above blog demo did not show all the capabilities of this new component, such as using the component as a dialog. This capability will enable us to build dialogs quickly and without code.
Hope it helps…