locked
can I add images in Dynamics CRM 2011 forms? RRS feed

  • Question

  • Hi there,

    I read somewhere that Dynamics CRM 2011 would allow more flexible customisation of forms and (if my memory doesn't fail me) the buil-in support for adding images.

    Is this really possible?

    What I want is to add a image that would change as per the values of a drop-down (I have the jScript to perform such change).

    Regards,
    P.

    Thursday, March 10, 2011 8:40 PM

Answers

  • Try this:

    Let's say the default image web resource is 2.png and called prefix_image_2
    Get the src of the web resource by Xrm.Page.getControl("WebResource_XYZ").getSrc();
    Check the value of the drop-down list and replace the src with the new value like:

    var src = Xrm.Page.getControl("WebResource_XYZ").getSrc();
    var newSrc = src.replace("image_2", "image_4");

    then, set the new src with: Xrm.Page.getControl("WebResource_XYZ").setSrc(newSrc);

    My code is way from optimal but i think you get the idea.. you can easily add the value of the drop-down list in the replace to make it more dynamic.

    /Emil

    • Proposed as answer by Emil Mattsson Friday, March 11, 2011 8:32 AM
    • Marked as answer by pmdci Saturday, March 12, 2011 4:05 PM
    Thursday, March 10, 2011 10:10 PM
  • I think you should go with the 200 webresources approach since this will work both on-prem and online. I cannot see any negative impact on the server that you should be worried about.

    No, you cannot pack the images into the solution in any way but web resources. This actually IS the new functionality for images since this hasn't been possible before (deploy images with the customizations).

    Bottom line: if you ever need to deploy the solution online - you need to have the images as webresources, somebody's got to do this eventually :)

    /Emil

    • Marked as answer by pmdci Saturday, March 12, 2011 4:04 PM
    Saturday, March 12, 2011 3:28 PM

All replies

  • Hi!

    Add the image as a web resource.
    Go to the form editor for the entity and form you want the image on. On the Insert Tab of the Ribbon, choose Web Resource and pick the image web resource you just uploaded.

    That should do it.

    /Emil

    • Proposed as answer by Emil Mattsson Saturday, March 12, 2011 3:29 PM
    • Unproposed as answer by pmdci Monday, November 26, 2012 11:32 AM
    • Proposed as answer by vasu karempudiBanned Friday, February 22, 2013 9:36 AM
    Thursday, March 10, 2011 9:31 PM
  • Hi Emil.

    Thank you for your answer.

    Unfortunately I think this might not be as simple as I thought. You see, what I want to do is a jScript, which I would add on the onChange event of a drop-down.

    The idea is that when changing the value of the drop-down, it will change the XYZ.PNG image which is at the side of the drop-down. XYZ is the value of the drop-down option selected. For instance, when selecting 4, it will change the image to 4.png

    This can be easily done in, say, SharePoint or other sort of web-forms.

    Say for instance that I add new Web Resource called NEW_icon which is a PNG file. Would I be able to change it with a jScript?

    Thursday, March 10, 2011 9:40 PM
  • Try this:

    Let's say the default image web resource is 2.png and called prefix_image_2
    Get the src of the web resource by Xrm.Page.getControl("WebResource_XYZ").getSrc();
    Check the value of the drop-down list and replace the src with the new value like:

    var src = Xrm.Page.getControl("WebResource_XYZ").getSrc();
    var newSrc = src.replace("image_2", "image_4");

    then, set the new src with: Xrm.Page.getControl("WebResource_XYZ").setSrc(newSrc);

    My code is way from optimal but i think you get the idea.. you can easily add the value of the drop-down list in the replace to make it more dynamic.

    /Emil

    • Proposed as answer by Emil Mattsson Friday, March 11, 2011 8:32 AM
    • Marked as answer by pmdci Saturday, March 12, 2011 4:05 PM
    Thursday, March 10, 2011 10:10 PM
  • Hi Emil,

    Thanks for reply. I am still getting hold of the new Dynamics CRM customisation features, but I already learned how to publish centralised jScripts and all that, so bare with me :)

    I am not sure I understand this correctly, so let me give you a background.

    Say that I will have 10 images, all names as ICO_##.png (ex.: ICO_01.png, ICO_02.png ... ICO_10.png)

     

    1. I edit my solution then I create one web resource of type PNG file. I name it pmdci_Icons.
    2. I upload a ICO_00.png file to be the default "blank" icon (for when the user has no option selected).
    3. I save and close this WebResource, and publish my changes.
    4. I also manually upload to my /WebResources/ directory in the CRM server, all the other icons from ICO_01.png to ICO_10.png.
    5. I save and publish these customisations.
    6. Now I add the resource into the form. I call it WebResource_CustomIcon.

     

    Now I'll have to do the jScript resource for this solution as well, right? This is the part I am a bit lost. The idea is go get the value from pmdci_IconList option set (a dropdown) to change the icon. I assume I would have to change the var newSrc = src.replace("image_2", "image_4"); bit, is that right? I might need to do a concatenation of 'ICO_' . valueOfpmdci_IconList . '.png' in order to results such as ICO_01.png, ICO_02.png, etc...

    Any pointers? I am still crawling here... I am a total jScript newbie :)

    UPDATE: FYI, in my example I am using 10 icons. But is really about 200 icons! I can't just create one WebResource for each icon...

    Thanks for the help!

    Regards,
    P.

    Friday, March 11, 2011 4:25 AM
  • OK - if your deployment type is on-prem you can upload all the images to a folder (preferably in the CRMWEB\ISV\ folder) in the website named ICO_##.png. Then:

    1. Add an IFrame instead of a web resource on the form.
    2. In the OnLoad event of the form and on the OnChange event of the optionset, add the javascript that changes the Url of the IFrame. You can still use setSrc();

    If your deployment is Online or if you plan to go Online with the deployment, you will NOT have access to the file system and you will be forced to upload all the icons as web resources.

    You can try this code, note that i haven't tested it - just written something you could start with. You may have to add your own code or make changes to it to make it work for your situation.

    function OnLoad() {
    
      ChangeSrc();
      Xrm.Page.getAttribute("optionsetattribute").addOnChange(ChangeSrc);
    }
    
    function OptionSetValueOnChange() {
      ChangeSrc();
    }
    
    function ChangeSrc() {
    
      //get the value of the optionset
      var optionValue = Xrm.Page.getAttribute("optionsetattribute").getValue();
    
      //get hold of the IFrame/WebResource
      var iframeOrWebRsrc = Xrm.Page.getControl("iframeorwebresourcename");
      var src = iframeOrWebRsrc.getSrc();
    
      //iframe case
      iframeOrWebRsrc.setSrc("http://crmserver/isv/iconfolder/ico_" + optionValue + ".png");
    
      //webresource case
      //set the src to the corresponding icon url of the optionsetvalue
      src = src.substring(0, src.indexOf("ICO_") + "ICO_" + optionValue + ".png");
    
      iframeOrWebRsrc.setSrc(src);
    }
    

    On the OnLoad event of the form, call function "OnLoad"
    The OnLoad function will add the onchange event itself.

    /Emil

    • Proposed as answer by Emil Mattsson Saturday, March 12, 2011 3:29 PM
    Friday, March 11, 2011 9:24 AM
  • Emil,

    Your code is greatly appreciated. Thanks! I believe hat is enough for me to work on.

    I think the question now is whether I should do one WebResource for each PNG like your previous example, or if I should do the example above, using an iFrame to show the image. So I wonder:

    1. If I create about 200 PNG WebResources like your original example, what do you reckon it would be the impact on the server? Do you think this is a suitable approach?
    2. Since Dynamics CRM 2011 has this new Solutions package functionality, I wonder if I could be able to "pack" all the icons in a solution that would then be deployed into my /crmserver/is/pmdci_iconpack folder. Is this feasible?

    Thanks for your help so far.

    Regards,
    P.

     

    Friday, March 11, 2011 12:10 PM
  • I think you should go with the 200 webresources approach since this will work both on-prem and online. I cannot see any negative impact on the server that you should be worried about.

    No, you cannot pack the images into the solution in any way but web resources. This actually IS the new functionality for images since this hasn't been possible before (deploy images with the customizations).

    Bottom line: if you ever need to deploy the solution online - you need to have the images as webresources, somebody's got to do this eventually :)

    /Emil

    • Marked as answer by pmdci Saturday, March 12, 2011 4:04 PM
    Saturday, March 12, 2011 3:28 PM
  • Hi Emil,

    I am trying to get your code to work, but I have a quick question (since the images are not being displayed).

    I decided to try this solution using WebResources instead of uploading the images manually (got talked into it since it is more portable and compatible with Microsoft's Dynamics CRM cloud solution as well). Since I am trying this solution using WebResources, I am considering the webresource case above, and disregarding the iframe case.

    My question is around the line: src = src.substring(0, src.indexOf("ICO_") + "ICO_" + optionValue + ".png")

    Since I am using a WebResource file, do I need to specify the ".png" bit? Also, why do the "ICO_" bit is repeated? I

    The problem is that the image is not being loaded, and I can't right click to find out which URL is effectively being passed. So I added the following code to find out what the src variable was storing:

    crmForm.all.address1_country.DataValue = src;

    What I noticed is that src is gets emptied after the line: src = src.substring(0, src.indexOf("ICO_") + "ICO_" + optionValue + ".png")

    However, if I comment out this line, src returns the original source for the WebResource... I figure the problem lies around the src.substring function then. Any ideas? I am wondering if I shouldn't go back to your original example and use the src.replace() function?

    Thanks for the help!

    Regards,
    P. 




    Monday, March 21, 2011 2:11 PM
  • As an aside, theres a great description here on displaying images/icons that are all saved in a single image file

    http://1plusdesign.com/articles/css-clip-property-inline-image-sprites/

    If you are able to programatically control the surrounding DIV elements then it may be worth a try, and it would be simpler than deploying 200 individual files.


    Richard Barclay
    Tuesday, March 22, 2011 5:28 PM
  • Hi Richard,

    Thanks for the post. This would work great in other circumstances. But I am looking to use WebResources. Ican't simply reference webresource files like/xxx/yyy/image_01.png. It is a bit more complicated. :(

     

    Wednesday, March 23, 2011 11:38 PM
  • Could someone from MS recommend a supported / best practise way to display a different image against individual contact records? Using the form designer you have to specifically specify the web resource (individual image) so the same image is displayed for all contacts; how would you go about displaying a different image for each contact?

    • Proposed as answer by mazhar hayat Monday, November 26, 2012 11:09 AM
    • Unproposed as answer by mazhar hayat Monday, November 26, 2012 11:09 AM
    Wednesday, March 30, 2011 4:16 PM
  • Iain,

    From the top of my head, the only way I think this would work is with some sort of SDK. Reason being is because the image would be a binary data assigned to the client. Something like a BLOB column in the contact records table; OR...

    ... Uploading the image to a webserver, and having the URL for the image assigned to the record upon the upload. For instance, uploading JonDoe.png would send the file to /ISV/ContactImages/JonDoe.png (or better yet, rename the image file with the UID for the contact). Then this URL would be a field for the entity, and some sort of iFrame would display the image. Anyway to do this in a friendly way it would require some sort of development.

     

    In contrast, what I want to do is work with a fixed set of 200 images or so. And the image would change based on the option selected on the OptionSet (dropdown). It is relatively easy to do this by uploading the images to the WebServer, but then the solution wouldn't be so portable (as pointed out by EMIL on his message above).

    Wednesday, March 30, 2011 7:35 PM