Home > Model Driven Apps, PowerApps > [Step by Step] Model Driven App | Grids | Navigate to custom page on row click

[Step by Step] Model Driven App | Grids | Navigate to custom page on row click

By default, performing any of the following grid actions opens the table record:

  • Double-clicking the data row, or selecting the primary column link in the row.
  • Selecting a data row, and then pressing the Enter key.
  • On a touch-enabled device, selecting a data row.

In this article, lets see how to override the default grid click behavior and navigate to a Custom Page. Same approach can be used to navigate to custom URL, show alert etc…

Before jump on to implementing override default behavior, lets understand how the same requirement can be achieved using ribbon button.

Conventional way of achieving this requirement:

Assume that you would want to redirect to custom url (i.e., Google, Bing, etc…) from the Main Grid. One common approach would be:

  • Add a custom jScript function with a desired navigation logic upload as a webresource.
  • Add a ribbon button on grid and map the jScript function.
  • Select the grid record(s) and click the button which will redirect you to the custom url.

In the above approach, the overhead is every time you have to select record in grid and click the ribbon button.

With the ‘override default behavior’ approach would be pretty much same except you don’t need to click the ribbon button everytime.

Using override default behavior:

Let me explain the override default behavior of main grid, by redirecting to a custom page on click of grid row by following these steps.

Create a custom page:
  • As we will be redirecting to a custom page on grid click, first lets create a custom page.
  • I’ve created a simple custom page with ‘Account Name’, ‘Account Number’ fields and a ‘Back’ button.
  • Copy the ‘Name‘ of the Custom Page, which we would using in the next steps.
  • Next, you must add your ‘Custom Page’ to the Model Driven App using editor.

Create a webresource:

We will be adding the navigation to ‘Custom Page’ logic in jScript function. If you want to navigate to custom url or display alert just put the appropriate logic in this jscript function.

  • Create a jScript file and copy following ‘openCustomPage‘ function.
    • Set ‘name’ as the ‘Name‘ of the Custom Page copied in previous step.
  • Save this jScript file as a webresource.

Create a new ribbon button

We need to add a button in this ‘override default behavior’ approach as well but with slight changes.

The placement of the button is important. As we want to override the ‘Main Grid’ behavior, we need to add a new button on the ‘Main Grid’.

If you want to override the Contacts subgrid behavior on the Accounts form, you need to add the new button on to the contact form.

Lets use Ribbon Workbench to add a new button on ‘Account’ Main Grid.

  • Once you add a button, create a command definition with Mscrm.OpenRecordItem as the ID.
    • This is the key. The application looks for the Mscrm.OpenRecordItem command ID, when you try to open a record from the grid and if one is present, will execute the custom action instead of performing the default behavior of opening the table record.
  • Add a ‘Custom Javascript Action’ to the command and and include the CrmParameter with the value SelectedControlSelectedItemReferences.
  • Following is the ‘RibbonDiffXml’ for your reference.
<?xml version="1.0" encoding="utf-16"?>
<RibbonDiffXml xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <CustomActions>
    <CustomAction Id="raj.Mscrm.OpenRecordItem.CustomAction" Location="Mscrm.HomepageGrid.account.MainTab.Management.Controls._children" Sequence="65">
      <CommandUIDefinition>
        <Button Alt="$LocLabels:Mscrm.OpenRecordItem.Alt" Command="Mscrm.OpenRecordItem" Id="Mscrm.OpenRecordItem" LabelText="$LocLabels:Mscrm.OpenRecordItem.LabelText" Sequence="65" TemplateAlias="o3" ToolTipTitle="$LocLabels:Mscrm.OpenRecordItem.ToolTipTitle" ToolTipDescription="$LocLabels:Mscrm.OpenRecordItem.ToolTipDescription" />
      </CommandUIDefinition>
    </CustomAction>
  </CustomActions>
  <Templates>
    <RibbonTemplates Id="Mscrm.Templates" />
  </Templates>
  <CommandDefinitions>
    <CommandDefinition Id="Mscrm.OpenRecordItem">
      <EnableRules />
      <DisplayRules />
      <Actions>
        <JavaScriptFunction FunctionName="openCustomPage" Library="$webresource:raj_account_js">
          <CrmParameter Value="SelectedControlSelectedItemReferences" />
        </JavaScriptFunction>
      </Actions>
    </CommandDefinition>
  </CommandDefinitions>
  <RuleDefinitions>
    <TabDisplayRules />
    <DisplayRules />
    <EnableRules />
  </RuleDefinitions>
  <LocLabels>
    <LocLabel Id="Mscrm.OpenRecordItem.LabelText">
      <Titles>
        <Title description="Open Record Item" languagecode="1033" />
      </Titles>
    </LocLabel>
  </LocLabels>
</RibbonDiffXml>

Note: You can enable or disable the newly created button; doing either will still override the open default behavior.

  • Publish the Ribbon changes.
  • That’s all needed. If you notice in both ‘conventional’ and ‘override default behavior’ approaches, the ribbon button is common but the ‘override default behavior’ does not require you to explicitly click the button.

  • Refer this Microsoft Docs article for more details.

🙂

  1. December 12, 2022 at 11:15 AM

    Thanks Rajeev very helpful

  1. December 12, 2022 at 2:05 PM

Leave a comment