USING JAVASCRIPT HIDE AND SHOW A FIELD IN MICROSOFT DYNAMICS 365 CRM

Hide and Show A field in D365

In Dynamics 365, you can hide and show fields using JavaScript. This is useful if you have business logic that determines if fields are displayed or not to the user.

One of our client’s requirements was to Hide Relationship Type field if Parent Account field contains data in Account entity

Step 1: Get the field names of Parent Account and Relationship Type. 

Step 2: Write JavaScript if Parent account filed contains data Relationship Type field should be Hide.

function hideRelationshipTypeOnChange(executionContext)
{
    formContext = executionContext.getFormContext();

    if (formContext.getAttribute("parentaccountid").getValue() == null)
    {
        formContext.getControl("customertypecode").setVisible(true);

    }
    else
    {
        formContext.getControl("customertypecode").setVisible(false);
    }
}

Step 3: Go to Form Editor —->Form Properties—-> Add new Library ——-> Click New

Step 4: Add Details —-> Select JavaScript in type — > Click Text Editor/Upload Js file > Save —> Publish —> Close

Step 5: Click Add —> Event handler —> Control “Parent Account” > Event “OnChange” > Click Add > Add details > Click Ok > Save and publish

Step 6: Refresh form page when the Parent Account is Change from populated to empty, the Relationship Type field is Visible as shown in the below image.

If Parent Account field contains data Relationship Type field will Hide.

JavaScript Function Scope (Local and Global Variable) in Microsoft Dynamics 365 CRM

In JavaScript there are two types of scope:

  • Local scope
  • Global scope

JavaScript has function scope: Each function creates a new scope.

Scope determines the accessibility (visibility) of these variables.

Variables defined inside a function are not accessible (visible) from outside the function.

Local JavaScript Variables:

Variables declared within a JavaScript function, become LOCAL to the function.

Local variables have Function scope: They can only be accessed from within the function.

Example

// code here can NOT use carName

function myFunction() {
  var carName = "Volvo";

  // code here CAN use carName

}

Since local variables are only recognized inside their functions, variables with the same name can be used in different functions.

Local variables are created when a function starts, and deleted when the function is completed.

Global JavaScript Variables:

A variable declared outside a function, becomes GLOBAL.

A global variable has global scope: All scripts and functions on a web page can access it. 

Example:

var carName = "Volvo";

// code here can use carName

function myFunction() {

  // code here can also use carName

}

JavaScript Namespace Notation Method in Microsoft Dynamics 365 CRM

JavaScript Namespace Notation method:

The code starts by defining a namespace for your custom script. As a best practice, you should always create namespaced JavaScript libraries to avoid having your functions overriden / Conflicts by functions in another library.

var Sdk = window.Sdk || {};

In this case, all the functions defined in this library can be used as Sdk.[functionName].

you can define N number of functions and you can this function on specific event handlers.

Scenario: For example, if you want to add new JavaScript function to legacy project and while testing written JavaScript has been not working and also it was not throwing any syntax, compile or runtime error but your not getting required output.

Reason: In Contact entity 2 different functions having a same name in different libraries as shown below image (SetDefaultTextOnLoad).

Source of Error
function SetDefaultTextOnLoad(context) 
{
    context.getFormContext().getAttribute("fax").setValue("Not Applicable");
}
function SetDefaultTextOnLoad(context) 
{
    context.getFormContext().getAttribute("jobtitle").setValue("Old Jscript ");
}

Output: Only Fax field updated as Not Applicable as per the requirement on other hand Job Title is not updated as shown in below image, (only one JavaScript working meanwhile same time Another is not working).

