View "In Content Document"

  • 1
  • Question
  • Updated 2 months ago
  • Answered
I see that I need to use "In Content Document (in record context).  How can I within skuid get the functionality to preview so I don't see that it is salesforce?

Or get the functionality of this page within a Skuid page?
Photo of Bill Fox

Bill Fox

  • 7,954 Points 5k badge 2x thumb

Posted 2 months ago

  • 1
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
Bill,

You can get the preview portion using an Image component and this URL.  
This link will render the first page of PDF, Word, Excel, PowerPoint, and most image types:

/sfc/servlet.shepherd/version/renditionDownload?rendition=THUMB720BY480&versionId={{{LatestPublishedVersionId}}}


Here is a page that you can use in a Page Include component.  You just need to pass in the Id of the ContentDocument record for your file.  The Query String should be like this:

id={{{ContentDocumentId}}}

Page XML:
<skuidpage personalizationmode="server" showsidebar="false" useviewportmeta="true" showheader="false">
    <models>
        <model id="ContentDocumentPreviewPI" limit="1" query="true" createrowifnonefound="false" datasource="salesforce" sobject="ContentDocument">
            <fields>
                <field id="Id"/>
                <field id="LatestPublishedVersionId"/>
                <field id="LatestPublishedVersion.Title"/>
            <field id="Title"/>
</fields>
            <conditions>
                <condition type="param" value="id" field="Id" state="" operator="=" enclosevalueinquotes="true" novaluebehavior="noquery"/>
            </conditions>
            <actions/>
        </model>
    </models>
    <components>
<richtext multiple="false" uniqueid="sk-3vFq-252" model="ContentDocumentPreviewPI">
    <contents>&lt;p style="text-align: center;"&gt;&lt;span style="font-size:16px;"&gt;Title: {{{Title}}}&lt;/span&gt;&lt;/p&gt;
</contents>
</richtext>
        <image source="url" uniqueid="sk-3vB0Yw-127" datasource="salesforce" behavior="none" resource="" resourceContentType="" url="/sfc/servlet.shepherd/version/renditionDownload?rendition=THUMB720BY480&amp;versionId={{{LatestPublishedVersionId}}}" model="ContentDocumentPreviewPI">
            <styles>
                <styleitem type="itemsize"/>
                <styleitem type="border"/>
            </styles>
        </image>
    </components>
    <resources>
        <labels/>
        <javascript/>
        <css/>
    <actionsequences uniqueid="sk-3vFo-244"/>
</resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>


Thanks,

Bill


Photo of Bill Fox

Bill Fox

  • 7,954 Points 5k badge 2x thumb
Thanks Bill.  How can I open a lightning page:  https://dorothy.lightning.force.com/lightning/r/ContentDocument/069f1000002wZh7AAE/view
that does not have the header and footer information.  Ideally in a page include in a popup.  I like the lightning presentation of the document viewer.

Might look like this:

Photo of Mark DeSimone

Mark DeSimone, Official Rep

  • 11,050 Points 10k badge 2x thumb
Hi Bill. In another thread, Zach responded explaining that Salesforce doesn't offer any way to remove the Lightning header. So, instead, you can explore using Skuid to share the links to the documents themselves, which should not have a Lightning header when clicked. I'm not quite sure what your entire use case is, but I hope this is helpful. 
Photo of Bill Fox

Bill Fox

  • 7,954 Points 5k badge 2x thumb
I am trying to retain the functionality of when an image is clicked and I get the popup with all the options.
https://drive.google.com/file/d/19DMKiEm0oTYgYpJ186NAZBz4AduFrw_8/view

Photo of Mark DeSimone

Mark DeSimone, Official Rep

  • 11,050 Points 10k badge 2x thumb
Hi Bill. Please see my response on your related Community post: https://community.skuid.com/skuid/topics/in-content-document for more information about the models needed.

To get that particular popup functionality, the easiest solution is to use the out-of-the-box "Related List" for Files on your Lightning Record Detail page, alongside your Skuid page. Here's what that might look like:


Photo of Bill Fox

Bill Fox

  • 7,954 Points 5k badge 2x thumb
I am trying to create a URL

https://dorothy.lightning.force.com/lightning/r/ContentDocument/ {{#urlDecode}}{{LatestPublishedVersion.Id}}{{/urlDecode}}/view  

I want it to merge like this:
https://dorothy.lightning.force.com/lightning/r/ContentDocument/069f1000004SnACAA0/view

But I am getting this:
https://dorothy.lightning.force.com/lightning/r/ContentDocument//view

What am I missing
(Edited)
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
Bill,

Since you just need the Content Document Id, you can remove the {{#urlDecode}} and use the 'triple mustache' for the id like this:

https://dorothy.lightning.force.com/lightning/r/ContentDocument/{{{LatestPublishedVersion.Id}}}/view


Thanks,

Bill

Photo of Bill Fox

Bill Fox

  • 7,954 Points 5k badge 2x thumb
The variable does not get merged.  

Based on the following:
https://docs.skuid.com/latest/en/skuid/merge-syntax/global-merge-variables.html

Global Functions

  • urlEncode / encodeUrl: for URL-encoding merge data so that it can be safely added to a URL. Equivalent of JavaScript’s encodeURIComponent function. Example: /apex/skuid__UI?page=LeadsWithCompanyName&companyname={{#urlEncode}}{{companyName}}{{/urlEncode}}
  • urlDecode / decodeUrl: for decoding URL-encoded merge data. Equivalent of JavaScript’s decodeURIComponent function. Example: {{#urlDecode}}{{$Param.companyname}}{{/urlDecode}}
I thought in a URL merge i needed to urldecode?

In any case your recommendation resolves like this:


 

Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
Bill,

What component are you using to 'open' the URL?  Is it a Button or Template?  If so, you should make sure that the component references your Model.

If it is a Template 'field' or a component that references a different model from the one you are getting your LastestPublishedVersionId from, then you may need to use the model in the merge syntax.  Something like...

https://dorothy.lightning.force.com/lightning/r/ContentDocument/{{{$Model.modelName.data.0.LatestPublishedVersion.Id}}}/view

Thanks,

Bill
Photo of Bill Fox

Bill Fox

  • 7,954 Points 5k badge 2x thumb
Hello Bill.  It is a deck with an image inside the deck.  The deck is referencing my record "CR_File_DNA__c" . The interaction on the image is a click with a Go to URL.  The image is referencing the "ContentDocument" with the Go to URL of https://dorothy.lightning.force.com/lightning/r/ContentDocument/{{{LatestPublishedVersion.Id}}}/view

Here is a video of the same: https://drive.google.com/file/d/1qvzB4MShNQQV2AyewhBqbGmvI6ILavoV/view

Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
Bill,

In looking at your video, I think the setup of your deck needs to be adjusted.  I think you should set your Deck component to use the 'AccountContentDocumentLink' model.  In your AccountContentDocumentLink model, add the field 'LatestPublishedVersionId' which you can see 'through' the ContentDocumentId field.  Then you can change the URL on your Click action to be:
/lightning/r/ContentDocument/{{{ContentDocument.LatestPublishedVersionId}}}/view

You can also try this simple page.  It's meant to be used in a Page Include.  You must have Lightning Experienced enabled and you need to pass 1 parameter:

linkid={{{$Model.modelName.data.0.Id}}}

Where the 'linkid' is the Id from your "CR_FIle_DNA__c' object (or any other object that supports Files (i.e. Account, Contact, Opportunity; etc.).

This page only uses the ContentDocumentLink object.
<skuidpage unsavedchangeswarning="no" personalizationmode="server" showsidebar="false" useviewportmeta="true" showheader="false">
    <models>
        <model id="ContentDocumentLinkPI" limit="20" query="true" createrowifnonefound="false" datasource="salesforce" type="" sobject="ContentDocumentLink">
            <fields>
                <field id="ContentDocumentId"/>
                <field id="ContentDocument.Title"/>
                <field id="LinkedEntityId"/>
                <field id="LinkedEntity.Name"/>
                <field id="ShareType"/>
                <field id="Id"/>
                <field id="Visibility"/>
                <field id="ContentDocument.LatestPublishedVersionId"/>
                <field id="ContentDocument.LatestPublishedVersion.Title"/>
            </fields>
            <conditions>
                <condition type="param" value="linkid" field="LinkedEntityId" fieldtargetobjects="" state="" operator="=" enclosevalueinquotes="true" novaluebehavior="noquery"/>
            </conditions>
            <actions/>
        </model>
    </models>
    <components>
        <deck searchmethod="server" searchbox="true" columngutter=".75em" rowgutter=".75em" model="ContentDocumentLinkPI" filtersposition="top" filterswidth="150px" showsavecancel="false" behavior="flex" verticalalign="top" ratio="1" minwidth="350px" uniqueid="sk-sQAlT-219" buttonposition="" pagesize="10">
            <components>
                <image source="url" uniqueid="sk-sQE0g-236" datasource="salesforce" behavior="none" model="ContentDocumentLinkPI" url="/sfc/servlet.shepherd/version/renditionDownload?rendition=THUMB240BY180&amp;versionId={{{ContentDocument.LatestPublishedVersionId}}}">
                    <styles>
                        <styleitem type="itemsize" width="custom">
                            <styles>
                                <styleitem property="width" value="240px"/>
                            </styles>
                        </styleitem>
                        <styleitem type="border"/>
                    </styles>
                    <conditions>
                        <condition type="contextrow" field="Id" mergefield="Id" operator="="/>
                    </conditions>
                </image>
            </components>
            <massactions/>
            <interactions>
                <interaction type="tap" direction="either">
                    <action type="redirect" window="self" url="/lightning/r/ContentDocument/{{{ContentDocument.LatestPublishedVersionId}}}/view">
                        <models/>
                        <popup title="{{Model.label}}: {{Name}}" width="80%">
                            <components/>
                        </popup>
                    </action>
                </interaction>
            </interactions>
            <actions/>
            <styles>
                <styleitem type="border"/>
            </styles>
        </deck>
    </components>
    <resources>
        <labels/>
        <javascript/>
        <css/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>


Thanks,

Bill