Creating custom pages as contextual modal dialogs for model driven app entity records in PowerApps

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})

Save and publish. The next step is to integrate the page with the model driven app.

Power Apps custom landing page with model driven entity views sample

In the previous post, the necessity for custom page which converges canvas app with model driven app was explained. 

• Introduction to custom page on Power Apps

In this article post, we will look at a basic example for convergence of canvas app as custom page with model driven app.

From PowerApps portal https://make.preview.powerapps.com/, create a solution under solutions tab.

Create/Add the model driven app, entities and page:

In this case I have leveraged the model driven app with dealer example created in one of my previous article.

From the solution objects, create/add the apps. 

The following high level steps shows what elements are added to the solution.

• Model driven app: Add the existing solution from add -> app -> model driven app. search and add the model driven app.
• Entities (Tables): From the solution, create the necessary tables (entities) for the solution. In this solution, the tables added are dealers/users, models, manufacturing units and vehicles.
• Page (Landing page): From the solution, create a page as landing page for the solution. Creating the new page by click on New -> app -> page.

Introduction to custom page on Power Apps

This article series explains the new low-code development concept/feature introduced on Power Apps. That is custom page on Power Apps, which is still a preview feature. Recently Microsoft has announced the release of custom page preview feature with Power Apps. we will explore more about this feature with some samples. https://powerapps.microsoft.com/en-us/blog/custom-pages-for-converging-model-driven-apps-and-canvas-apps/

Custom page for model driven apps:

Over the time, Microsoft has introduced multiple types of apps. Now Microsoft has introduced custom page which converges canvas app experience with model driven app.

• That is, custom page is introduced to enhance the experience of model driven apps.
• The custom page development looks similar to Power Apps canvas app development. 
• So canvas app is not straightaway integrated with model driven app. Instead custom page option is introduced.

However there are also other points to note in comparing custom page with canvas app.

• Only one screen can be created on custom page. The redirection in this case is mostly to entities/forms. However canvas app can support multiple screens, and redirection between these screens are possible.
• Apps to be built with canvas apps type can stand alone, but custom page can only work with model driven app solution and cannot standalone.

What are various integration options available for custom page with model driven app on power apps?

• You can create and add a custom page as landing page for model driven app, along with other standard entity forms/views.
• You can integrate custom page to be available as dialog or side panels on click of command buttons on model driven app forms/views.

Migrating existing canvas app

What if you have already developed app with canvas app type, and you want to migrate this to custom page which can work with model driven app?

• Answer is simple, copy and paste the screen from canvas app to custom page. This has been outlined here. https://docs.microsoft.com/en-gb/powerapps/maker/model-driven-apps/model-app-page-overview#migrating-standalone-canvas-app-content-to-custom-pages
• you should do this migration only, if you want the model driven features available for your solution.

Connectors

Will custom page support connectors?

• Yes, connectors are supported as like canvas app. 
• But very limited standard connectors are verified. As of writing, only connectors like office 365 users, outlook, SharePoint online, SQL server, Power Automate, Teams, and excel online for business are verified.
• Custom connector are also available which helps you to build your own actions for integrations with other API services or on-premise data.

The below snapshot shows the custom page app created on Power Apps, with options available.

We will look at samples of custom page integrations with model driven apps in the next articles.

• Power Apps custom landing page with model driven entity views sample

Power Automate: Sending Emails without User Context

This article helps us to understand the way to send emails without the user context. This could be applicable for applications, where consumers/users are non-licensed.  

This could be achieved with the help of few set of actions on Power Automate flow. Here Microsoft graph end points are used to send emails on power automate, based on application permissions. The app permission needs to be enabled on Azure AD app. 

Let us only look at the power automate configuration, instead of end-end business scenario. The following snapshot shows the actions. 

Power Apps: Different type of Apps with Detailed Understanding

Power Apps provides options to create app based on the requirement and usage. There are three different type of apps available.

• Canvas 
• Model Driven  
• Portal 

Power Apps with the above three type of apps, adds more value to the Microsoft power platform, along with Power Automate. With both of these services from power platform, some of the complex business scenarios could be achieved with no-code or less-code approach. You will get this fact at the end of this article.

Let us quickly understand these different types.

Canvas App

When power Apps was introduced few years ago, this was the only type available. This type provides options to customize the user experience. That means, you can build the app from scratch defining each and every aspect of it. That includes,

• Design and UI elements –  
• Helps creating screens and adding necessary controls with just drag and drop approach.  
• Business logic can be  manipulated and achieved with functions/formulas with less-code or no-code scenarios. 
• Data connectivity – 
• There are default connectors available, providing flexibility to connect to multiple services without even writing code. This includes underlying common data service, and other SAAS services. 
• On top of this, Power Automate provides greater flexibility in integrating the multiple services/systems data with no-code configurations. 
• Users: 
• This canvas type is available for Azure AD or external users. 
• Only licensed users can only access the app. - The basic options available as of writing are for single app or multiple apps per user.