Technical Articles
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>APPROVE}"/>
</Record>
<Record Type="UI.DataFieldForIntentBasedNavigation">
<PropertyValue Property="SemanticObject" String="Action"/>
<PropertyValue Property="Action" String="toappnavsample"/>
<PropertyValue Property="Label" String="{@i18n>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>SALES_ORDER}"/>
<PropertyValue Property="TypeNamePlural" String="{@i18n>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>CUSTOMER_ID}"/>
</Record>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="CustomerName"/>
<PropertyValue Property="Label" String="{@i18n>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>CUSTOMER_ID}"/>
</Record>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="GrossAmount"/>
<PropertyValue Property="Label" String="{@i18n>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!! 🙂
Hi Ashish,
What if I want to use the quickview card without the stack card?
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
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?
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
Hi Ashish Anand how to pass parameters without passing the intent ?
Hi akshaya parthasarathy ,
Use URL based navigation if indent is not desired and pass parameters.
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
Developer extension blog:
https://blogs.sap.com/2018/10/11/overview-page-ovp-developer-extension/
thanks
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
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
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
Hi Bhoomika Jain,
Please refer to the above code snippet mentioned in the blog
Hope it helps 🙂
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
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
}]
}
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
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.
Hi Ashish,
My launchpad runs on 1.71.4 SAPUI5 version. Any patch to fix it in this version?
Hi akshaya parthasarathy ,
This fix should be part of 1.71.25 when released.
Hope it helps 🙂
Thanks and Regards
Ashish
Thanks Ashish. I'll check that out