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.
- Patch(Tasks,Defaults(Tasks),{Subject:TextBox1.Value,Regarding:RecordItem})
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
To generate the modal dialog from the model driven app's entity grid view, new button is required on the command bar, and model dialog generation script is integrated to the button. Later in the article, new button is added to the grid view's command bar on the model driven app. This button will act as "add an activity" feature for users, and this requires JavaScript resource to be included to pass the entity form's contextual information like selected identity. Before demonstrating the button addition, we will include the script the library.
From the solution, create a JavaScript web resource. This can be done by clicking on New -> Other -> web resource, and provide the basic details including name, display name, type as script (JScript). Next to type, the text editor option is available to upload the JavaScript code.
 |
| Add JavaScript resource for command bar button integration to pass the entity contextual information to the custom page from entity grid view on model driven app |
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.
Add a button by clicking on "New command". Provide the details like label, icon, order number to show the command, action as JavaScript, visibility with the formula highlighted below. The previously created JavaScript can be linked by clicking on add library, and provide the same function name as shown on the JavaScript code, with the parameter as SelectedControlAllItemReferences to pass the selected entity records.
The following snapshot shows the above command bar configuration with highlighted.
 |
| Add an activity command bar integrated with JavaScript |
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.
