CardCollection¶
A card provides brief, related pieces of information and serves as an entry point, teaser, or preview to more detailed content. By pressing on the card, users can select the card and navigate to a dedicated page with more detailed information.
Card supports three layout styles: HorizontalScroll (Carousel), Masonry, and Vertical.
CardCollection Properties¶
| Property | Type | Required | Default |
|---|---|---|---|
| Card | Card | No | |
| Cards | array |
No | |
| DataPaging | DataPaging | No | |
| DataSubscriptions | DataSubscriptions | No | |
| EmptySection | EmptySection | No | |
| Footer | Footer | No | |
| Header | Header | No | |
| Layout | CardCollectionLayout | No | |
| MaxItemCount | integer |
No | |
| Search | Search | No | |
| Separators | Separators | No | |
| Target | LinkQueryFunctionTarget | No | |
| Visible | boolean |
No | true |
| _Name | string |
No | |
| _Type | const |
Yes |
Card¶
- type: Card
Cards¶
- type:
array
DataPaging¶
Configure the loading indicator shown at the end of the list, when loading next page of data.
- type: DataPaging
DataSubscriptions¶
Array of data change events to subscribe to.
- type: DataSubscriptions
EmptySection¶
A section that will be displayed when the list is empty. This only applies if you are using Target binding. Allows you to show custom label when the list is empty.
- type: EmptySection
Footer¶
Footer bar to be displayed below this control's content section.
- type: Footer
Header¶
Header bar to be displayed above this control's content section.
- type: Header
Layout¶
The layout of cards. Supports HorizontalScroll, Vertical, and Masonry for LayoutType.
- type: CardCollectionLayout
MaxItemCount¶
The maximum number of items to be displayed in the section. If MaxItemCount is not specified, then all records are
displayed in the section.
- type:
integer
Search¶
Defines if search is to be enabled in the ObjectCardCollection.
- type: Search
Separators¶
To provide more flexibility with rendering of controls and sections, set the visibility of the separator lines.
- type: Separators
Target¶
Definition of the target binding to dynamically populate the collection. You can also set this to binding/rule to return an array of data items.
Note: If this is set to binding/rule, you must return an array of data items, you can't return Target definition.
- type: LinkQueryFunctionTarget
Visible¶
Set the visibility of this control.
- type:
boolean - default:
true
_Name¶
- type:
string
_Type¶
- type:
const
The value of this property must be:
"Section.Type.CardCollection"
Examples¶
Dynamic Card Collection¶
{
"_Type": "Page",
"_Name": "CardCollectionPage",
"Caption": "Work Orders",
"Controls": [
{
"_Type": "Control.Type.SectionedTable",
"_Name": "SectionedTable",
"Sections": [
{
"Card": {
"_Type":"CardCollection.Type.Card",
"OnPress": "/MDKDevApp/Rules/Description.js",
"Media": {
"_Type":"Card.Type.Media",
"Image": "/MDKDevApp/Images/waterfall_panorama.png"
},
"Header": {
"Title":"{OrderId}",
"DetailImage":"/MDKDevApp/Images/workorder.png",
"DetailImageIsCircular":false,
"Subtitle":"{MainWorkCenter}",
"CounterText": "1 of 3",
"ActionButton": {
"Image": "sap-icon://share",
"_OnPress": "/MDKDevApp/Actions/Toast/ObjectCardMenuAction1.action",
"OnPress": "/MDKDevApp/Rules/Description.js",
"OverflowItems":[
{
"_Name":"menuAction1",
"Title":"Action 1",
"Image":"sap-icon://badge",
"Visible":true,
"OnPress": "/MDKDevApp/Rules/Description.js",
"_OnPress":"/MDKDevApp/Actions/Toast/ObjectCardMenuAction1.action"
},
{
"_Name":"menuAction2",
"Title":"Action 2",
"Image":"sap-icon://background",
"OnPress": "/MDKDevApp/Rules/Description.js",
"_OnPress":"/MDKDevApp/Actions/Toast/ObjectCardMenuAction2.action"
}
]
},
"ExtendedHeaders": [
{
"_Type": "ExtendedHeader.Type.Label",
"ItemSeparator": true,
"Items": [
{
"_Name": "CA_EHL_1a",
"Text": "Negative",
"Image": "sap-icon://warning",
"ImagePosition": "Trailing"
},
{
"_Name": "CA_EHL_2a",
"Text": "Critical"
}
]
},
{
"_Type": "ExtendedHeader.Type.Rating",
"Items": [
{
"_Name": "CA_EHR_1a",
"Score": 2,
"Label": "256 Reviews"
},
{
"_Name": "CA_EHR_2a",
"Score": 3,
"Label": "56 Reviews"
}
]
},
{
"_Type": "ExtendedHeader.Type.Tag",
"Items": [
{
"Text": "{ObjectType}",
"Color": "#00ff00",
"Style": "Tag1Syle"
},
{
"Text": "{ControlKey}",
"Color": "blue",
"Style": "Tag2Style"
}
]
}
],
"KPIView": {
"RightMetric": "999",
"RightUnit": "K",
"LeftMetric": "265",
"LeftUnit": "M",
"Footnote": "New KPIView"
}
},
"Footer": {
"_Type": "Card.Type.Footer",
"PrimaryAction": {
"_Type": "CardFooter.Type.Button",
"_Name": "submitButton1",
"Title": "Submit",
"ButtonType": "Primary",
"ImagePosition": "Leading",
"_OnPress":"/MDKDevApp/Actions/Toast/PrimaryActionMessage.action",
"OnPress": "/MDKDevApp/Rules/Description.js"
},
"SecondaryAction": {
"_Type": "CardFooter.Type.Button",
"_Name": "shareButton1",
"Title": "Share",
"Semantic": "Negative",
"_OnPress":"/MDKDevApp/Actions/Toast/SecondaryActionMessage.action",
"OnPress": "/MDKDevApp/Rules/Description.js"
}
}
},
"Layout":{
"LayoutType":"HorizontalScroll"
},
"_Name":"DynamicCardCollection1",
"_Type":"Section.Type.CardCollection",
"Target":{
"EntitySet":"MyWorkOrderHeaders",
"Service":"/MDKDevApp/Services/Amw.service",
"QueryOptions":"$orderby=OrderId"
}
}
]
}
]
}
Static Card¶
{
"_Type": "Page",
"_Name": "StaticCardCollectionPage",
"Caption": "Static Card Collection Page",
"Controls": [
{
"_Type": "Control.Type.SectionedTable",
"_Name": "StaticObjectCardCollectionTable",
"Sections": [
{
"Cards":[
{
"_Type":"CardCollection.Type.Card",
"OnPress": "/MDKDevApp/Rules/Description.js",
"Media": {
"_Type":"Card.Type.Media",
"Image": "/MDKDevApp/Images/waterfall_panorama.png"
},
"Header": {
"Title":"Title",
"TitleOnMedia":true,
"DetailImage":"/MDKDevApp/Images/workorder.png",
"DetailImageIsCircular":false,
"Subtitle":"Subtitle",
"CounterText": "1 of 3",
"ActionButton": {
"Image": "sap-icon://share",
"_OnPress": "/MDKDevApp/Actions/Toast/ObjectCardMenuAction1.action",
"OnPress": "/MDKDevApp/Rules/Description.js",
"OverflowItems":[
{
"_Name":"menuAction1",
"Title":"Action 1",
"Image":"sap-icon://badge",
"Visible":true,
"OnPress": "/MDKDevApp/Rules/Description.js",
"_OnPress":"/MDKDevApp/Actions/Toast/ObjectCardMenuAction1.action"
},
{
"_Name":"menuAction2",
"Title":"Action 2",
"Image":"sap-icon://background",
"OnPress": "/MDKDevApp/Rules/Description.js",
"_OnPress":"/MDKDevApp/Actions/Toast/ObjectCardMenuAction2.action"
}
]
},
"ExtendedHeaders": [
{
"_Type": "ExtendedHeader.Type.Label",
"ItemSeparator": true,
"Items": [
{
"_Name": "CA_EHL_1a",
"Text": "Negative",
"Image": "sap-icon://warning",
"ImagePosition": "Trailing"
},
{
"_Name": "CA_EHL_2a",
"Text": "Critical"
}
]
},
{
"_Type": "ExtendedHeader.Type.Rating",
"Items": [
{
"_Name": "CA_EHR_1a",
"Score": 2,
"Label": "256 Reviews"
},
{
"_Name": "CA_EHR_2a",
"Score": 3,
"Label": "56 Reviews"
}
]
},
{
"_Type": "ExtendedHeader.Type.Tag",
"Items": [
{
"Text": "Tag1",
"Color": "#00ff00",
"Style": "Tag1Syle"
},
{
"Text": "Tag2",
"Color": "blue",
"Style": "Tag2Style"
}
]
}
],
"KPIView": {
"RightMetric": "999",
"RightUnit": "K",
"LeftMetric": "265",
"LeftUnit": "M",
"Footnote": "New KPIView"
}
},
"Footer": {
"_Type": "Card.Type.Footer",
"PrimaryAction": {
"_Type": "CardFooter.Type.Button",
"_Name": "submitButton1",
"Title": "Submit",
"ButtonType": "Primary",
"ImagePosition": "Leading",
"_OnPress":"/MDKDevApp/Actions/Toast/PrimaryActionMessage.action",
"OnPress": "/MDKDevApp/Rules/Description.js"
},
"SecondaryAction": {
"_Type": "CardFooter.Type.Button",
"_Name": "shareButton1",
"Title": "Share",
"Semantic": "Negative",
"_OnPress":"/MDKDevApp/Actions/Toast/SecondaryActionMessage.action",
"OnPress": "/MDKDevApp/Rules/Description.js"
}
}
}
],
"Layout":{
"LayoutType":"HorizontalScroll"
},
"_Name":"StaticCardCollection1",
"_Type":"Section.Type.CardCollection"
}
]
}
]
}