To make both the JavaScript work, we simply need to add namespacing in the code. (we don’t want to do any changes in the new_old_Legacy jscript, it is somehow restricted so we will change the code in new_New_Jscript.

var nameSpaceJscript = {};
nameSpaceJscript.SetDefaultTextOnLoad = function(context)
 
{
    context.getFormContext().getAttribute("fax").setValue("Not Applicable");
}

Conclusion: You should always create name spaced JavaScript libraries to avoid having your functions overridden / Conflicts by functions in another library.

I hope this post will help you to understood the Namespace Notation method still you have any doubts don’t hesitate to contact me.

Xrm.Page is deprecated how to use FormContext in Dynamics 365 CRM.

In Dynamics 365, the formContext provides a reference to a form or form item through JavaScript. The formContext is part of executionContext, and replaces Xrm.Page which is deprecated in version 9+ of Dynamics 365.

Using the formContext object instead of the Xrm.Page object

It’s easy to convert existing code with Xrm.Page to use the new formContext object. For example, consider the following script that uses the Xrm.Page object:

Here is the updated script that uses the passed in execution context to retrieve the formContext object instead of using the static Xrm.Page object:

Note: You must remember to select the Pass execution context as first parameter option in the Handler Properties dialog while defining your event handlers to use the formContext object.

Few benefits of using the formcontext model are:

  1. It is used to execute script on event trigger like form onLoad, onSave event
  2. It contains control form objects like data controls (text boxes, checkboxes, and so on.), tabs, sections, and so on.
  3. It can be used to discover elements to show/hide.
  4. It gives you the functionality to specify names of elements from which to retrieve/store data values.
  5. It provides namespaces to properties, so it provides access to a collection of fields and forms per entity.

The form context object model looks like:

formContext object model

Data

The formcontext container provides properties and methods to work with the data on a form.

formcontext.data is the object that contains properties and methods to help us manipulate items in the form.

Attributes:

Attributes is the collection of non-entity data at the form. Items in this collection are of the same kind as that of the attributes collection. However, they are not attributing to the form entity.

Entity:

Entities provide properties and methods to retrieve information related to the entity record on the page, the preserve method, and an amassment of all the attributes included in the form. Attribute data is constrained to attributes represented by fields on the form.

Process:

Processes offers events, methods, and objects to interact with the business process flow data on a form.

Example:

In order to open a new form after you have saved the entity, here is the syntax:

UI (User Interface)

The formcontext container provides properties and methods to work with the UI on a form.

UI provides methods to retrieve information about the user interface and accumulations for several sub components of the form. It provides each Control that is present on the form.

formcontext-container-UI

Controls:

A control represents an HTML element present on the form. Some controls are bound to an attribute, while others can also represent unbound controls inclusive of an IFRAME, Web resource, or a sub grid that has been added to the form.

formSelector:

The formcontext.ui.formSelector allows you to work with form items where a form item is accessible to a specific user only because user is associated with the particular security role. In most cases, there is usually a single form but in case of multiple forms, methods for a form item can be used to change the form the user is viewing. Use the formSelector.items collection to return information about all the forms available for the user. formSelector is not available for Microsoft Dynamics 365 for tablets.

Navigation:

Every item represents one of the to-be-had navigation options available inside the navigation bar for entities that have been up to date to the new user experience or on the left facet of the form for entities that have not been updated yet.

Process:

It presents methods to interact with the business process flow control on a form.

quickForms:

It presents methods for gaining entry to all the quick view controls and its constituent controls at the Customer Engagement forms when using the brand-new form rendering engine (also called “turbo forms”). A quick view control is a quick view form added to a main form for Customer Engagement that allows you to view information about a related entity record in the main form. Information in constituent controls in a quick view control can’t be edited.

The quickForms collection presents access to all the quick view controls on a form and has all the standard methods of the collections.

Tab:

A tab is a group of sections on a page. It carries properties and methods to manipulate tabs as well as get rights of entry to sections in the tab through the sections collection.

Example:

Tab reflows the UI of the business process control:

Client-Side Events of Microsoft Dynamics 365 CRM

Client-Side Events occur in Custom Engagement forms and grids whenever a form or grid loads, data is changed, or saved. You execute your JavaScript code by associating it an events so that it is executed when the event occurs. 

1. Form OnLoad

2. Form OnSave

3. Attribute OnChange

4. Lookup control event: i) OnLookup TagClick ii) PreSearch

5. Grid and subgrid events : i) OnRecordSelect ii) OnSave iii) OnChange iv) OnLoad

6. Tab event: TabStateChange

7 Process events : i) OnProcessStatusChange ii) OnStageChange iii) OnStageSelected

8) Knowledge base search control events: i) OnResultOpened ii) OnSelection iii) PostSearch

9) IFRAME control event : OnReadyStateComplete

Create your website at WordPress.com
Get started