CRM 4.0 Network Resource Image Control

As the name suggest this is an on-premise / VPN solution so consider if you need this to work across the web / IFD. The idea is to utilize a simple network share together with VB 6.0 Common Control Open Dialog which can be summoned using JavaScript. The nice thing about the Dialog is that it enables you to see files as thumbnails, set the initial directory and return the selected image path into a text attribute. That’s pretty much what you need to make this work.





You can add an ISV toolbar button to pop the dialog but I find that this solution works hand in glove with the text image button post I wrote a while ago.
Here is what is did in a nutshell:

1. Add a new text attribute. I used the pager attribute on the contact form for the sake of this example.

2. Add a new Fixed Field 1:1 section to the contact form. This is done so the IFRAME
that displays the image will occupy half the screen.



3. Then add a the image IFRAME and pointed it to a default blank.jpg image.



4. Arrange the form attributes as you like … here is what I did.



5. Set the path attribute to read-only so selection is possible only when using the dialog.

6. Add the following code to the contact on load event box.

And Finally don't forget to create a network share anywhere on the server and set appropriate user permission.



That’s it … pretty simple ah … feel free to comment.

TextHelperButton = function(fieldId)
{
    var fldButton = this;

    fldButton.Field = crmForm.all[fieldId];

    if (!fldButton.Field)
    {
        return alert("Unknown Field: " + fieldId);
    }

    fldButton.Click = null;
    fldButton.Image = new ButtonImage();
    fldButton.Paint = function()
    {
        var field_d = document.all[fldButton.Field.id + "_d"];
        if (field_d)
        {
            field_d.style.whiteSpace = "nowrap";
            field_d.appendChild(fldButton.Image.ToObject())
        }
    }

    fldButton.MouseOver = function()
    {
        event.srcElement.src = fldButton.Image.MouseOver;
    }

    fldButton.MouseOut = function()
    {
        event.srcElement.src = fldButton.Image.MouseOut;
    }

    function ButtonImage()
    {
        this.MouseOut  = "/_imgs/lookupOff.gif";
        this.MouseOver = "/_imgs/lookupOn.gif";
        this.Width = 21

        this.ToObject = function()
        {
            var img = document.createElement("IMG");
            img.onmouseover = fldButton.MouseOver;
            img.onmouseout = fldButton.MouseOut;
            img.onclick = fldButton.Click;
            img.src = this.MouseOut;
 
            var cssText = "vertical-align:bottom;";
            cssText+= "margin:1px;";
            cssText+= "position:relative;";
            cssText+= "right:" + (this.Width + 1) + "px";
            img.style.cssText = cssText;
            return img;
        }
    }
}

function OnCrmPageLoad()
{
 /* Build the Avatar path attribute Text Helper Button */
    var avaterBtn = new TextHelperButton("pager");
        avaterBtn.Click = SelectAvatar;
        avaterBtn.Paint();
     
     /* Set the avatar IFRAME when the form loads*/
     if (crmForm.all.pager.DataValue)
     {
  document.all.IFRAME_image.src = crmForm.all.pager.DataValue;
     }
}

function SelectAvatar()
{
     var dialog = new ActiveXObject("MSComDlg.CommonDialog");
     /* You may set the filter to only show image files */
     dialog.Filter = "All Files (*.*)";
     /* Point the dialog to the current (selected) image */
     dialog.FileName = document.all.IFRAME_image.src;
     dialog.MaxFileSize = 1024;
     dialog.ShowOpen();
  
     /* Save the readonly path attribute with the new file selection */
     crmForm.all.pager.DataValue = dialog.FileName;
     /* Force submit since this is a readonly attribute */
     crmForm.all.pager.ForceSubmit = true;
     /* Update the image iframe */
     document.all.IFRAME_image.src = crmForm.all.pager.DataValue;
}

OnCrmPageLoad();

CRM 4.0 Formatting Form Fields

The following is an intuitive Mask/UnMask JavaScript object. If you’re looking to toggle other clients (other than an entity form) you might use it as a template for a server side plug-in. The object makes it easy to enforce various types of formatting such as phone numbers , a social security number, credit card numbers and many more. The sample below formats the account Main and Other phone fields.

When a user gives focus to a phone field the object unmasks the field’s value leaving only numbers (the original user input) or blank. Once focus is lost the mask is applied again, if a value exists, giving it its final display. The object also fires when the form is saved to support a situation where focus is not fired i.e. when the user uses the keyboard to save the record.

There’re also other features such as displaying the format as a title or telling the mask to fire when the form loads. The later is hardly required but you might find it useful to leverage the user interaction with the form … and cleans/reformat imported/external values along the way.

If you take a closer look you’ll notice that the object receives both a format (mask) such as “(##) ###-####” and a regular expression which is an unmask filter e.g. “\\D”. “\\D” means anything but numbers which is what you need to remove/replace to get the user’s original input.

The code goes in the account entity onload event.
Give it a go and feel free to leave comments.

function Mask(format)
{
    var m = this;
   
    /* e.g. (##) ###-#### */
    m.Format = format;
    m.Field  = null;
    /* OnLoad   - Might be Used to cleans imported values. */
    m.OnLoad = false;
    /*
        A regular expression for unwanted (bad) characters. 
        e.g. A field (e.g. phone number) original (before formatting) characters must contain numbers only.  
    */
    m.Filter = null;
   
    var onloadbound = false;
    var onsavebound = false;
    var onfocusbound = false;
   
    m.Mask   = function()
    {
        if (!m.Field)
        {
            return alert("Mask is missing a field");
        } 
 
        /* Sets the textbox title to required Format */
        m.Field.title = m.Format;  
 
        if (!onfocusbound)
        {
            onfocusbound = m.Field.attachEvent("onfocusin", unmask);
            m.Field.attachEvent("onfocusout", mask);
        }
 
        if (m.OnLoad && !onloadbound)
        {
            onloadbound = mask() == undefined;
        }
 
        if (!onsavebound)
        {
            onsavebound = crmForm.attachEvent("onsave",mask);
        }
    }
   
    function unmask()
    {
        m.Field.DataValue = strip();
    }
   
    function mask()
    {
        /* Reformat */
        var formated = m.Format;
        /* value as Array of characters */
 
        var splitValue = strip().split("");
 
        if (splitValue.length == 0)
        {
            m.Field.DataValue = null;
            return;
        }
  
        /* Regex defining a single placeholder */
        var placeHolderReg = new RegExp("#{1}");
        /* Replace each placeholder with a single character */
        for(var i = 0; i < splitValue.length ; i++)
        {
            formated = formated.replace(placeHolderReg,splitValue[i]);          
        }
 
        m.Field.DataValue = formated;
    }
   
    function strip()
    {
        if (!m.Field.DataValue)
        {
            return "";
        }
        /* Strip field from unwanted characters */
        var valueOnlyReg = new RegExp(m.Filter,"gi");
        return m.Field.DataValue.replace(valueOnlyReg,"");
    }
}

function OnCrmPageLoad()
{
    var phoneMask = new Mask("(##)###-####");
    phoneMask.Field = crmForm.all.telephone1;
    phoneMask.Filter = "\\D"; //Unmask Filter - Strip Everything which is not a Number
    phoneMask.Mask();
  
    var cellMask = new Mask("+(##) ### ####");
    cellMask.Field = crmForm.all.telephone2;
    phoneMask.OnLoad = true;
    cellMask.Filter = "\\D"; //Unmask Filter - Strip Everything which is not a Number
    cellMask.Mask();
}

OnCrmPageLoad();