Thursday, January 10, 2013

Add custom text to a CRM2011 form

CRM2011 does not provide out-of-the-box functionality to add custom text, or labels, to forms. The way that this is suggested is to use a web resource for this. However this would mean that if you have a solution with 50 forms on it and each form has 5 labels, you are looking at a messed up hodgepodge of 250 web pages in addition to the other web resources being used. This is a perfect candidate for re-use. This article describes how to get this done.

The end result


The concept

CRM 2011 allows you to pass a parameter to a web resource. This provides a gateway to reusability. The only parameter passed to the web resource is the data parameter. In otherwords, request.querystring for data is the value passed in to the web page. The web page then must read the querystring, decode it if necessary then display its value. That web resource would be embedded as an Iframe in the page. Sounds complicated, but it not.

Step 1: Create the web resource

  • Create a new web resource. Call it PageText
  • Give it a description like"A generic web resource that can be used to display labels on a page"
  • Specify the type as Web Page (HTML)
  • Instead of providing an Upload File, click the Text Editor button. This will open a simple HTML editor.
  • Paste the following text, then save and publish the web resource:
    <HTML><HEAD>
    <META charset=utf-8></HEAD>
    <BODY onload=load() contentEditable=true><LABEL id=lblMainText>label</LABEL>
    <SCRIPT>
        function load() {
            var dataValue = fcbCustomJs.getUrlVars()["data"];
            dataValue = fcbCustomJs.replaceData(dataValue);
            document.getElementById('lblMainText').innerHTML = dataValue;
        }
        fcbCustomJs =
    {
        getUrlVars: function () {
            var vars = [], hash;
            var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
            for (var i = 0; i < hashes.length; i++) {
                hash = hashes[i].split('=');
                vars.push(hash[0]);
                vars[hash[0]] = hash[1];
            }
            return vars;
        },

         isEmpty: function (val) {
            if (val) {
                return ((val === null) || val.length == 0 || /^\s+$/.test(val));
            } else {
                return true;
            }
        },

         replaceData: function (s) {
            var arr1 = new Array('%20', '%21', '%40', '%23', '%24', '%25', '%5e', '%26', '%2a', '%28', '%29', '%2b', '%3d', '%2c', '%3c', '%3e', '%2f', '%3f', '%5b', '%5d', '%7b', '%7d', '%3a');
            var arr2 = new Array(' ', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '+', '=', ',', '<', '>', '/', '?', '[', ']', '{', '}', ':');
            if (this.isEmpty(s)) return "";
            var re;
            for (var x = 0, i = arr1.length; x < i; x++) {
                re = new RegExp(arr1[x], 'g');
                s = s.replace(re, arr2[x]);
            }
            return s;
        }
    }
    </SCRIPT>
    </BODY></HTML>

    This page basically reads the request.querystring parameter of "data"; htmldecodes it with a simple search and replace function, then takes the resultant content and writes it to the web page.

Step 2: Customize the form

  • Open the form for the entity you want to customize
  • Highlight the seciona that you want the label to go then click the Insert tab on the ribbon
  • Click the Web Resource icon on the ribbon to open the Add Web Resource dialog.
  • click the Lookup button to select the dialog
  • The web resource you created and published in Step 1 should be in the list.

  • Once you have selected the page, click OK. 
  • Give it any name or label.
  • Under Web Resource Properties, add the text Hello World! to the Custom Parameter(data) textbox.
  • Click the Formatting tab and set the number of rows to 2, scrolling Never and no border.
  • Save the form and publish it; you now have a label.

Credits: Some of the logic was based on code written by Robert Reid at Strictly-Software.com. Thanks for sharing this, Robert.

Posted by at
Location: Round Rock, TX 78681, USA

4 comments:

  1. Tyler CJanuary 31, 2013 at 9:44 AM

    First of all, thanks for posting this! This is a very useful tool to add to CRM! Do you know if there is a way to do the same with hyperlinks on a form?

    ReplyDelete
  2. UnknownJanuary 31, 2013 at 3:37 PM

    Tyler, glad you liked it, thanks. Not sure if this will help but try this:
    http://learningcrm2011.blogspot.com/2013/01/add-link-to-external-website-on-crm.html

    If this is not what you are looking for, let me know and I can try something else.

    ReplyDelete
  3. AnonymousMay 11, 2015 at 6:11 PM

    Thank you for the post. This is great. How can I modify the code so that I can use a specific font type, size, and color?

    ReplyDelete
    Replies
    1. AnonymousMay 12, 2015 at 7:21 AM

      not sure, but you can try add basic tags that are used in html. for example, use this as the text: "Hello I am a bold fellow". The HtmlDecoding might screw it up though.

      Delete

Subscribe to: Post Comments (Atom)