RSS

Convert a Multiple Line of Text field to a Button using JavaScript

25 Apr
First of all create a new field of type “Multiple Lines of Text” and name it as “new_button“.
And also create a “JavaScript Webresource” and add the following method in onload event.
ButtonImage
function OnFormLoad() {
    ConvertTextFieldToButton('new_button', 'ButtonText', '100px', ButtonClickFunction, 'Button Label');
}
 
function ConvertTextFieldToButton(fieldname, buttontext, buttonwidth, clickevent, title) {
    if (document.getElementById(fieldname) == null) {
        return;
    }
 
    var functiontocall = clickevent;
    document.getElementById(fieldname).value= buttontext;
    document.getElementById(fieldname).readOnly = true;
    document.getElementById(fieldname).style.borderRight = "#3366cc 1px solid";
    document.getElementById(fieldname).style.paddingRight = "5px";
    document.getElementById(fieldname).style.borderTop = "#3366cc 1px solid";
    document.getElementById(fieldname).style.paddingLeft = "5px";
    document.getElementById(fieldname).style.fontSize = "11px";
    document.getElementById(fieldname).style.backgroundImage = "url(/_imgs/btn_rest.gif)";
    document.getElementById(fieldname).style.borderLeft = "#3366cc 1px solid";
    document.getElementById(fieldname).style.width = buttonwidth;
    document.getElementById(fieldname).style.cursor = "hand";
    document.getElementById(fieldname).style.lineHeight = "18px";
    document.getElementById(fieldname).style.borderBottom = "#3366cc 1px solid";
    document.getElementById(fieldname).style.backgroundRepeat = "repeat-x";
    document.getElementById(fieldname).style.fontFamily = "Tahoma";
    document.getElementById(fieldname).style.height = "20px";
    document.getElementById(fieldname).style.backgroundColor = "#cee7ff";
    document.getElementById(fieldname).style.textAlign = "center";
    document.getElementById(fieldname).style.overflow = "hidden";

    if(window.attachEvent)
    {
        document.getElementById(fieldname).attachEvent("onmousedown", MouseDown_button);
        document.getElementById(fieldname).attachEvent("onmouseup", MouseUp_button);        
        document.getElementById(fieldname).attachEvent("onclick", functiontocall);
    }
    else
    {
        document.getElementById(fieldname).addEventListener("mousedown", MouseDown_button, false);
        document.getElementById(fieldname).addEventListener("mouseup", MouseUp_button, false);        
        document.getElementById(fieldname).addEventListener("click", functiontocall, false);
    }

    document.getElementById(fieldname).style.lineHeight = "14px";
    document.getElementById(fieldname + '_c').style.visibility = 'hidden';
    document.getElementById(fieldname + '_d').style.width=buttonwidth;
    document.getElementById(fieldname +'_container').style.width="112px";
    document.getElementById(fieldname).title = title;
    window.focus();
 
    //Method Call on Mouse down
    function MouseDown_button(evt) {
       var eventer;   
  
       if(evt.srcElement)
       {
           eventer = evt.srcElement;
       }
       else
       {
           eventer = evt.target;
       }

       eventer.style.borderWidth = "2px";
       eventer.style.borderStyle = "groove ridge ridge groove";
       eventer.style.borderColor = "#3366cc #4080f0 #4080f0 #3366cc";
    }
 
    //Method Call on Mouse up
    function MouseUp_button(evt) {
       var eventer;   
  
       if(evt.srcElement)
       {
           eventer = evt.srcElement;
       }
       else
       {
           eventer = evt.target;
       }
        
       eventer.style.border = "1px solid #3366cc";
    }
}
 
function ButtonClickFunction() {
    //Method call on button click
}

Notes:
It also supports single line of text.

By Puja Jain
Senior Software Engineer @Team DynamicsCRM.
Mindfire Solutions

Advertisements
 
5 Comments

Posted by on April 25, 2013 in WebResources

 

Tags: , , , , , , , , , , , , , , , ,

5 responses to “Convert a Multiple Line of Text field to a Button using JavaScript

  1. mak

    January 7, 2014 at 4:32 pm

    not working in FF, Chrome

     
    • DynamicsCRM@MindfireSolutions

      January 13, 2014 at 8:03 am

      Hello Mak,

      Thanks for reporting the issue. We have updated the code. Please use that.

      The problem was with the attachEvent, which only works on IE. So, we have used addEventListener for others.
      We have also made changes to MouseDown_button and MouseUp_button in order to get the Element from which event is fired.

      This code also works on Chrome and Mozilla Firefox, we have tested.
      Please update your code and let us know, if you need any further assistance, in case you face problems.

      Regards,
      DynamicsCRM@MindfireSolutions

       
  2. Harj

    January 23, 2014 at 5:10 pm

    I’m using CRM 2013 – this sort of works.

    I get an error on form load = ‘Unable to get property ‘style’ of undefined or null reference’

    The button is created and I can click it but the edit control is there also?

     
    • DynamicsCRM@MindfireSolutions

      January 27, 2014 at 11:29 am

      Hi Harj,

      After mak’s reply, we have already updated the code, which works on all browsers for CRM 2011.
      We have not tested this code in CRM 2013.

      We would suggest you to debug the code line by line and see on which line exactly it is throwing the Exception. Make sure you are passing the correct arguments to ConvertTextFieldToButton function, otherwise the element would be null or undefined.

      Regards,
      DynamicsCRM@MindfireSolutions

       
  3. Harj

    January 29, 2014 at 4:45 pm

    It errors on line 47:
    document.getElementById(fieldname +’_container’).style.width=”112px”;

    If I comment out the line it runs without error. It looks a bit strange though, the edit box is surrounded by the button but the edit box can still take focus also. The button can be pressed if clicked just outside the edit box.

     

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: