Data List
Display a searchable list of results from a data set.
This Component is commonly used to display all products within a single Product Type. It is a single-page Component that enables end users to search and filter the results.
Configuring the Component
Design and customize the Data List Component to meet your needs.
Jump to a Section:
- Properties
- Linked Detail Page
- Related Items
- Styling
- Filters to Display
- Hidden Filters
- Headline
- Subheadline
- Body Copy
- Placement (Learn more about Placement settings)
Properties
Name your Component to easily identify it in the left-hand Content list. Set the data source and search field options.
| 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. |
| Search Field | Select the data field that will set the search bar parameters. When end users enter queries into the search bar the selected data field sets the search parameters. |
| Search Text | Enter Text or select Content from Text to set what appears in the search prompt. |
| 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. |
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. |
Related Items
The Data List Component can be used to display Related Products stored in Lumavate Products. 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. |
Styling
| Property Name | Instructions |
|---|---|
| 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. |
| Mobile Card Style | Select from the dropdown: Full Card or Short. |
| 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 (px) | 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. |
| Search Icon's 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 Search Icon | Toggle on to use a custom search icon. |
| Custom Search Icon | Select the custom icon by uploading an image, selecting from Content, or using an image from the data connection. |
| Filter Highlight 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. |
Filters to Display
Set up filters to help your digital experience users narrow the list of results.
| Property Name | Instructions |
|---|---|
| Add Select 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. |
| Filter Text | Set the brief message that appears above the filter options by entering text, selecting Content from Text, or using Text from 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. |
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. |
Placement
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.