Show Records in Tiles in Experience Cloud

Allow experience users to select a record by clicking on a joy-filled image instead of choosing from a boring old list view. Spark joy by adding records to a CMS Collection and adding fields to the object for your image, tagline, etc. and creating a (behind the scenes) boring old list view.

This example is for a community foundation – a nonprofit that helps donors give their money to other organizations that match their passions, like the Seattle Foundation or the Columbus Foundation. Above we see a selection of LGBTQIA organizations and below Animal Welfare orgs.

Ready to start building? Let’s go!

1. In the CRM
   • Create New Fields on Account. Make sure they are visible to profiles of experience users.
     1. One URL field called Image URL for the URL of the image (obvs).
     2. One URL field called Record Detail Link. This link will take the user back to the record detail page.
     3. One Text Area field called Mission. I will display the organization’s mission on the tile.
   • Set up the images you want to use in your tiles.
     1. Start with one account, for example Cedar River Clinics, and choose an image you want to use on that tile. Grab the URL of the image location either from a website or from the Salesforce file.
     2. Paste the URL as the value for the new field you created, Image URL, on the Cedar River Clinics record.
     3. Repeat for all your tiles. I’d recommend making a spreadsheet and importing it. That will make the next step easier, too!
   • Populate the new field Record Detail Link on your account records. This will take the user to the record detail page for that account in the experience. I recommend exporting your 18 digit ids, and the name of each organization, then using Excel formulas to make these URLs then importing them back in. Example: https://myORGURL.force.com/donorexperience/s/account/0018a00001onHN6AAM/cedar-river-clinics. The formula would be built like this: org url + “force.com/” + the name of your experience + “/s/account” (or whatever object you’re using) + 18 digit id + “/” + name of the account with “-” between the words.
   • I use the field Type to say “Nonprofit” as a flag on each record. You can create another field that’s picklist or text to make it say something else.
   • Create a List View on Account and filter it to the records that you want displayed as tiles. Select the following fields to be displayed in the list view:
     1. Name
     2. Mission
     3. Image URL
     4. Record Detail Link
     5. Flag

1. In Your Experience Site
   1. Add Object to Approved List
      1. From your Experience Site, go to Workspaces —> Content Management —> Content Tab (should be the default) —> Salesforce CRM —> Add CRM Connections then select the Account object.
   2. Create a new collection
      1. You’re still in Content Management. Click on the Collections Tab —> New Collection, then name your collection and click Salesforce CRM. Click Next. Choose Account, and choose the list view you just created.
   3. Add the URL for the images you want to use as trusted sites.
      1. Go to your Experience Builder —> Settings —> Security & Privacy.
      2. Under Trusted Sites for Scripts, click on “+Add Trusted Site” and add the base URL of the image URL. I took all my images from Flickr so i’m adding https://live.staticflickr.com as a trusted site.
      3. Then under Trusted Sites for Scripts click on the link to CSP Trusted Sites. Add a new trusted site for the base URL.
   4. Go to the Experience site page where you will display the tiles. I made a new page for animal welfare related organizations.
      1. Drag a CMS Collection component onto the page.
         1. Click +Add Collection.
         2. Select the collection you created earlier and Save.
         3. Under Collection Layout, I choose Strip.
         4. Under Content Layout, I chose Banner.
         5. Expand Field Mappings.
            1. See image above with field mappings. If you’re not seeing a field here, check that it’s in your list view and that you set up your visibility correctly.
         6. Under Links, click Customize to map the Headline.
            1. Choose your field RecordDetailLink. Save. This links the name of your organization (your headline) to the record detail page for this account.
            2. Then choose Button Text from the picklist and click Customize. Map your button to the same field on the record if you want to link somewhere else like to a giving page.

And that’s it! Publish your page. Now you’ll have a good looking tile view of your records. There are many, many more ways to customize your tiles, but this will give you the basics.

To replicate the click path you see in the video, create these items:

• Home page with Tile Menu for categories of organizations
• One page specific to each category of organization where you build out the record tiles as explained above. You need to make a separate page for Animal Welfare, LGBTQIA, etc.
• A Record Detail page that is reused for each record detail