Skip to Content
Technical Articles
Author's profile photo Ashish Anand

Overview Page (OVP) Linklist cards

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

 

 

 

 

Assigned Tags

      8 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy

      Hi Ashish,

      thanks for this very useful Blog. I have a static link list card but I want to navigate to a URL that has s reference ID thats passed dynamically.

      Is it possible to configure dynamic links?

      Author's profile photo Ashish Anand
      Ashish Anand
      Blog Post Author

      Hi Akshaya,

      You can use "customParams" extension to configure it. But overall idea of having a static link list card it to have a static data, hence dynamic parameter does not make much sense in case static liink list, in those scenarios you can use dynamic link list card.

      Thanks and Regards

      Ashish

      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy

      Thanks for the inputs.

      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy

      Hi Ashish,

      For a static content to navigate to another tile should we use semantic object and action inside static content instead of target uri?

      what should the list flavour be?

      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy

      tried with static content and semantic action.din't work

      Author's profile photo Jisha Vijayan
      Jisha Vijayan

      I was also facing the same issue,  tried the following for semantic object navigation, but it did not work. 

      “staticContent”: [
      {
      “semanticObject”: “creditmanagement”,
      “action”: “Display”,
      }

      Then I tried concatenating the action with the semantic object and it worked then, you can try the same 🙂

      “staticContent”: [
      {
      “semanticObject”: “creditmanagement-Display”,
      “action”: “Display”,
      }

      Author's profile photo Dharun Kumar Sekar
      Dharun Kumar Sekar

      Hello Ashish,

      Thanks for the informative blog! We tried to implement Dynamic Link List Card in OVP. It's fetching the data from Backend successfully but not displaying in front end. We believe it's an issue @Annotation file. Below is the code. Could you please help on this ...

      Thanks in Advance !

      Entity Type = JobStatusCnt

      Fileds to Display - 1. Status 2. Count

      <edmx:Edmx xmlns:edmx="http://docs.oasis-open.org/odata/ns/edmx" Version="4.0">
      <edmx:Reference Uri="/sap/opu/odata/sap/ZPOC_TRHK_JLOG_SRV/$metadata">
      <edmx:Include Alias="Metadata" Namespace="ZPOC_TRHK_JLOG_SRV"/>
      </edmx:Reference>
      <edmx:DataServices>
      <Schema xmlns="http://docs.oasis-open.org/odata/ns/edm"/>
      <Annotations Target="Metadata.JobStatusCnt">
      <Annotation Term="com.sap.vocabularies.UI.v1.HeaderInfo" Qualifier="header1">
      <Record Type="com.sap.vocabularies.UI.v1.HeaderInfoType">
      <PropertyValue Property="TypeName" String="Status"/>
      <PropertyValue Property="TypeNamePlural" String="Status"/>
      <PropertyValue Property="Title">
      <Record Type="com.sap.vocabularies.UI.v1.DataField">
      <PropertyValue Property="Value" Path="Status"/>
      </Record>
      </PropertyValue>
      <PropertyValue Property="Description">
      <Record Type="com.sap.vocabularies.UI.v1.DataField">
      <PropertyValue Property="Value" Path="Count"/>
      </Record>
      </PropertyValue>
      <PropertyValue Property="ImageUrl" String="sap-icon://create-form"/>
      </Record>
      </Annotation>
      </Annotations>
      </edmx:DataServices>
      </edmx:Edmx>

       

      Manifest.json => Card

      "card08": {
      "model": "JLOG",
      "template": "sap.ovp.cards.linklist",
      "settings": {
      "title":"{{Title}}",
      "subTitle": "{{SubTitle}}",
      "listFlavor": "carousel",
      "entitySet": "JobStatusCntSet",
      "sortBy": "Status",
      "sortOrder": "ascending",
      "defaultSpan": {
      "rows": 20,
      "cols": 1 } } }

      Author's profile photo Sebastiano Marchesini
      Sebastiano Marchesini

      Hi Ashish Anand ,

      can I add a dynamic parameters for the static semantic navigation navigation on the card ?

      Thanks