Overview Page (OVP) Linklist cards

[AshishAnand]

prerequisites

Make sure you have been to the previous blog of this blog series.

The link list card allows you to display a list of links with an optional picture or icon and an optional subtitle for each of the links. There are two flavours of link list cards:

1. standard: displays the data in a list.


2. carousel: displays the data as a carousel.

unlike other OVP cards, link list cards allow the application developer to provide static data for the link list card in the manifest.json file. This type of link list cards is also called static link list card. And if the data is dynamic i.e. coming from OData service, then it's called dynamic link list card.

Supported Navigation

link list cards display a list of links, so it's very important to understand the types of navigations supported by this card:

1. Intend based navigation


2. URL based (external) navigation


3. Quick view cards

I have discussed navigation in older blogs of this blog series. and I'll discuss Quickview cards in my next blog of this blog series.

Static link list card

Following are the card settings for link list standard static link card:

			"card07": {

          "model": "GWSAMPLE_BASIC",

          "template": "sap.ovp.cards.linklist",

          "settings": {

            "title": "Quick Links",

            "subTitle": "Most commonly used actions",

            "listFlavor": "standard",

            "targetUri": "https://en.wikipedia.org/wiki/Mangalyaan_2",

            "defaultSpan": {

              "rows": 15,

              "cols": 1

            },

            "staticContent": [

              {

                "title": "Create Supplier",

                "imageUri": "sap-icon://add-contact",

                "imageAltText": "Create Supplier",

                "targetUri": "https://sap.com",

                "openInNewWindow": true

              },

              {

                "title": "Create Purchase Order",

                "imageUri": "sap-icon://sales-document",

                "imageAltText": "Create Purchase Order",

                "targetUri": "https://sap.com",

                "openInNewWindow": true

              },

              {

                "title": "Manage Purchase Orders",

                "imageUri": "sap-icon://sales-order-item",

                "imageAltText": "Manage Purchase Orders",

                "targetUri": "https://sap.com",

                "openInNewWindow": true

              },

              {

                "title": "Manage Purchase Requisitions",

                "imageUri": "sap-icon://list",

                "imageAltText": "Manage Purchase Requisitions",

                "targetUri": "https://sap.com",

                "openInNewWindow": true

              },

              {

                "title": "Create Contract",

                "imageUri": "sap-icon://credit-card",

                "imageAltText": "Create Contract",

                "targetUri": "https://sap.com",

                "openInNewWindow": true

              },

              {

                "title": "Create Purchase Requisition",

                "imageUri": "sap-icon://create-form",

                "imageAltText": "Create Purchase Requisition",

                "targetUri": "https://sap.com",

                "openInNewWindow": true

              }

            ]

          }

        }

If the card is Static LinkList with list Flavour as standard then inside staticContent semanticObject and action properties define IntentBasedNavigation for that particular line Item.

You just change the listFlavor setting to "carousel" and we have a carousel static link list card.

Dynamic link list card

Dynamic link list cards are defined by HeaderInfo annotations.

<Annotations Target="GWSAMPLE_BASIC.Product">

				<Annotation Term="com.sap.vocabularies.UI.v1.HeaderInfo" Qualifier="header1">

					<Record Type="com.sap.vocabularies.UI.v1.HeaderInfoType">

						<PropertyValue Property="TypeName" String="Product"/>

						<PropertyValue Property="TypeNamePlural" String="Products"/>

						<PropertyValue Property="Title">

							<Record Type="com.sap.vocabularies.UI.v1.DataField">

								<PropertyValue Property="Label" String="Product Name"/>

								<PropertyValue Property="Value" Path="Name"/>

							</Record>

						</PropertyValue>

						<PropertyValue Property="Description">

							<Record Type="com.sap.vocabularies.UI.v1.DataField">

								<PropertyValue Property="Label" String="Product Description"/>

								<PropertyValue Property="Value" Path="Description"/>

							</Record>

						</PropertyValue>

                        <PropertyValue Property="TypeImageUrl"

                                       Path="ImageUrl"/>

					</Record>

				</Annotation>

card settings:

"card08": {

				"model": "GWSAMPLE_BASIC",

				"template": "sap.ovp.cards.linklist",

				"settings": {

					"title": "Standard Dynamic Linklist Card",

					"targetUri": "https://en.wikipedia.org/wiki/Mangalyaan_2",

					"subTitle": "Smartlink Feature Test",

					"listFlavor": "standard",

					"entitySet": "ProductSet",

					"sortBy": "Name",

					"sortOrder": "ascending",

					"headerAnnotationPath": "com.sap.vocabularies.UI.v1.HeaderInfo#header1",

					"defaultSpan": {

						"rows": 20,

						"cols": 2

					}

				}

			}

Important: like list or table cards, link list card do not have any counter information, so always set the rowspan for standard link list card very wisely. Otherwise, the end user may never know what hidden under the carpet.

Conclusion

We were able to create Dynamic and static link list card with navigation.

What Next?

In the next blog, I’ll discuss configuring OVP’s stack and quick view card. Stay connected !! 🙂

Related Blogs

Overview Page (OVP) list and table card

Overview Page (OVP) Card headers

Overview Page (OVP) Card navigation and authorization