How to Add a custom Button to a CRM 2013 Web Form

In this article we see Step by step How to Add a custom Button to a CRM 2013 Web Form .
We'll review here in only 5 minutes how to create an HTML5 Button at the client side Front End , using only javascript, HTML and CSS3:




The steps are as following:
1) create a CRM field to be the container of the button(set its text as ".")
2) create a web resource containing the following javascript
3) call the web resource from your CRM form, sending as argument the name of your container field.

1) Step #1: create a CRM field to be the container of the button:

The button will be located at the CRM field (called "sFieldName" in the following code).
Try to create a new CRM field to parent the button, and set "." as its text. This way the button will fill the field, and you can locate it wherever you want inside the CRM form.

2) Step #2: create a web resource containing the following javascript:

This is the code that creates the Button:
It just retrieves the HTML5 element wrapping the CRM field where you want the button appended to, and creates an element with a custom button:

Create a Web Resource with the following javascript code (note: this code does not depend on jQuery or any other framework: you can copy-paste it as it is):

function fnXRMClientButton(sFieldName)
{   // sFieldName : "new_somefield"
    
    if (document.getElementById(sFieldName) != null) {
         sFieldName = "field" + sFieldName;
         if (document.getElementById(sFieldName) == null)
         {
            var oParentElement = document.getElementById(sFieldName + "_d");
            oContainerElement = document.createElement("oContainerElement");
            oParentElement.appendChild(oContainerElement, oParentElement);
            
            var btn = document.createElement("button");
            var txt = document.createElement("span");
            txt.innerText = "BUTTON TEXT";            
            btn.id = "btnCallAction";
            btn.appendChild(txt);
            btn.style.margin = "10px";
            btn.style.padding = "5px";
            btn.style.width = "300px";
            btn.style.height = "50px";
            btn.style.textAlign = "center";
            btn.style.borderRadius = "5px";
            btn.style.textShadow = "1px 1px 2px #FFF";
            btn.style.color = "#000";
            btn.style.boxShadow = "#a8a3a3 5px 5px 1px";           
            btn.style.border = "1px double #dcdcdc";           
            btn.style.background = "#f5f5f5";
            btn.style.font = "600 14px Tahoma";
            oContainerElement.appendChild(btn);


            document.getElementById(sFieldName).style.width = "0%";
            btn.onclick = function () {
                OnClickActionFunction(oContainerElement);

            };

        }
    }
}

3) Step #3: call the web resource from your CRM form, sending as argument the name of your container field:

fnXRMClientButton("new_somefield")

That's all.  

Happy programming.....

      by Carmel Schvartzman

כתב: כרמל שוורצמן