Dynamic thumbnails within another presentation

Is it possible to dynamically load the thumbnail of one key message into the content of another key message?


I have a "dashboard" that I am working on that includes links to hidden presentations. When tapping on the thumbnails (currently hard coded and local) of the presentations other dynamic data is presented to the user before tapping through to view that presentation. I was able to add the dynamic data to a custom field on the Product_vod__c object as JSON. The idea being that my client's IT team could add new presentations via the SF interface over time instead of relying on a developer to update the dashboard content. However, I can't find a good way to add in the thumbnails for those presentations to make them dynamic as well.

My hope was to use the CRM API but I have been unable to find anything of use. It seems that the image would need to be extracted from the slide zip file in order to be usable. Any other thoughts?




  • Avatar
    Sean X

    Hi Chris,

    I don't think it is possible since thumbnail need to be packaged in advance and it's required for each piece of media.

    FYI, https://crmhelp.veeva.com/doc/Content/CRM_topics/Multichannel/CLM/Media_Pkging_Guidelines/ContentPackaging.htm


  • Avatar
    Bryan Lara

    Recently I wanted to do the same, the solution:

    For this "dashboard" function, you need to know how the webview obtains the HTML file you are seeing on the screen, that is, knowing if you can exit the slide using a relative URL.
    - For example, to exit as follows

    You can check it with a document.location.href alert

    I recommend you use the iOS simulator that will allow you to see on your Mac the content file structure of the Veeva CRM Mobile application.

    The following explanation is using the iOS simulator (you get exactly the same result as with a real iPad)


    The first thing is to find the folder that the application points to when you login.
    Between the URL that you obtained with the href alert, look for the login user and as far as Media says (the folder following login user) is the folder you have to look for on your Mac.
    This will be the user media folder.
    For example,
    file:///Users/{{USER_FOLDER}}/Library/Developer/CoreSimulator/Devices/{{DEVICE_UDID}}/data/Containers/Data/Application/{{APP_ UUID}}/Documents/{{USER_LOGIN}}/Media

    After reaching this folder, you will find that there are as many folders as there is synchronized content. Each folder is a Key Message. The name of each folder is the ID of each one (Key_Message_vod__c.ID)

    Within each folder of Key Message you will find at least 2 folders:
    - One with the name of the uploaded zip (Key_Message_vod__c. Media_File_Name_vod__c) without the extension .zip
    - And another folder generated from the CRC (Key_Message_vod__c. Media_File_CRC_vod__c). If the Key Message has a shared resource, the CRC of the shared resource will be added to the name: {{KeyMessage_CRC}}-{{SharedResource_CRC}}

    The folder we will always use will be the one with the CRC of the Key Message (and shared resource if applicable).
    Inside this folder we will find another folder with the name of the zip uploaded without the extension, and this folder is where the Veeva CRM Mobile application gets the slide and the respective thumb.

    Given the levels of folders that we enter from Media (folder containing folders of Key Messages), we can be sure to leave 3 folders to enter another folder.
    We get the first part of the relative URL of the dashboard slide: ../../../

    The following is to add to the relative URL the ID of the Key Message that you want to obtain the folder used by the app, followed by the CRC of the Key Message, plus the name of the zip file (without extension).

    The following is what you want to get from that slide.
    In our case, we want the thumb.png file.


    IMPORTANT: As Veeva supports 2 types of packaging content, you can listen error to load thumb.png to try again to get the file {{BASENAME}}-thumb.jpg.
    Make sure you accept only the first error, because if you don't handle it and can't find -thumb.jpg, the error will continue infinitely. You can do it by adding the first_error class to the image. You should also listen onload to remove the first_error class.

    <img onerror="if(this.classList.contains('first_error')) return; this.classList.add('first_error'); img.src=img.src.replace('/thumb.png', `/${BASENAME}-thumb.jpg`);" onload="this.classList.remove('first_error')" />



    Now, for what you need ...

    1. Obtain the Presentation Slides associated with the presentation, ordered by Display Order, ascendingly.

    2. Get the Clm_Presentation_Slide_vod__c.Key_Message_vod__c field of each Presentation Slide, you will get the ID of the Key Message.

    3. Obtain the necessary data from the Key Message (Media File Name, Media File CRC, Shared Resource, etc ...)

    3.1. If the Key Message has Shared Resource, look for the Key Message with the ID obtained from Key_Message_vod__c.Shared_Resource_vod__c, you will get the ID of the Key Message used as Shared Resource, so you can obtain the CRC and find the correct path to the thumb.

Please sign in to leave a comment.