CUSTOM PAGE

The custom page is a new page type within a model-driven app, which brings the power of canvas apps into model-driven apps.

Custom pages can be used to create custom forms, show dashboards, dynamic content that interacts with data and enhances the user experience with the flexibility of the canvas designer.

It also includes a low-code page authoring experience with expressions and custom Power Apps component framework controls.

Here we can learn how to navigate to a custom page from a record page by passing GUID as parameter.

Step

Step

  1. Create a custom page using Power Apps.
  2. Create a button in the record page and add an action to navigate to the custom page with parameter (GUID).

Create Custom page

Create Custom page

  1. Login into Dynamics 365.
  2. In the address bar, type https://make.powerapps.com/

3. Create a New App by clicking Apps -> New app

4. Click Start with a page design and select Blank Canvas.

5. Various controls like Text label, Text input, Date picker, Button will be available in the page. You can design your page with drag and drop the controls,

6. You can add data sources to get information from Dynamics 365 tables.
For ex, To get the records in the table Account, Click Add data and select a data source i.e Accounts.

Create a button in record page

Create a button in record page

  • Create a button in the record page using XrmToolbox.
  • Write a java script that will navigate to the custom page with parameter.
  • Attach that to the on click action.

The command used for Navigation is

Here,

PageInput defines the target page to navigate. The page can be a record page, custom page or any valid URL.

To Navigate to the custom page,

navigationOptions defines whether to open the custom page inline/ in a dialog. This is optional. If not specified, the page is opened inline by default. The Syntax of the navigationOptions:

target tells how to open a page,

  • 1 means open the page inline
  • 2 means open the page in a dialog with the specified height, width & position.

height specifies the height of the dialog. We can specify the width as pixel (px) / percentage (%) . Default is px.

width specifies the height of the dialog. We can specify the width as pixel (px) / percentage (%) . Default is px.

position defines the position of the dialog box.

  • 1, open the dialog in the center.
  • 2, open the dialog on the far away.
  • Default is 1.

title defines the title of the dialog.

The sample javascript code for opening a custom page as a popup is below

Xrm.Page.data.entity.getId() will get the GUID of the record.

Access the parameter in the custom page (PowerApps)

recordId is the parameter passed from the record page. You can retrieve the value of the parameter, use the function

Param(“parameter name”)

To assign a the parameter value to a variable use,

Set(accId,Param(“recordId”);

When the page is loaded we need to get the recordId and filter the account based on the recordId passed. For that we need to write code on PowerApps.

Select the page. Go to the App and select OnStart

Since the recordId is in Upper case and it contains {}, we need to convert that to lower case and remove { and }.
recordId is {0000-AAA-00000-000-ABC}

Use the power fx function,

Lower(Param(“recordId”))  {0000-aaa-00000-000-abc}

Substitute(Substitute(Lower(accId),”}”,””),”{“,””))  0000-aaa-00000-000-abc

Filter the Account records with the recordId, use

Once we design the custom page and write the code, we need to publish the page by clicking the publish button.

Once published, this page can be accessed from the record page.

Here created a button in the account record page Go To Account Detail using the XrmToolbox and add action to open the custom page as popup.

On clicking the button, the custom page will be opened as dialog.

This way we can pass more than one value from record page to custom page.

Are you planning to extend your team with CRM Experts?