Sunday, 22 August 2021

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. 

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

Customizing custom page:

As this is going to be the landing page for the system, I am creating a canvas solution to show data from different entity views. The custom page is modified to have different containers and galleries, with data showing from different entities.

From the gallery onselect formula, provide a redirection to the actual entity view to show the selected item in detail. Repeat this for all galleries.

Modify model driven app to show integrated view

From the solution, edit the model driven app in preview mode. From the model driven app, add the custom page, and other entity/table as table views.

This can be done by selecting add a page.

  • Adding tables/entities: Select page type as "Table based view and form" for adding existing entities (model, manufacturing units, vehicles).
  • Adding pages: Select custom (preview) option to add above created pages.

The following snapshot shows the pages/entities added.

Publish and play the custom page solution with model driven app entities

Once added, publish the model driven app, and play the solution.

The following snapshot shows the model driven app solution created with custom landing page and entity views.

Now on click of any item on the custom landing page, you will be redirected to the respective detailed item on the entity.

Following snapshot shows the detailed view of item clicked. (manufacturing unit item clicked)

On click of any entity, list view can be seen which shows all the entity items.

This demonstration showed you the custom page used as landing page option on the model driven app solutions. In short, we have used the custom page to see the summarized view of the solution without navigating to actual separate views. This might vary based on the requirements.

Next we will look at the demonstration of using custom page as dialog/panel view on click of command bar buttons from the entity views.