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.

To validate multiple HTML input form using single jQuery file

As we all know validation is very important for any input forms, Here is a sample for jQuery validation for HTML that can be used for any number form. Only thing we need to do is calling the jQuery function in each HTML input form. 

In the below example, we can see two files Input.html and validation.js. First 3 lines of Input.html shows how to link validation.js and other related jQuery files to make the validation work.

When the submit button is clicked, it will call the validation $('#newfrm').validate and follows the rules set in  $('#txtInput').rules('add', { rule1: true, rule2: true });

Rule:1 

This is responsible for validating the text only input in the text box with id txtInput.

Rule: 2

This is responsible for validating null value in the text box with id txtInput.

File: Input.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="Validation.js"></script>

<form id="newfrm">

    <input type="text" id="txtInput" name="txt" />

    <input type="submit" value="submit" />

    

</form>

File: Validation.js

var validator = $('#newfrm').validate({

        ignoreTitle: true,

        errorPlacement: function (error, element) {

            element.attr('title', error.text());

        }

    });

    $.validator.addMethod('rule1', function (value, element) {       

        var isValid = false;

        var regex = /^[a-zA-Z ]*$/;

        isValid = regex.test($(element).val());    

        $(element).css({

                    "border": "1px solid red",

                    "background": "#FFCECE"

                });

        return isValid;        

    }, 'Rule 1, failed!');

    

    $.validator.addMethod('rule2', function (value, element) {

        var isValid = false;

        if($.trim($(element).val()) == '')

        {isValid = true;}        

        return isValid;       

    }, 'Rule 2, failed!');

    //Assign both rules to the text box.

    $('#txtInput').rules('add', { rule1: true, rule2: true });

});

Dynamic HTML Table or Grid from JSON using JQuery in SharePoint

In this blog we are going to see how the HTML table can be created dynamically and populating the values from the return JSON value by calling Web API using JQuery.

Step 1

Edit the SharePoint WebPart page as shown below.

Click the link Add WebPart

Select Insert WebPart from the top ribbon.

Select the "Media and Content" category and find "Script Editor" from the top ribbon.

Step 2

After adding the "Script Editor" WebPart.

Click on the "EDIT SNIPPET" to type in the codes and click "Insert" to see how the codes are reflected in the page.

 

 

Below sample code can be used to fetch data from any WebAPI and to get the Return JSON for the creation of dynamic table.

Note: Please take care of the yellow highlighted parts. Those are all sample variables, it has to be changed according to your JSON response object.

Code

  <!DOCTYPE html> 

       <html> 

       <head> 

       <title>News Updates</title> 

       <style> 

       .thNews { 

       background-color: #  

       color: white; 

       } 

       .thNews, .tdNews { 

       border:  x solid #444; 

       padding: 15px; 

       text-align: left; 

       } 

       </style> 

       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 

       </head> 

       <body> 

       <script type="text/javascript"> 

       $(function() { 

       var params = { 

       "Key": "<Parameter value"; 

       // Request parameters 

       }; 

       // provide the Web Api url (must) and include the Params (parameters) if it is required. 

       $.ajax({ 

       url: "<Web API URL>" + $.param(params), 

       type: "GET", 

       contentType: "application/json; charset=utf-8", 

       dataType: "json", 

       cache: false, 

       }) 

       .done(function(data) { 

       //alert("success"); 

       var trHTML = ''; 

       $.each(data.News, function (i, item) { 

       if (data.News[i].State != null){ 

       trHTML += '<tr class="trNews"><td class="tdNews">' + data.News[i].State + '</td><td class="tdNews">' + data.News[i].Header + '</td><td class="tdNews">' + data.News[i].NewsDesc + '</td></tr>'; 

       } 

       }); 

       $('#divIncidents').append(trHTML);//To add the table row to table 

       }) 

       .fail(function() { 

       $('#divErr').append("error");// To display the error in div 

       }); 

       }); 

       </script> 

       <div><strong><span>News Updates</span></strong> 

       <table id="divIncidents"> 

       <tr class="trNews"> 

       <th class="thNews">State</th> 

       <th class="thNews">Header</th> 

       <th class="thNews">News Description</th> 

       </tr> 

       </table> 

       </div> 

       <div id="divErr"></div> 

       </body> 

 </html> 

Final Output