Microsoft

In-Depth understanding of client side script on Model Driven App and Dynamics 365

Episerver forms resources javascript

In this Power Platform article, we’ll look at how to add client-side scripting to a Model Driven App. Read on to learn how to use a client-side script in Model-driven or Dynamics 365 Forms, as well as what methods and collections are available. I’ll attempt to answer as many questions as possible in order to gain a thorough understanding of the implementation of client-side script on model-driven apps and Dynamics 365.

What is Client-side scripting on Model Driven App?

Client-side script allow us to use JavaScript on model driven app to implement custom business logic. This should be used as an alternative if standard model driven app business rules do not meet the requirements. Client-side scripting will help to implement custom business logic.

Client-Side scripts runs on model driven apps with response to form level events, such as:

  • Form Load event
  • Data change event
  • Form Save event
  • Command bar, invoke client-side script on button click event

Now, we will be look at what are the common task that can be done using client-side scripting on Form.

  • Get or Set values of a Form attributes
  • Show and Hide user Interface such as Tabs, sections, and attributes
  • Model driven form switching, if have multiple forms
  • Open dialog box, forms, reports, and custom web resource (HTML pages)
  • Interact with Business process flow

High level structure of Client-side scripting API object model and namespaces

Xrm Object

App: Provides App-related methods such as event handlers for any app level notifications.

Device: Provides methods to use native device capabilities such as image, video, audio, location and more.

Encoding:  Provides methods to encode and decode scripts (useful for HTML and XML).

Navigation: Provides navigation related methods, such as opening Alert or Confirm dialog box, open File, URL and more.

Panel: Provides method to open web page on side panel of model driven form.

Utility:  Provides information about entity/table metadata, table status transition, current origination setting and many more.

Web API: Provides properties and method to use Web API.

What are Event Handlers?

Client Script logic runs as event handler for the form events. Here we must register event on form to have your logic to executed and some events can be executed from code.

How to register Client script on Model driven form with help of Event Handlers

In the Form designer you can register event handlers for the following events:

Form: It allow you to register event on Form “OnLoad” and “OnSave” Event handlers

2022 07 19 18 02 35 Document1 Word

Tabs: Allows you to register event on “On Tab State Change” event

2022 07 19 18 03 12 Settings

 

Columns: Allows you to register event on “On Change”

2022 07 19 18 03 43 Settings

 

How to register client script on Event Handler

Go to Form, then Events, and then chose Event Type as “On Load” and then selects the JavaScript library from the dropdown option where the code was written, followed by the function name, with both “Enable” and “Pass Execution context as first parameter” marked as checked.

 

2022 07 19 18 28 32 Document1 Word

 

What is Execution context ?

When you register the event handler, you can pass execution context as first parameter, on the above pic you can see checkbox is checked here, The importance of execution context is it will retrieve the model driven Form and Grid context. Now lets see the declaration in JavaScript code:

function GetValues(executionContext)
{
   //Get column values of form
}

 

What exactly is Form context?

It is a Client API form context (formContext), and by creating an object, it will provide a reference to the form, such as getting the values of the columns on the form or hiding or showing a tab, section, or any columns of a form or retrieving a row from a grid.

 

function GetValues(executionContext) 
{
  //Create object 
  var formContext = executionContext.getFormContext(); 

  //Retrieve's the value of Column FirstName
  var firstName = formContext.getAttribute('firstname').getValue();

}

High-level overview of formContext Diagram 

Form Context Diagram

Hear will see both Data object & UI object in detail along with code snippet examples:

Data Object (formContext.data)

It very useful to retrieve or perform any action on Table/entity level such as retrieve column values, it has categorized in three sections, for more information go to link

  • Attributes – It helps to retrieve the column value containing data in the model driven app form or grid

          Ex:  formContext.data.entity.attributes

  • Entity – It helps to retrieve the information that are specific to row that is displayed on Form, here you can perform Save operation

          Ex: formContext.data.entity.addOnSave(myFunction)

  • Process- It provides the method, events, and object to interact with Business process flow on a form. In given example below will helps          to add a JavaScript function as an event handler for stage change, so that custom JavaScript event is called when business process                  stage change event is called

          Ex: formContext.data.process.addOnStageSelected(myFunction)

UI object (formContext.ui)

The UI Object is providing the methods to retrieve information of user interface such as Tabs, sections, business process flow and collection of several other components of form and grid, for more information go to link

  • Controls – It represents an HTML element that is present on a Model driven form, Control object will provide the method to change the presentation and behavior of controls

            Ex: formContext.ui.controls

formContext.ui Section.controls

  • FormSelector – It provides method to retrieve information about the form that is currently in use. Use the formSelector.items collection to return information about all the forms that are available for the user, below example will use to retrieve the form name.

             Ex: formItem = formContext.ui.formSelector.getCurrentItem();

                   formItem.getLabel();

  • Navigation- It provides the collection of all the navigation items on the page.

        (Note: This method would not work on Dynamics 365 Tablet mode)

  • Process – Provides objects and methods to interact with the business process flow control on a form, such as hide or show.
  • QuickForms- It provides the collection of all quick view controls of model driven app from .

            Ex- quickViewControl = formContext.ui.quickForms.get(arg)

  • Tabs – It provides the collection of all tabs on form, more information about Tabs go to link 

            Ex- var tabObj = formContext.ui.tabs.get(arg);

Conclusion

Client-side scripting is very important when you have complex validation rules to implement on a form, grid, or even a business process flow. We can also enhance the UI elements to meet the needs of the business.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Chetan Khanapure

Chetan Khanapure works as a Solution Architect at Perficient in the Nagpur GDC, India. I have 11+ years of technical experience on Microsoft Practices Power Platform, Dynamics 365, and .NET Technologies.

More from this Author

Follow Us
TwitterLinkedinFacebookYoutubeInstagram