Skip to main content

I have successfully set-up a data source for Google Drive and am able to pull in the meta data to a card component.  Now i am trying to show a “thumbnail” of the file which then i can click on to see the image - would operate similar to wordpress media component.  thx for ideas.  

Alec,


Add the Image component to your card. You’ll just need the ‘path’ (URL) to your file. Here is an example based on Users in Salesforce.


Thanks,


Bill


<skuidpage unsavedchangeswarning="yes" personalizationmode="server" useviewportmeta="true" showsidebar="true" showheader="true">
<models>
<model id="Users" limit="20" query="true" createrowifnonefound="false" datasource="salesforce" type="" sobject="User">
<fields>
<field id="AboutMe"/>
<field id="IsActive"/>
<field id="Name"/>
<field id="SmallPhotoUrl"/>
</fields>
<conditions/>
<actions/>
</model>
</models>
<components>
<deck searchmethod="server" searchbox="true" columngutter=".75em" rowgutter=".75em" model="Users" filtersposition="top" filterswidth="150px" showsavecancel="false" behavior="flex" verticalalign="top" ratio="1" minwidth="350px" uniqueid="sk-1JIRU5-118" buttonposition="" pagesize="10">
<components>
<grid uniqueid="sk-1JIU9g-130">
<divisions>
<division behavior="specified" verticalalign="top" width="100px">
<components>
<image source="url" uniqueid="sk-1JIYkw-142" datasource="salesforce" behavior="none" model="Users" url="{{SmallPhotoUrl}}">
<styles>
<styleitem type="itemsize"/>
<styleitem type="border"/>
</styles>
</image>
</components>
</division>
<division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">
<components>
<basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="Users" buttonposition="" uniqueid="sk-1JId6G-157" mode="read">
<columns>
<column width="100%">
<sections>
<section title="{{Name}}" collapsible="no">
<fields>
<field uniqueid="sk-1JIk0p-189" id="AboutMe"/>
</fields>
</section>
</sections>
</column>
</columns>
</basicfieldeditor>
</components>
</division>
</divisions>
<styles>
<styleitem type="background" bgtype="none"/>
</styles>
</grid>
</components>
<massactions/>
<interactions/>
<actions/>
<styles>
<styleitem type="border"/>
</styles>
</deck>
</components>
<resources>
<labels/>
<javascript/>
<css/>
</resources>
<styles>
<styleitem type="background" bgtype="none"/>
</styles>
</skuidpage>