D365 CRM PowerPlatform working with a modal dialog like forms using JavaScript

Recently Microsoft introduced the provision of opening records in dialog-like forms using the JavaScript function Xrm.Navigation.navigateTo (pageInput,navigationOptions).then(successCallback,errorCallback);

We will implement the same in this technical blog.

We have 2 entities College and Student. The relationship between the two is of 1:N, that is, a college may have multiple students. We need to add a custom ribbon button on the College main form – on click of which a new student modal dialog-like form would pop up, so that the user can create a new Student for the same parent college, while being on the same screen.

PRE-REQUISITES

1. A valid Dynamics-365 CRM Instance

2. XRM Toolbox - To create and edit our JavaScript Web Resource.

The latest version can be downloaded  from the official website - https://github.com/MscrmTools/XrmToolBox/releases/download/v1.2019.11.35/XrmToolbox.zip

3. Ribbon Workbench – To create and edit our custom ribbon button.

The latest version can be downloaded from the official website –

https://www.develop1.net/public/rwb/ribbonworkbench.aspx

STEPS

1. We login to our CRM instance and import the Ribbon Workbench solution.

2. We create a new solution to add College This solution can further be opened on the Ribbon Workbench to customize the ribbon.

3. Open XRM tool-box, get connected to your Microsoft Dynamics CRM Create a new JavaScript Web resource.

Here, we have created test_/Scripts/College_Main.js.

4. In this JavaScript, we will:

• make use of Navigation.navigateTo (pageInput,navigationOptions).then(successCallback,errorCallback) in our method CreateStudent() to open a new modal dialog-like form for Student.
• Pass the current (parent) College as the parameter to the new Student form.

5. Copy the following JavaScript code to your Web-Resource. Save and Publish.

// JavaScript source code
function CreateStudent(primaryControl)
{
var formContext = primaryControl;
var collegeId = formContext.data.entity.getId().slice(1, 37);
var parameters = {};
//Pass the parameter - parent College to the new Student form
parameters["test_college"] = collegeId;
parameters["test_collegename"] = formContext.getAttribute("test_name").getValue();
parameters["test_collegetype"] = "test_college";
//Open the New Student modal form on the same window
Xrm.Navigation.navigateTo ({
pageType: "entityrecord",
entityName: "test_student",
data: parameters
}, {
target: 2,
position: 1,
width: {
value: 80,
unit: "%"
}
});
}

6. Open our solution the Ribbon Workbench. Add the “New Student” Ribbon Button to the College main form.

7. Add our JavaScript as the command to this button. Set the Function Name – ‘Create Student’ and pass the CRM Parameter – PrimaryControl.

Publish these changes. Open a College and test our functionality.

UNIT-TESTING

We verify that we can create a new Student on a model dialog-like form, on click of “New Student” button ribbon button on College form.

CONCLUSION

In this blog, we learnt how a CRM Developer can make use of Xrm.Navigation.navigateTo in order to avail the usage of modal dialog-like forms in CRM.