Add a Record-Sensitive Image

Because the Image component is sensitive to record context, it’s possible for Skuid on Salesforce users to display an image that is associated with a particular record alongside that record. In this tutorial, we’ll use the Image component to display a profile image within a detail drawer that provides additional information to a list of users.

Add an Image to a Detail Drawer

Assumptions

Note

This tutorial assumes that you:

  • are using Skuid on Salesforce
  • have a Skuid page with a functioning model, in this case, on the User object and on that page, a table listing users by name

Create a row action on the table

  1. In the body of the table, click fa-plus-circle Row Action and edit the Row Action’s properties:
    • Action Type: Drawer.
    • Action Label: View user details.
    • Action Icon: sk-icon-arrow-right
    • Drawer Opened Icon: sk-icon-arrow-left

Now it’s time to configure the drawer itself.

Configure the drawer

  1. In the Table Actions pane, click Configure Drawer.

  2. Drag and drop a Responsive Grid into the Drawer.

  3. Click fa-plus-circle Add Division.

  4. Drag and drop a Field Editor into the right side of the Responsive Grid.

    • Add fields, such as Full Name, Last Login, and Email to the Field Editor.

  5. Drag and drop an Image component into the left side of the Responsive Grid and edit the component’s properties:

    • Data Source Type: Salesforce
    • Data Source: Your Salesforce data source.
    • Image Source: URL

    Note

    For this tutorial, we’re using a URL field as our image source, but it is also possible to choose an Attachment field as the image source.

    • Image URL: Click the field picker and select URL for full-sized Photo, then click Apply.

    Note

    To have access to the field URL for full-sized photo, you must have Chatter enabled. In Salesforce Setup, navigate to Chatter > Chatter Settings and click Edit. Check the Enable box under Chatter Settings.

Configure the image style (optional)

  1. While still in the drawer, and with the focus on the Image component, click the Styles tab.
  2. Click Size.
    • Click Width > Custom, and in the Width field, change the setting to 300 px.
  3. Click the X in the corner to close the drawer.

View the results

  1. Click Save and then Preview.
  2. In the User table, click the row action fa-arrow-right View User Details.

This opens a drawer under the record that displays user details on the right side and (if the user has added a photo to their Salesforce profile) their image on the left.

Note

Since not all users add a photo to their Salesforce profile, you may need to click several users to find a drawer that displays an image.