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

Overview Page (OVP) Stack card

Prerequisites

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

OVP stack card has two levels, at the top level, it shows the header, subheader, navigation link  counter of entity count:

on click of counter information, it opens a stream of QuickView cards with header, details and action footer for the entity. This object stream can show up to a maximum of 20 objects.

Card settings for stack card

"card9": {
				"model": "GWSAMPLE_BASIC",
				"template": "sap.ovp.cards.stack",
				"settings": {
					"title": "{{card9_title}}",
					"entitySet": "SalesOrderSet",
					"subTitle": "Open orders to approve",
					"addODataSelect": false,
					"objectStreamCardsSettings":{
						"annotationPath": "com.sap.vocabularies.UI.v1.Facets#stack"
					},
					"identificationAnnotationPath": "com.sap.vocabularies.UI.v1.Identification#header,com.sap.vocabularies.UI.v1.Identification#card"
				}
			}

The details for each QuickView card is coming from “objectStreamCardsSettings.annotationPath” card setting.

Also, one thing very interesting thing about stack card is that it requires 2 identification annotations. The first identificationAnnotationPath is used for navigation from the Stack Card itself. The second identificationAnnotationPath is used for navigation from the header and footer actions of QuickView Card.

If only one identificationAnnotationPath is provided, the same path is used for navigation from both Stack and QuickView Cards.

The annotation paths must be separated by a comma, with no spaces before or after either of the paths.

				<Annotation Term="UI.Identification" Qualifier="card">
					<Collection>
						<Record Type="UI.DataFieldForAction">
							<PropertyValue Property="Action" String="GWSAMPLE_BASIC.GWSAMPLE_BASIC_Entities/SalesOrder_Confirm"/>
						</Record>
						<Record Type="UI.DataFieldForAction">
							<PropertyValue Property="Action" String="GWSAMPLE_BASIC.GWSAMPLE_BASIC_Entities/SalesOrder_Cancel"/>
							<PropertyValue Property="Label" String="{@i18n&gt;APPROVE}"/>
						</Record>
						<Record Type="UI.DataFieldForIntentBasedNavigation">
							<PropertyValue Property="SemanticObject" String="Action"/>
							<PropertyValue Property="Action" String="toappnavsample"/>
							<PropertyValue Property="Label" String="{@i18n&gt;REJECT}"/>
						</Record>
					</Collection>
				</Annotation>
				<Annotation Term="UI.Identification" Qualifier="header">
					<Collection>
						<Record Type="UI.DataFieldForIntentBasedNavigation">
							<PropertyValue Property="SemanticObject" String="Action"/>
							<PropertyValue Property="Action" String="toappnavsample"/>
						</Record>
					</Collection>
				</Annotation>
				<Annotation Term="UI.HeaderInfo">
					<Record Type="UI.HeaderInfoType">
						<PropertyValue Property="TypeName" String="{@i18n&gt;SALES_ORDER}"/>
						<PropertyValue Property="TypeNamePlural" String="{@i18n&gt;SALES_ORDERS}"/>
						<PropertyValue Property="Title">
							<Record Type="UI.DataField">
								<PropertyValue Property="Value" Path="SalesOrderID"/>
							</Record>
						</PropertyValue>
						<PropertyValue Property="ImageUrl" String="sap-icon://sales-order"/>
						<PropertyValue Property="Description">
							<Record Type="UI.DataField">
								<PropertyValue Property="Value" Path="NetAmount"/>
							</Record>
						</PropertyValue>
					</Record>
				</Annotation>
				<Annotation Term="UI.FieldGroup" Qualifier="group2">
					<Record Type="UI.FieldGroupType">
						<PropertyValue Property="Data">
							<Collection>
								<Record Type="UI.DataField">
									<PropertyValue Property="Value" Path="CustomerID"/>
									<PropertyValue Property="Label" String="{@i18n&gt;CUSTOMER_ID}"/>
								</Record>
								<Record Type="UI.DataField">
									<PropertyValue Property="Value" Path="CustomerName"/>
									<PropertyValue Property="Label" String="{@i18n&gt;CUSTOMER_NAME}"/>
								</Record>
							</Collection>
						</PropertyValue>
					</Record>
				</Annotation>
				<Annotation Term="UI.FieldGroup" Qualifier="group1">
					<Record Type="UI.FieldGroupType">
						<PropertyValue Property="Data">
							<Collection>
								<Record Type="UI.DataField">
									<PropertyValue Property="Value" Path="SalesOrderID"/>
									<PropertyValue Property="Label" String="{@i18n&gt;CUSTOMER_ID}"/>
								</Record>
								<Record Type="UI.DataField">
									<PropertyValue Property="Value" Path="GrossAmount"/>
									<PropertyValue Property="Label" String="{@i18n&gt;CUSTOMER_ID}"/>
								</Record>
							</Collection>
						</PropertyValue>
					</Record>
				</Annotation>
				<Annotation Term="com.sap.vocabularies.UI.v1.Facets" Qualifier="stack">
					<Collection>
						<Record Type="com.sap.vocabularies.UI.v1.ReferenceFacet">
							<Annotation Term="com.sap.vocabularies.UI.v1.IsSummary"/>
							<PropertyValue Property="Label" String="Note"/>
							<PropertyValue Property="Target" AnnotationPath="@com.sap.vocabularies.UI.v1.FieldGroup#group1"/>
						</Record>
						<Record Type="com.sap.vocabularies.UI.v1.ReferenceFacet">
							<Annotation Term="com.sap.vocabularies.UI.v1.IsSummary"/>
							<PropertyValue Property="Label" String="Note1"/>
							<PropertyValue Property="Target" AnnotationPath="@com.sap.vocabularies.UI.v1.FieldGroup#group2"/>
						</Record>
					</Collection>
				</Annotation>

