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.
- XML file contains the label names to be replaced.
- Two JavaScript files are used here, where one is to replace the label and the other one is to load CSS dynamically.
- 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";
-
- var xmlnodePath = "//Tasks/TaskName";
- var xmldoc = new ActiveXObject("Microsoft.XMLDOM");
- xmldoc.preserveWhiteSpace = true;
- xmldoc.async = false;
- xmldoc.load(xmlPath);
-
- 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.