Note: Nintex Apps data centers are located in West US and Australia (AUS). In-region processing of Nintex Apps data is only available in these regions.

Add a Record-Sensitive Image

Because the Image component is sensitive to record context, it's possible for Nintex Apps for 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 Nintex Apps for Salesforce
  • have an app page with a functioning model, in this case, on the User object and on that page, a table listing users by name.

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

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

  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.

  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:

    • Connector: Salesforce
    • Connection: Your Salesforce connection.
    • 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.