QuickView Card

The cards which come at the second level of stack card are of type QuickView card which displays information about one entity. Most of the time, it is not used as a stand-alone card in OVP but only either with stack card (by default) or with other cards (like the table, list and link list).

Quickview card is based on Contact annotation. In the following example, we will add quick view card for dynamic link list card which we created previously.

<Annotation Term="com.sap.vocabularies.Communication.v1.Contact">
					<Record>
						<PropertyValue Property="fn" Path="Products"/>
						<PropertyValue Property="title" Path="Name"/>
						<PropertyValue Property="org" Path="Description"/>
						<PropertyValue Property="role" Path="Description"/>
						<!-- <PropertyValue Property="photo" Path="Photo" />-->
						<PropertyValue Property="tel">
							<Collection>
								<Record>
									<PropertyValue Property="type" EnumMember="com.sap.vocabularies.Communication.v1.PhoneType/fax"/>
									<PropertyValue Property="uri" Path="Note"/>
								</Record>
								<Record>
									<PropertyValue Property="type"
										EnumMember="com.sap.vocabularies.Communication.v1.PhoneType/work com.sap.vocabularies.Communication.v1.PhoneType/pref"/>
									<PropertyValue Property="uri" Path="NoteLanguage"/>
								</Record>
							</Collection>
						</PropertyValue>
						<PropertyValue Property="email">
							<Collection>
								<Record>
									<PropertyValue Property="type"
										EnumMember="com.sap.vocabularies.Communication.v1.ContactInformationType/pref com.sap.vocabularies.Communication.v1.ContactInformationType/work"/>
									<PropertyValue Property="address" Path="SupplierID"/>
								</Record>
							</Collection>
						</PropertyValue>
					</Record>
				</Annotation>

 

Conclusion

We have learnt about stack card and quick view card and their card settings. We have also successfully created a stacked card and added a quick view card to our existing dynamic link list card.

What Next?

In the next blog, I’ll discuss different developer extension provided by OVP to an app developer. Stay Connected!! 🙂

