Model Driven Apps: How to open a custom page when selecting a record in a sub-grid?
I came into a business requirement where I needed to override two out of the box actions to open a custom page instead of the normal out of the Box Quick create or Main form the two scenarios are as below:
Scenario 1:
Overriding the New Record button from a sub grid which usually opens a quick create but in my case I need to open a custom page.

To achieve this please follow the below steps:
- Create your custom page and Add to your Model Driven App.
- Create a new web resource to add the functions that open the custom page sample code is as below:
It depends on your scenario you can pass parameters in my scenario I want to pass the parent record Id, so I am passing the execution context and in the next step I will show how we can pass this parameter through the xrmtoolbox.
function OpenCustomPageDialog(executionContext) {
let formContext = executionContext;
//Initiating Web Resource Parameter.
let pageInput = {
pageType: "custom",// Set pageType as "custom"
name: "Prefix_CustomPageName", // Custom Page Name
entityName: "prefix_entityname", // Entity Name
recordId: formContext.data.entity.getId().replace(/[{}]/g, '')
};
//Declaring HTML Page Dimensions.
var navigationOptions = {
target: 2,
position: 1,
height: 800,
width: 1200,
title: "Transfer Case"
};
//Using navigateTo Client API.
Xrm.Navigation.navigateTo(pageInput, navigationOptions).then(
function success() {
// Run code on success
formContext.data.refresh();
},
function error() {
// Handle errors
formContext.data.refresh();
}
);
}
3. In this scenario we will need to use the XRMToolbox Ribbon workbench as currently we can’t modify the existing commands using the new command bar.
4. So to do this create a new solution and just add your table in the above example it will be the contact as this is the sub grid we need to override its behavior.
5. Load the solution using the Ribbon Work Bench
6. Then navigate to the sub grid select the Add New Button, Right click and choose customise button

7. Go to the command and then go to Actions and remove the existing Out of the box action choose your web resource and add you JS function name and pass the primary control which will be the execution context of the parent record in my case it is the account.

8. Publish your customisation and then you can open the dialog of your custom page , you can choose the position of the dialog and choose whether you need it inline – centre or on the side.
More details on using the navigate to function you can find here.
Scenario 2:
Overriding the the event when selecting a record to open a custom page instead of the normal Main form

- For this we need to follow the same steps from the previous scenario step 1 to 5
- On your sub grid you need now to add a new button and Hide it and the whole idea is to use a magic word in the command of the hidden button that does all the magic
- On the ribbon select the button from the left navigation and drag to the subgrid

4. Right click on the button and select customise command, Set the Id of the new command to: Mscrm.OpenRecordItem the magic word , choose the javascript in the below step and use the parameter: selectedcontrolallitemsid to pass the selected record Ids

5. Same way we need to reference a new JavaScript function and we pass whatever parameters accordingly in this case I am going to pass the record Id which is item is passed from the step above as selectedcontrolallitemsid
function OpenExistingCustomPageDialog(item) {
//let formContext = executionContext;
//Initiating Web Resource Parameter.
let pageInput = {
pageType: "custom",// Set pageType as "custom"
name: "prefix_custompagename", // Custom Page Name
entityName: "contact", // Entity Name
recordId: item[0]
};
//Declaring HTML Page Dimensions.
var navigationOptions = {
target: 1,
position: 1,
height: 800,
width: 1200,
title: "Update Transfer Case"
};
//Using navigateTo Client API.
Xrm.Navigation.navigateTo(pageInput, navigationOptions).then(
function success() {
// Run code on success
//formContext.data.refresh();
},
function error() {
// Handle errors
// formContext.data.refresh();
}
);
}
6. On the command we need to add an enable rule as below to make sure that the button is always hidden.

7. Now go back to the button and rename the button Id to Mscrm.OpenRecordItem and choose the command we have just created in step 5:

8. Publish customisation and watch the magic happens!
Thanks to the amazing Scott Durrow for the amazing ribbon work bench as well as the details youTube Video on achieving the above, I have just blogged it for easy reference mainly to myself.
Some useful link below:
Pass data from a page as a parameter to ribbon actions
Override the default open behavior of data rows in an entity-bound grid