Dynamics 365: To replace the labels in Entity Form using JavaScript

In this blog, have explained the steps for replacing the labels in Entity Form using JavaScript, XML and CSS files in Dynamics 365.

The total procedure contains 3 steps they are:

1.     XML file containing the label names to be replaced.

2.     Two JavaScript files are used here, one is for replacing the label and the other one to load the CSS dynamically.

3.     CSS file to change the styles of labels to wrap the text in the label.

XML Filename:

The most important things to be done in XML are naming root and nodes, id is the key to replace the label name. Field display name should be mentioned in id.

Tasks.XML

<?xml version="1.0" ?>

<Tasks>  

    <TaskName id="PnP">Promoted best practices, such as design, error handling and documentation. </TaskName>

    <TaskName id="Architecture">To build the process flow and infrastructure required for system. </TaskName>

    <TaskName id="SustainPlan">Worked on a sustainability plan</TaskName> 

</Tasks>

 Below JavaScript files will take care of the label text change.

JavaScript:

ReplaceLabels.js

function ChangeLabelTaskNameFrmXML() {  

   var xmlPath="../WebResources/new_Tasks.xml";

   //Put the <TaskName> element into an object. 

   var xmlnodePath = "//Tasks/TaskName";

   var xmldoc = new ActiveXObject("Microsoft.XMLDOM");

   xmldoc.preserveWhiteSpace = true;

   xmldoc.async = false;

   xmldoc.load(xmlPath);

   //Extract the different values using a loop.  

   var xmlnodelist;

   xmlnodelist= xmldoc.selectNodes(xmlnodePath);  

   for (var i = 0; i < xmlnodelist.length; i++) {

      var lbltaskname = xmlnodelist(i).getAttribute('id');

         var newlbltaskname =  xmlnodelist(i).text;

      ChangeLabelTaskName(lbltaskname, newlbltaskname);

   }

}

function ChangeLabelTaskName(lblTaskName, newlblTaskName)

{

  var lbl = "new_" + lblTaskName.toLowerCase();

  Xrm.Page.ui.controls.get(lbl).setLabel(newlblTaskName);  

}

Below JavaScript will load the CSS that contains the style for wrapping the text in label.

LoadCSS.js (for On-Premises and Online)

function LoadCSS(path) {

    var head = window.parent.document.getElementsByTagName('head')[0];

    var link = window.parent.document.createElement('link');

    link.rel = 'stylesheet';

    link.type = 'text/css';

    link.href = path;

    link.media = 'all';

    window.parent.document.head.appendChild(link);

}

 

Web Resources:

To Upload files (JavaScript, XML and CSS) to Web Resource.

While uploading files to Web Resource, you should provide few values like name, display name, file type and then upload file using browse button.

Form Properties:

After uploading files to Web Resources, you must select the Entity Form where the labels have to be replaced.

Now, go to Form Properties as shown above and add required JavaScript files as shown below. Once you have included the JavaScript files, you must map the functions from JavaScript and provide parameter values in Event Handlers section as shown in the below screenshots.

Please remember, we need to call these JavaScript functions on Form load (Control = Form, Event= OnLoad). That too CSS should be loaded first and then followed by replacing label text.

Here the function name is ChangeLabelTaskNameFrmXML and the parameters are provided as comma separated values.

Hope this article will help you to solve the issue in replacing form control labels with desired text.