To Replace The Labels In Entity Form Using JavaScript In Dynamics CRM

In this article, I have explained the steps to replacing the labels in an Entity Form, using JavaScript, XML and CSS files in Dynamics 365.

The total procedure contains 3 steps, which are given below.

1. XML file contains the label names to be replaced.
2. Two JavaScript files are used here, where one is to replace the label and the other one is to load CSS dynamically.
3. CSS file to change the styles of labels to wrap the text in the label.

XML filename

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>

JavaScript files given below 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);
}

The JavaScript given below will load CSS (Online or On-Premises), which contains the style to wrap the text in the label.

LoadCSS.js

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, proceed, as shown below.

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

Form Properties

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

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


Please remember that we need to call these JavaScript functions on Form load (Control = Form, Event= OnLoad). CSS should be loaded first, 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 the desired text.