Add Photo View to a Table

Skuid allows users to select Photo View to display records with an associated image on runtime. This can be useful for displaying company logos or contact photos alongside name labels for a more visually oriented interface.



The tutorial below assumes you have:

  • a Skuid page with a functioning model.
  • added an image field to your data source that references the object where your images are stored. For an example of this sort of relationship on Salesforce, see below.

Skuid on Salesforce[[]]

Setting up image field on Salesforce[[]]

Most data sources don’t store media content (images, files, etc) in the same object that holds your data. Salesforce is a good example of this. In Salesforce, standard objects rarely store images, so in order to successfully connect a photo to a record, a new reference field has to be created to link the Salesforce object you’d want represented by an image and a Skuid File object where the photo is stored.

In Salesforce setup[[]]

  1. Click Customize > Your Object > Fields.

  2. Click New under Custom Fields and Relationships.

  3. Configure the the new field by setting the property and clicking next:

    • Data Type: Lookup Relationship
    • Related To: File
    • Field Label: (Create a label for the lookup field)
    • Field Name: (Create a name for the lookup field)
  4. Allow your objects to access this field by setting field-level security.

    • Add Related List: Uncheck
    • Append related list: Uncheck

In Skuid:

  1. Open the relevant page in the App Composer.
  2. Click the model responsible for your Table data.
  3. Select the newly created reference field to your model.
  4. On Table component, click Add Field(s).
  5. Add the image field your table.
  6. Add a Photo View to your Table.

Add Photo View to a Table

Add the View [[]]

  1. On the Table component, click fa-plus-circle Add View to create a new view.

  2. In the Properties Pane:

    • View type: Photo

Configure the Photo View [[]]

  1. Click the View element you want to configure and edit in Table View Properties:

    • Label Field: Select the label applied to the image
    • Image Source: Specify the type of location the image will be pulled from.
    • On-Click URL: Specify where the user is redirected when the image is clicked. You can use a specific URL or merge variables such as {{Id}}.
    • Default Photo: Default Image: The default image (Person or Org) to display before an actual image is uploaded.
  2. Click Save.