Custom Page - Why not?

#MDA, #ModelDriven, #CustomPage, #PowerFx,#ModernCommandBar

Today, I want to share something about using the Custom Page in the Model Driven app.

Custom Page vs Embedded Canvas App

Firstly, I would like to share my thoughts outlining the differences between Custom Pages and Embedded Canvas Apps in terms as shown in the table below:

Aspect	Custom Page	Embedded Canvas App
Standalone Usage	Yes, as a navigation item in the Model-App menu.	Yes, as a standalone app on various platforms.
Embedding Capabilities	Popup, flyout, and side pane integration.	Integration in Model-driven forms, Teams, SharePoint, and Power BI Reports.
Record Context	Yes, can access Model App context.	Yes, operates within the record context in Model App.
Standalone App Execution	No, cannot run independently.	Yes, can run as a standalone app.
Licensing Considerations	No additional licensing required.	Potentially requires additional licensing for paid/custom connectors.
Sharing Requirement	No need to be explicitly shared; inherited from Model-Driven App.	Requires sharing with users for app execution.
Ideal for Use Cases	Extending functionality within existing processes.	Involving connectors beyond Model Apps/Dataverse functionalities.

Hopefully, it can help ☺️

Okay... now I will create a custom page and seamlessly integrate it into the Model-Driven App.

This is a practical example, showcasing the steps involved in developing and incorporating a custom page within the Model-Driven App environment.

Create Custom Page

Go back to the Solution and click New > App > Page. Following that, I crafted a Custom Page titled "Deal Page" This particular page is designed to display the associated Deals of the current Account on which you are currently positioned.

New Custom page - named: "Deal Page"

Add Custom Page in MDA

After finishing my custom page, I will add this page to my Model Driven-App.

Edit App with New Designer > click Add Page > choose Custom page and click Next

Add Page into MDA

Next, select "Using existing custom page" and select my page - "Deal Page" >> Click Add

Select "Deal Page" and Add to MDA

Finally, click Save and Publish App

"Show in navigation" - choose this option If you want to show your page on the app navigation.

Now, check my custom page in MDA

Check my custom page on Navigation

Tip: Run CustomPage by PowerFx

I plan to create a new button on the subgrid "Deal" on the main form of Account. This button will open the "Deal Page". This page will only display the deals that are associated with the current Account.

Reference: New Modern Command Bar to show some steps to create a custom button.

I choose to create the Command by Power Fx.

Create command by Power Fx

My button is called "Edit in Deal Page".

"Edit in Deal Page" command

My command will run the action Java Script as an image. The button will call the js and open my page as Centered Dialog.

Configure command to open the custom page "Deal Page"

Note: Your custom page should add the filter() for items that you want to show records associated with the current parent item.

Note: Your custom page should add the filter() for items that you want to show records associated with the current parent item.

In my scenario is Account Id (primaryItemId) - input for my custom page.

Below is my sample. In my sample, I used 3 parameters:

• PrimaryControl: so we can refresh the page after the Dialog closes.

• PrimaryItemId: used in the Custom Page Dialog to relate the Deal record to the Account.

• PrimaryEntityTypeName: used to check if the Dialog is bound to the Account.

// my js sample
function OpenInDealPage(primaryControl,primaryEntityTypeName,primaryItemId)
{// Centered Dialog
var pageInput = {
    pageType: "custom",
    name: "ntd_dealpage_4a9fd",
    primaryEntityName: primaryEntityTypeName,
    primaryItemId: primaryItemId,
};
var navigationOptions = {
    target: 2, 
    position: 1,
    width: {value: 800, unit:"%"},
    title: "Associated Deals"
};  
Xrm.Navigation.navigateTo(pageInput, navigationOptions)
    .then(
        function () {
            primaryControl.data.refresh()
        }
    ).catch(
        function (error) {
            // Handle error
        }
    );
}

Checking my result

Open the Account main form:

Test the custom command - open Custom Page

Testing...

Custom command and Custom Page

For the details of navigating of custom page, you can check from the Microsoft Link.

Hopping well. Thank you... 🎉 [NTD]yns.asia ...invite me a cup. ☕ Thank you. ❤️