Image component accept row merge syntax for url?

  • 1
  • Question
  • Updated 3 years ago
  • Answered
This must have been answered somewhere... 

Can I get the image component to process something like {{CreatorSmallPhotoUrl}} on every row or a field editor or table?
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb

Posted 3 years ago

  • 1
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
Yes, absolutely, for instance if you would like to show the image in a Drawer or a Popup, row merges in the URL will be processed in context of the context row.

Here's an example XML for a page on the User object with a table with a drawer showing User photos:

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true" tabtooverride="User">   <models>
      <model id="User" limit="100" query="true" createrowifnonefound="false" sobject="User" adapter="" type="" orderby="Name">
         <fields>
            <field id="FirstName"/>
            <field id="LastName"/>
            <field id="CreatedDate"/>
            <field id="FullPhotoUrl"/>
            <field id="SmallPhotoUrl"/>
         </fields>
         <conditions>
            <condition type="fieldvalue" value="true" enclosevalueinquotes="false" field="IsActive"/>
            <condition type="fieldvalue" value="THIS_WEEK" enclosevalueinquotes="false" field="LastLoginDate" operator="gte"/>
         </conditions>
         <actions/>
      </model>
   </models>
   <components>
      <pagetitle model="User" uniqueid="sk-2tNmBZ-67">
         <maintitle>
            <template>{{Model.labelPlural}}</template>
         </maintitle>
         <subtitle>
            <template>Home</template>
         </subtitle>
         <actions/>
      </pagetitle>
      <skootable showconditions="true" showsavecancel="false" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="false" model="User" mode="read" uniqueid="sk-2tNmBZ-68">
         <fields>
            <field id="FirstName" allowordering="true"/>
            <field id="LastName" allowordering="true"/>
            <field id="CreatedDate" allowordering="true"/>
         </fields>
         <rowactions>
            <action type="drawer" label="Show Photo" icon="sk-icon-photoview">
               <drawer title="Drawer Area" width="90%" closehandle="true">
                  <components>
                     <image source="url" uniqueid="sk-2tNp-P-90" url="{{FullPhotoUrl}}">
                        <styles>
                           <styleitem type="itemsize" width="custom">
                              <styles>
                                 <styleitem property="width" value="200px"/>
                              </styles>
                           </styleitem>
                           <styleitem type="border"/>
                        </styles>
                     </image>
                  </components>
               </drawer>
            </action>
         </rowactions>
         <massactions usefirstitemasdefault="true"/>
         <views>
            <view type="standard"/>
         </views>
      </skootable>
   </components>
   <resources>
      <labels/>
      <css/>
      <javascript/>
   </resources>
   <styles>
      <styleitem type="background" bgtype="none"/>
   </styles>
</skuidpage>
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Nice.

But the only way we can add an image inline with the table itself or with a field editor is with a template and html?
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
Currently yes.
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Perhaps allow the image component to be dropped as a 'field' in a field editor or template...

Or allow the image component itself to be attached to a model?
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
#1 Certainly has been talked about.  Mirroring the function available with Templates for example