The Data Cards control provides an alternative option for displaying repeating data, compared to using a table approach. For each record in the data set, this control shows a box or card of information. These cards line up next to each other, wrapping on to new lines when needed, with each one containing multiple panels of data that the user can toggle through.
When this control is dragged onto a page, it will create a default structure with three panels in each card. As these panel groups will not have any content initially, using 'Design Mode', the 'Layout View' or 'Tree View' tab may be beneficial to see all the components. Any types of controls can be added to these panel groups (e.g. output fields, text boxes, etc.) to display the required information. All controls must be placed within a panel group, and not directly under the dataCard group.
If all three panels are not required, then the ones that are not required can simply be deleted. If additional panels are required, simply add a new Layout Group to the dataCard, and make sure the new group has a Background Styling class of dataCardPanel.
At runtime, a marker 'dot' will be rendered at the bottom of the card for each panel it contains. The user can click on a particular marker to show that panel's contents. By default, the user is also able to click anywhere on the card to advance to the next panel, but this can be disabled if required by removing the event from the card group.
If you wish to provide a tooltip for each panel marker to indicate its contents, this can be achieved by adding a 'Custom Attribute' to the panel group with the name data-wm-marker-title.