This article explains an approach to build custom pages as contextual model dialogs, integrated to the command bar controls in PowerApps.
In the previous articles,
- we have seen about the custom page introduction in PowerApps. Introduction to custom page on Power Apps.
- The detailed approach to build custom pages and add as landing pages in the model driven app. Power Apps custom landing page with model driven entity views sample
The solution, model driven app and a custom landing page for model driven app was created and demonstrated in the previous article. As a continuation from the previous articles, we will take dealership scenario for the model dialog demonstration in this article. The scenario considered here is to send a task to the dealer from the main grid view in model driven app, without navigating to the entity record form or associated views. This provides flexibility to send out quick actions/tasks for the business users, assuming this feature is most used actions in the business.
Building custom page for model dialog
Creating canvas app like custom page might be familiar for you. This can be done from the solutions on PowerApps https://make.preview.powerapps.com, create a new custom page by clicking on New -> App -> Page.
The following snapshot shows one simple view created to show the selected dealer and option to send out the quick actions/tasks to the user (entity record) in model driven app.
|PowerApps custom page for dialog view in model driven app|
The app is configured with the following.
- The app onStart is configured to pick the records passed from the PowerApps model driven app entity grid view.
- Set(RecordItem, If(!IsBlank(Param("recordId")), LookUp(Dealers, Dealers = GUID(Param("recordId")))))
- For saving/sending the activity to the dealer (contacts entity), the onSelect property needs to be configured as shown below.
Adding custom page to model driven app for modal dialog
From already created model driven app for dealership dashboard, add the above custom page without navigation. The navigation option should be unchecked.
|Add custom page without navigation into modal dialog|
Adding script to solution for command bar button integration
Note: The page input name is the logical name of the custom page added above. This information is retrieved from the model driven app -> select the custom page on the app navigation -> Side panel loads with the name, and this is the display name.
Save and publish the resource.
Adding new button to grid view command bar and integrate script
From the model driven app, select the dealer table/entity, select the edit command bar option -> From "Choose a command bar to edit", select "main grid" -> Click on edit. The list of already available buttons are listed.
The following snapshot shows the above command bar configuration with highlighted.
Save and publish this changes.
Publish and run the solution to experience the custom page as model dialog in model driven app
Then re-save and publish all the customizations once from the solution, before testing the "add an activity" button on the main grid view.
Play the dealership model driven app, and navigate to the dealers grid view (entity/table). Select any record, to see the command button.
|"Add an activity" command button on the entity grid view|
On click of the newly added command button "add an activity", the dialog appears showing the entity record's contextual information. The dealer email is contextual information in this case, which could be used as key for posting the task from the dialog view.
|PowerApps custom page as model dialog in model driven app|
The following snapshot shows the task message added as activity to the selected user (entity record above).
|Activity added to the entity via the model dialog custom page is shown on the activities associated view in model driven app|
This demonstrates one other way (showing as dialog) of leveraging the custom page in the model driven app. The canvas app like feature is created in this sample to showcase posting an activity message to the dealer (entity) from the dealer grid view, without navigating to the activities associated view.