Prerequisites

AshishAnand · ‎2018 Oct 11

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!! 🙂

Overview Page (OVP) Stack card

Prerequisites

Card settings for stack card

QuickView Card

Conclusion

What Next?