Adventures with Power Apps: Model-Driven Apps and Custom Pages

I’ll admit it, I am a fan of Model-Driven Apps. ❤️

They are a great way to accelerate the development of applications that make user of Dataverse.

Sometimes I may create a Canvas App or two or three that use my Dataverse entities, but somewhere, I always have a Model-Driven App, even if it’s just to administer the data.

All that aside.

There are some limitations with Model-Driven Apps from a UI/UX perspective that I address using Custom Pages. 😞

For example, say I have a Task entity, and I want the user to be able to do batch assignments, I would do this using a Custom Page.

I will even sometimes do this if I want a Power Automate Flow to run in a blocking format (make the change in Dataverse and refresh the screen), for example, approving a purchase request or cancelling an order, in a more user-friendly experience, as opposed to use the Flows option in the command bar.

After doing things like this, I always ask myself two questions:

• Is this something that I can make repeatable? Easily replicate it in other solutions. 🔁
• If I can make it repeatable, can I do it in such a way that a new App Maker could do leverage it in their solutions? 🛟

My answer … yes! 💯

I started with a JavaScript file to handle the displaying of the Custom Page – don’t worry, it’s pretty simple JavaScript, and at the end of the day, all you need to do is import it into your solution. 😊

I created a file called Helpers.js, that consisted of the following code:

This code displays a Custom Page as Inline, Centered in a dialog window, or in the Sidebar.

I then uploaded this as a Web Resource in my Solution.

I navigated to my Model-Driven App, and for the entity I wanted to display the Custom Page from, I selected Edit command bar and then Edit.

I selected Main Form in the next screen.

I wanted to test all the various options of displaying the Custom Page so I added a Dropdown button, and then proceeded to add four more buttons for each option.

Set the button Action to Run JavaScript.

I selected my JavaScript file for the Library.

Note, the first time I did this I add to add my JavaScript so it could be selectable. I did this by clicking Add library.

I set Function name to openCustomPage – If you forget to do this, Power Apps Studio will bark at you! 🐕

I added four parameters.

Parameter 1 – String, the name of the Custom Page, in my case it was mruma_custompageaccountpage_b3537, you can find this in your Solution.

Parameter 2 – String, the title of the page.

Parameter 3 – FirstPrimaryItemId, this gets passed as a recordId parameter to the Custom Page.

Parameter 4 – Number, determines how to display the Custom Page, 1 – Inline, 2 – Centered Dialog and 3 – Sidebar, if not provided, the default is 1 -Inline.

I published all my changes, ran my app, and tested all the different ways my Custom Page could be displayed.

Everything worked perfectly! 👏 Well, not exactly, took me a little bit of time to figure out how to navigate back to the Account, but will save that for another day.

Want to try it out for yourself?

Download the managed solution at CustomPageSolution_1_0_0_0_managed.zip or the unmanaged solution at CustomPageSolution_1_0_0_0.zip.