Add and Display Images for a Single Record

Goal

For this tutorial, you’ll display images by creating a lookup relationship between Skuid’s File object and the Account object. You’ll also add the ability to upload images via the File Upload component.

Concepts covered

This tutorial uses Skuid SFX features to display images associated with a record on a page. For more information about these features, see the following:

View an account’s detail page

For this tutorial, we’re assuming you’ve already created a custom detail page in Skuid. If you haven’t, see Build a Custom Detail Page to get started.

Add a custom field to the Account object

SFX includes a custom object labeled “File” that allows you to connect attachments to specific fields. By creating a lookup relationship, you’re associating images in that object to a field in the Account object.

Note

You may see this field or this object called Image__c elsewhere. Image__c is the API name for the File object.

  1. In Salesforce setup for Lightning, click Objects and Fields, then Object Manager.

  2. Click the Account object’s label. A new page appears.

  3. Click Fields and Relationships. A list of fields appears.

  4. Click New. A new page appears.

  5. For data type, select Lookup Relationship.

  6. Click Next.

  7. For the related object, select File.

  8. Click Next.

  9. Enter the following field details:

    • Field Label: File
    • Field Name: File
    • Child Relationship: Accounts
  10. Click Next.

  11. Set field-level security as needed for your org. This determines what user profiles can view the field.

  12. Click Next.

  13. Select the page layouts that will include this field. This doesn’t affect anything in SFX; it only affects Salesforce’s standard UI. For more information, see Salesforce’s Page Layouts documentation.

  14. Click Next.

  15. Uncheck Add Related List for Image Layout and Append related list to users’ existing personal customizations.

  16. Click Save.

Add the field to your model

  1. Open Skuid.
  2. From the pages list, click your Account detail page. The Composer opens.
  3. Click the models Models tab.
  4. Click your Account model.
  5. Click on Fields under your Account model. A list of your Account fields displays.
  6. Check the box next to the new File field you just created.

Add components to your page

With your new model and a few components, you can display an image alongside your account details.

Add and configure a Responsive Grid

The Responsive Grid allows you to configure your page as a side-by-side layout.

  1. Click the components Component tab.
  2. Drag and drop a Responsive Grid on your page.
  3. Click the Add division button on your Responsive Grid.
  4. Click the left division.
  5. Set Maximum width to 200px.
  6. Drag and drop any existing page content to the right division.

Add and configure the File Upload component

The File Upload connects your new lookup field to the page, allowing you to upload and display an image alongside an account’s information.

  1. Click the components Component tab.

  2. Drag and drop a File Upload component to the left division in your Responsive Grid.

  3. Enter the following properties:

    • Parent model: Account
    • File storage location: In field on record
    • Display as: File preview/image
    • Field name: File__c
    • Default image: Org

Save and preview the page for a single record

Save and choose the Account record you want to preview

  1. Click Save.
  2. Click Preview.
  3. Select an Account from the list. The selected account’s Id field will be used to populate the condition we created that limits your page to a single account.
  4. Click Go.

If an image already exists for that account

The page displays with the existing image on the left side; account detail information appears on the right side.

If an image doesn’t exist for that account

  1. On the previewed page, click edit Edit. A file selector appears.
  2. Select the photo you want to associate with this account.
  3. Click Open.

That photo is now associated with the specific account record. You can edit or delete the photo by selecting edit Edit or delete Delete.

Deploy the page

After you’ve previewed your page and ensured it’s working properly, it’s time to deploy it to your end users. See our deployment docs for more information or check out our other page tutorials.