Wednesday, 5 June 2013

User hints - possibly the simplest web resource I'll ever write...

Ok so here it is, a simple HTML web resource which allows you to provide a clickable user hint, instruction or 'More Information' alert on a CRM 2011 form.


User Hint loaded from hyperlink on CRM form

Screenshot showing user hint link embedded on a CRM form

To be honest: the code isn't very clean and the styling is also not CSS-based which would be better. However, I threw it together in a hurry a while back and have used it successfully ever since.

1. Create a new HTML web resource with the following as the source:
<HTML><HEAD><TITLE>More Information</TITLE>
<STYLE type=text/css>body{font-family: Segoe UI, Tahoma, Arial;
background-color: #F6F8FA;}</STYLE>

<SCRIPT language=jscript type=text/jscript>
        function getDataParam()
        {   //Get the any query string parameters and load them
            //into the vals array

            var vals = new Array();
            if (location.search != "")
            {
                vals = location.search.substr(1).split("&");
                for (var i in vals)
                {
                    vals[i] = vals[i].replace(/\+/g, " ").split("=");
                }
                //look for the parameter named 'data'
                var found = false;
                for (var i in vals)
                {
                    if (vals[i][0].toLowerCase() == "data")
                    {
                        parseDataValue(vals[i][1]);
                        found = true;
                        break;
                    }
                }
                if (!found)
                { noParams(); }
            }
            else
            {
                noParams();
            }
        }

  var messageText;
  function displayText()
  {
   var el2 = document.getElementById('messageText');
   alert(el2.innerText,3);
   return false;
  }
  
        function parseDataValue(datavalue)
        {
            if (datavalue != "")
            {
                var vals = new Array();

                vals = decodeURIComponent(datavalue).split("&");
                for (var i in vals)
                {
                    vals[i] = vals[i].replace(/\+/g, " ").split("=");
                }

                //Loop through vals
                for (var i in vals)
                {
     var el2 = document.getElementById('messageText');
     el2.innerText += vals[i]
     //store messagetext in body page
     el2.style.display = "none";
                }

    //set onclickystuff
                var el = document.getElementById('clickme');
    el.onclick = displayText;
            }
            else
            {
                noParams();
            }
        }

        function noParams()
        {
   var el = document.getElementById('clickme');
   el.style.display = "none";
   document.body.innerText = "Error - No data parameters were passed to the page";
        }
    </SCRIPT>
</HEAD>
<BODY onload=getDataParam(); contentEditable=true style="BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 11px; BORDER-RIGHT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; BORDER-TOP-WIDTH: 0px"><A id=clickme title="More Information" href="moreinformation.html" color="Blue">More Information</A> 
<P id=messageText></P></BODY></HTML>

2. Save it. I've called mine new_MoreInformationAlert
3. Add it to a form and configure the web resource properties
  • Configure it to not show a label
  • Set the formatting to only take up one column and one row
  • Don't automatically expand to use available space
  • No scrolling is required
  • Don't display a border
4. Put your message prompt in the Customer Parameter
You can paste in symbols, bullets, line breaks etc. Remember though, this is a JavaScript alert so don't put war of the worlds in there!
5. Enjoy!

No comments:

Post a Comment

Please comment, even just a +1! Knowing that my posts are right, wrong or perhaps even helping someone else will keep me going. Thanks