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
Create a row action on the table [[]]¶
- In the body of the table, click
- Action Type: Drawer.
- Action Label: View user details.
- Action Icon: sk-icon-arrow-right
- Drawer Opened Icon: sk-icon-arrow-left
Row Action and edit the Row Action’s properties:
Now it’s time to configure the drawer itself.
Configure the drawer [[]]¶
In the Table Actions pane, click Configure Drawer.
Add a Responsive Grid to the Drawer.
Click
Add Division.Add a Field Editor to the right side of the Responsive Grid.
- Add fields, such as Full Name, Last Login, and Email to the Field Editor.
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.
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) [[]]¶
- While still in the drawer, and with the focus on the Image component, click the Styles tab.
- Click Size.
- Click Width > Custom, and in the Width field, change the setting to 300 px.
- Click the X in the corner to close the drawer.
View the results¶
- Click Save and then Preview.
- 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.