Enhancing Model-Driven Power Apps with Custom Pages

Custom pages in Power Apps blend the flexibility of canvas apps with the structured approach of model-driven development, elevating the app creation process. These pages enable the integration of multiple tables, facilitate defining interactions, and empower users with low-code tools to craft versatile pages, dialogs, or panes. Each custom page represents a distinct element within a solution, ensuring focused development by allowing only one person to edit it at a time.

To gain a deeper understanding of custom pages, refer to our previous blog post “Goodbye to Custom HTML Pages!” Now, as we delve into incorporating custom pages into your model-driven app, the question arises: How can we pass contextual information to these pages to make them situation-aware?

The JavaScript function Xrm.Navigation.navigateTo provides pageInput as a parameter, which accepts recordId as a single context-related parameter. Unfortunately, there are no built-in options to pass additional parameters to the custom page. However, a workaround involves appending additional parameters, separated by a pipe symbol (|), to the recordId parameter. Upon loading the custom page, PowerFx queries can be utilized to extract and process these additional parameters. While there is no official limit on the length of these parameters, they are subject to the same constraints as query string parameters.

Here’s an example code snippet demonstrating how to handle these additional parameters:

Javascipt code

let pageInput = {
            pageType: "custom",
            name: "new_custompage_a24dh",
            entityName: selectedItem.TypeName,
            recordId: selectedItem.Id + "|" + addparam,
        };

PowerFx code

Set(varParamArray, Split(Param("recordId"),"|"));
Set(varRecordId, First(varParamArray));
Set(varAddParam, Last(varParamArray));

By employing this approach, we can extend the capabilities of custom pages and enhance their functionality within model-driven Power Apps.