Related Items
Configuring the Component
Jump to a Section:
- Properties
- Related Items
- Linked Detail Page
- Hidden Filters
- Header Styling
- Headline
- Subheadline
- Body Copy
- Load Button Styling
- Placement (Learn more about Placement settings)
Properties
| Property Name | Instructions |
|---|---|
| Component Name | It is a best practice to use only letters without spaces for the Component Name. Symbols, spaces, and numbers are not recommended. |
| Data Source to Display | Select from the dropdown options. A secondary field will appear based on the selected data source.
|
| Image | Set the image that will appear in the list. |
| Empty Image | If an image is not available based on the previous selection, this field allows Studio users to set a default image to appear. |
| Record Count | Select from the dropdown options how many records will appear on the initial page load. Additional records will appear as users scroll down the page. |
| Hide If Empty | Toggled on by default. |
| Sort Field | (optional) Select a data field that will sort the order of the results. |
| No Results Found Message | This message appears when the end user's search does not yield any results. Set custom text using the Rich Text Editor or select text from Content from Text. |
| Card Background Color | There are two ways to set the Color: Click the Color Swatch to choose from the Color Palette set in Branding, or enter the hex code in the text field. |
Related Items
To display Related Products, this Component must be on a product detail page and a data connection must be set up within Page Properties.
| Property Name | Instructions |
|---|---|
| Related Items Field | Select a data field from the dropdown. Options will be based on the data connection set up within Page Properties. |
| Connected Data Field | Select from the dropdown. Options will be based on the data connection set up within Page Properties. |
Linked Detail Page
| Property Name | Instructions |
|---|---|
| Detail Page | Set the record detail link end users will be directed to upon clicking a record from the Data List. |
| URL Parameter | Default set to 'did'. |
| Parameter Value | Leave this blank unless configuring a Salesforce data connection. |
Hidden Filters
Control what records appear from the connected data source by limiting results with hidden filters.
| Property Name | Instructions |
|---|---|
| Add Hidden Filters (button) | Use this button to add as many filters as required. Select data fields from the dropdown. Options will be based on the connected data source. |
Header Styling
| Property Name | Instructions |
|---|---|
| Minimum Height (px) | |
| Background Color | There are two ways to set the Color: Click the Color Swatch to choose from the Color Palette set in Branding, or enter the hex code in the text field. |
| Text | |
| Text Style | Select the font style set in Branding, or select 'custom' to set the font size and color. |
| Bold | Toggle on to bold the text. |
| Italics | Toggle on to italicize the text. |
| Left Padding (px) | Set the padding to the left of the header text. |
| Right Padding (px) | Set the padding to the right of the header text. |
| Top Padding (px) | Set the padding above the header text. |
| Bottom Padding (px) | Set the padding below the header text. |
| Icon Color | There are two ways to set the Color: Click the Color Swatch to choose from the Color Palette set in Branding, or enter the hex code in the text field. |
| Use Custom Icons | Toggle on to use icons that are set in the following properties. |
| Expand Icon | Select a .SVG file to use as the expand icon by either uploading a file or selecting it from Content. |
| Collapse Icon | Select a .SVG file to use as the collapse icon by either uploading a file or selecting it from Content. |
Headline
Configure what information is displayed as the headline for each result.
| Property Name | Instructions |
|---|---|
| Data Field | Set the text data field that will be used as the card headline for each result. |
| Text Style | Select the font style set in Branding, or select 'custom' to set the font size and color. |
| Bold | Toggle on to bold the headline text. |
| Italics | Toggle on to italicize the headline text. |
| Alignment | Select from the dropdown to set the headline text alignment. |
Subheadline
Configure what information is displayed as the subheadline for each result.
| Property Name | Instructions |
|---|---|
| Data Field | Set the text data field that will be used as the card subheadline for each result. |
| Text Style | Select the font style set in Branding, or select 'custom' to set the font size and color. |
| Bold | Toggle on to bold the subheadline text. |
| Italics | Toggle on to italicize the subheadline text. |
| Alignment | Select from the dropdown to set the subheadline text alignment. |
Body Copy
Configure what information is displayed as the body copy for each result.
| Property Name | Instructions |
|---|---|
| Data Field | Set the text data field that will be used as the card body copy for each result. |
| Text Style | Select the font style set in Branding, or select 'custom' to set the font size and color. |
| Bold | Toggle on to bold the body copy. |
| Italics | Toggle on to italicize the body copy. |
| Alignment | Select from the dropdown to set the body copy alignment. |
Load Button Styling
| Property Name | Instructions |
|---|---|
| Button Type | Set the button design by selecting from the dropdown list: Clear, Outline, or Solid. |
| Button Text | Set the text that will appear in the button by entering text, selecting text stored in Content, or text from the data connection. |
| Text Style | Select the font style set in Branding, or select 'custom' to set the font size and color. |
| Bold | Toggle on to bold the button text. |
| Italics | Toggle on to italicize the button text. |
| Background Color | There are two ways to set the Color: Click the Color Swatch to choose from the Color Palette set in Branding, or enter the hex code in the text field. |
| Button Size | Set the size of the button by selecting from the dropdown list: Default, Large, or Small. |
| Button Opacity (%) | Set the opacity of the button to a value between 1 to 100. A setting of 1 will make the component completely transparent and a setting of 100 is fully opaque. |
| Icon | Select the custom icon by uploading an image, selecting from Content, or using an image from the data connection. |
| Icon Alignment | Set the position of the icon on the button by selecting from the dropdown: Left or Right. |
| Icon Color | There are two ways to set the Color: Click the Color Swatch to choose from the Color Palette set in Branding, or enter the hex code in the text field. |
| Border Color | There are two ways to set the Color: Click the Color Swatch to choose from the Color Palette set in Branding, or enter the hex code in the text field. |
| Border Width (px) | Sets the border width in pixels, uses the Border Color property to set the color. |
| Border Radius | Sets how rounded the image corners appear by entering a number from 0 to 24. A setting of 0 will result in sharp corners and a setting of 24 will result in rounded corners. The default is set to 4. |
| Button Shadow | Toggle on to display a shadow behind the button. |
| Full Width | Toggle on to make the button appear across the full width of the page. |
| Horizontal Alignment | Set the button alignment by selecting from the dropdown: Center, Left, or Right. |
Placement
Format the alignment and padding around the Component. Learn more about Placement settings.
Component Set
The Data List Component is part of the Data Component Set. Learn How to Update to a New Version.