Assigned tags

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

      Hi Ashish,

       

      What if I want to use the quickview card without the stack card?

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

      Hi Akshaya,

      Standalone quickview card is not supported in OVP. OVP is generally for showing overview data like list, KPIs, charts etc, But this quickview card shows summarized details of one entity. So i do not make sense to support for standalone quickview card in OVP.

      But technically, if you can find the internal annotation which quick view card uses, and put them perfectly in a card settings of your manifest. I can't think of a reason why it OVP should not render it. But again this is not the standard functionality which OVP offers.

      Thanks and Regards

      Ashish

      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy

      Thanks Ashish.I have one more question. I'm using datafieldforintentbased navigation, where I will navigate to another app in my launchpad.this app has the link to an external system. I want to pass parameters while navigation. How do I go about it?

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

      Hello!

      I have discussed passing navigation in indentBasedNavigation here

      https://blogs.sap.com/2018/10/11/overview-page-ovp-card-navigation-and-authorization/

      Hope it helps

      Thanks and Regards

      Ashish

      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy

      Hi Ashish Anand how to pass parameters without passing the intent ?

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

      Hi akshaya parthasarathy ,

      Use URL based navigation if indent is not desired and pass parameters.

       

      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy

      onCustomparams method doesnt get invoked at all. What should be done for it? Any blogs on extensibility please? I want to pass paramerters to datafieldwithURl annotation

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

      Developer extension blog:

      https://blogs.sap.com/2018/10/11/overview-page-ovp-developer-extension/

       

      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy

      thanks

      Author's profile photo Beni Madhab Kayal
      Beni Madhab Kayal

      Hi Ashish,

      Great blog post.

      I have a question. Can we add the objectstream with Quick view cards inside custom card button press, instead of a stack card.

      Thanks and Regards,

      Beni

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

      Hello Beni,

      Yes technically, it's possible. But you need to do it on your own as its a custom card. you can take reference to how OVP are creating that object stream on click of stack card.

      Thanks and Regards

      Ashish

      Author's profile photo Bhoomika Jain
      Bhoomika Jain

      Hi Ashish,

      Thanks for the blog.

      I am able to display data in cards, but how to handle the approve and reject actions in the cards? Could you please provide any sample code.

       

      Regards,

      Bhoomika

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

      Hi Bhoomika Jain,

       

      Please refer to the above code snippet mentioned in the blog

      <Collection>
      						<Record Type="UI.DataFieldForAction">
      							<PropertyValue Property="Action" String="GWSAMPLE_BASIC.GWSAMPLE_BASIC_Entities/SalesOrder_Confirm"/>
      						</Record>
      						<Record Type="UI.DataFieldForAction">
      							<PropertyValue Property="Action" String="GWSAMPLE_BASIC.GWSAMPLE_BASIC_Entities/SalesOrder_Cancel"/>
      							<PropertyValue Property="Label" String="{@i18n&gt;APPROVE}"/>
      						</Record>
      						<Record Type="UI.DataFieldForIntentBasedNavigation">
      							<PropertyValue Property="SemanticObject" String="Action"/>
      							<PropertyValue Property="Action" String="toappnavsample"/>
      							<PropertyValue Property="Label" String="{@i18n&gt;REJECT}"/>
      						</Record>
      					</Collection>

      Hope it helps 🙂

      Author's profile photo Bhoomika Jain
      Bhoomika Jain

      Hi Ashish Anand ,

      I was looking for adding custom actions and handling the logic.

      It is nicely explained in your next blog - OVP developer extension. Works well for my requirement.

       

      Regards,

      Bhoomika

      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy

      Hi Bhoomika and Ashish Anand

      Hav added custom actions for quick view cards. But it doesnt display. Any help?

       

      "objectStreamCardsSettings": {
      "annotationPath": "com.sap.vocabularies.UI.v1.Facets#stack",
      "showFirstActionInFooter": false,
      "customActions":[
      {
      "text": "press",
      "press": "press1",
      "position": 1
      }]
      }

      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy

      Hi Ashish,

      I have defined stack card as you have detailed. first time for a data with 3 items. I get the counter and items displayed correctly.

      second time my data has 4 records. But it displays only 3 quick view cards with a scroll but the 4th card is not displayed.

       

      The counter says 4 but the number od quickview cards displayed are 3 only. this happens when we first search for a RECORD WITH LESSER values and then search for another data with more items(3 and 4 in this case)

      it works fine the other way round. Can you help?@ashish anand

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

      Hi akshaya parthasarathy ,

      I think this was a known issue which got resolved previous month or so. Could you please test with the latest SAP UI5 version and check this if the issue persists.

      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy

      Hi Ashish,

      My launchpad runs on 1.71.4 SAPUI5 version. Any patch to fix it in this version?

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

      Hi akshaya parthasarathy ,

      This fix should be part of 1.71.25 when released.

      Hope it helps 🙂

      Thanks and Regards

      Ashish

      Author's profile photo akshaya parthasarathy
      akshaya parthasarathy

      Thanks Ashish. I'll check that out