Add a Record-Sensitive Image

Because the Image component is sensitive to record context, it’s possible for Skuid SFX 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 SFX
  • 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.

Enable the Drawer [[]]

Click anywhere on the table, and edit the Table Properties:

  1. On the Display tab, under Drawers, check Enable drawers.

Create a row action on the table [[]]

  1. In the body of the table, click Add Feature , then click Row Action and edit the Row Action’s properties:

    • Action label: View user details.
    • Action icon: Select an appropriate icon.

  2. Then, in the Actions tab, click add Add action four times and configure each action:

    • First action: Provide a message telling the users what’s happening.
      • Action type: Show message and block UI
      • Message: Working …
    • Second action: Opens the drawer and allows the user to view or edit user information.
      • Action type: Open/Close a Drawer
    • Third action: Saves changes made in the Drawer.
      • Action type: Save model changes
      • Models to save: the user model.
      • Roll back entire save on any error: Check.
    • Fourth action: Unblock the interface.
      • Action type: Unblock the UI

Now it’s time to configure the drawer itself.

Configure the drawer [[]]

  1. Back on the table component, click chevron-left at the beginning of the row of fields on the table. This opens the Drawer Properties. Edit:
    • Show drawer icon: Check
  2. Click Configure drawer.
  3. Add a Responsive Grid to the Drawer.
  4. Click Add division.
  5. Add a Form to the right side of the Responsive Grid.

Note

Forms are most easily read in Edit mode (General tab > Default mode).

  • Add fields, such as Full Name, Last Login, and Email to the Form.
  • Make any desired adjustments to the component spacing on the Form Properties Styles tab.

  1. Add an Image component to 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.
    • Make any desired adjustments to the component spacing on the Image Properties Styles tab.

    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.

View the results

  1. Click Save and then Preview.
  2. In the User table, click the row action 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.