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();