The custom page is a new page type within a model-driven app, which brings the power of canvas apps into model-driven apps. This new page can be more flexible than a model-driven app form, view, or dashboard page. It lets you include one or more tables. Then, the developer can define the data and component interactions. We can show custom page as a main page, as a center dialog or as a side panel.

Custom pages must be created from a solution either from the modern app designer or the Solution area in Power Apps using New > Page. For more information, please refer to the following link:
https://docs.microsoft.com/en-us/powerapps/maker/model-driven-apps/add-page-to-model-app

In this blog, we will call this custom page using a form button created using a PCF control. The custom page will appear as a side panel on the record.

How to configure a PCF Control
PCF Gallery is a collection of controls created with the Power Apps Component Framework. Action button PCF control from this Gallery helps to configure the field as an action button.

We can use this control (by modifying an existing logic) to call the javascript to open the custom page.
The javascript for navigating from model driven app to the custom page as a side panel is as follows:

// Side Dialog
var pageInput = {
    pageType: "custom",
    name: "",
recorded: “”
};
var navigationOptions = {
    target: 2, 
    position: 2,
    width: {value: 500, unit: "px"},
    title: "
"
};
Xrm.Navigation.navigateTo(pageInput, navigationOptions)
    .then(
        function () {
            // Called when the dialog closes
        }
    ).catch(
        function (error) {
            // Handle error
        }
    );

Please refer to the following URL for navigating to the custom page:
https://docs.microsoft.com/en-us/powerapps/developer/model-driven-apps/clientapi/navigate-to-custom-page-examples

To modify and configure PCF control, please follow the below link:
https://rajeevpentyala.com/2020/03/21/power-apps-component-framework-pcf-demystify/

Configure PCF control
Create a field called Publish Control on the form of an entity and change the field properties as shown in the following screenshot. Pass the record guid as a custom parameter.

The form will look like as follows:

The custom page will appear as a side panel as shown in the below image.

The page can be made responsive to store the information of custom page input controls back in a record like canvas app.

Summary
A custom page enables the developers to create a new page experience using the canvas app capabilities. This provides a low-code authoring experience with more flexible layouts, more control with styling options, the ability to add connector data, use expressions, and so on. Custom page authoring happens in the canvas app designer with increasing context of the model-driven app that the page runs in.

In short, a Custom page will help you:
• To connect to Microsoft Dataverse and all the connectors of Power Apps to have responsive layouts.
• To directly navigate from Sitemap or ribbon buttons.
• To define the interface with a rich properties like containers and gallery controls.
• Using a combination of PCF control and custom page, we can enhance the capabilities of Power app and can build user friendly interfaces.
• Custom pages don’t count toward the app limits because they’re treated as a page instead of an app.

More information:
https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/build-responsive-apps
https://docs.microsoft.com/en-us/powerapps/maker/model-driven-apps/design-page-for-model-app

Please refer to the following link for known issues of Custom page:
https://docs.microsoft.com/en-us/powerapps/maker/model-driven-apps/model-app-page-issues