LWC - Dynamic Grid
The Dynamic Grid Lightning Web Component (LWC) provides a flexible solution to display data dynamically in a card format. The card’s layout can be configured through HTML templates. The LWC is powered through a robust framework to allow records from multiple data sources to be displayed. The data from each data source is displayed using a template that allows rich text content.
Configuration Options
Learn more about Experience Builder here.
From the components list, select the Dynamic Grid component and drag it onto the site page.
Click within the Dynamic Grid component on the page to bring up the Property editor.
Figure 1. Dynamic Grid LWC with configuration properties
Property | Details |
|---|---|
Dynamic Grid | Select a value from the drop-down to display the content.
Note: Additional Data Sources can be created based on the data to be displayed within the grid.
|
Title | Enter the text that you want to be displayed as the heading at the top. |
Columns to Display | Enter the numeric value (for example: 3). This field enables users to determine the maximum number of vertical columns to display. |
Rows to Display | Enter the numeric value (for example: 10). This field enables users to determine the number of horizontal rows to display on the initial load. |
Item Spacing | Select spacing preference between cards. Options are None, Small, Medium, and Large |
Allow More Data? | When checked additional data will be displayed. When unchecked, the maximum number of records displayed will be the number set in ‘Columns to Display’ times the number set in ‘Rows to Display’. |
More Data Method | Applicable when the 'Allow More Data?' property is checked. When checked, select the method for displaying additional records: Scroll: Loads additional data with mouse scroll. Button: Loads additional data upon clicking on “Load More” button. |
Animate on Hover | When checked the card zooms in on mouse hover. |
Example
Figure 2. Dynamic Grid page showing different product types on Experience Cloud Community Hub
Benefits
Flexibility and Customizability: The Dynamic Grid LWC ensures that admins can easily configure the properties to suit their specific requirements, and its customizability extends to letting associations personalize the kind of data they want to present in Experience Cloud Community Hub.
Enhanced Data visualization: The Dynamic Grid LWC not only provides the option to present data in an informative way but also in a visually compelling format ensuring that your members have an amazing experience as they navigate through Experience Cloud Community Hub.
Use other LWCs from the Component list to create an impactful page for your constituents. For eg. use the ‘Rich Content Editor’ to add supporting information about the donation and the specific cause your constituents would be supporting. For detailed steps on how to access and use Experience Builder, visit Experience Builder Overview (salesforce.com)
LWC Dynamic Grid can be used to display products for the New and Improved Lightning Store.
Get Started Today
Request to be enrolled in a pilot through the "Enroll in a Pilot" section on our NimbleLand Pilots page. Select the Experience Cloud Community Hub option from the Features drop-down.
Related
Lightning Web Components Library