Prerequisites

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

OVP Card Navigation

OVP cards support navigation at card header level and chart content level.

For list and table cards, Header navigation is done by identification annotation and Line item level navigation uses lineitem annotation respectively. Identification annotation is present and lineItem annotation does not have any navigation related annotation properties then line items will also navigate to the application where the header is configured to navigate.

For analytical cards, cards identification Annotation is used for both header and chart area navigation. navigation: “noHeaderNav” card setting is used by analytical cards to disable header navigation.

OVP cards support two types of navigation:

1. Intent-based Navigation: Used to navigate to an application deployed within the Fiori launchpad based on Semantic Object, Semantic action and Semantic Object parameters provided.
2. URL based Navigation: Mostly used to navigate to an external application on the basis of the URL provided.

Intent-Based Navigation

Before discussing Intent-based navigation lets talk about how navigation is done in Fiori. So generally URL of a Fiori application deployed in Fiori launchpad looks like:

https://<server>:<port>/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html#<semantic object>-<semantic action>?<semantic object parametes>

A semantic object represents a business entity. Usually, all the applications related to the same business entity have the same semantic object.

A semantic action represents an action like display, create etc.

Semantic action parameters are the parameters for the semantic object.

So let’s say I have created two applications one to create and edit sales order and another display sales order list and individual sale order. I’ll give semantic object “salesOrder” to both the applications. for creating sales order application I’ll have “create” as semantic action. and when I provide “?salesOrderID=1111567567” then it should open sales order with ID 1111567567 in edit mode. Similarly, for display sales order application, I will give “display” as the semantic action and when I pass “?salesOrderID=1111567567” then it should open sales order with ID 1111567567 in detail mode.

To configure header navigation in list card (the first card which we created with id “card01”), I have just added “identificationAnnotationPath” property to the existing card settings:

"card01": {
				"model": "GWSAMPLE_BASIC",
				"template": "sap.ovp.cards.list",
				"settings": {
					"title": "{{card01_title}}",
					"subTitle": "Standard List card - Standard flavour",
					"entitySet": "ProductSet",
					"listType": "condensed",
					"listFlavor": "standard",
					"sortBy": "Availability_Status",
					"sortOrder": "Descending",
					"annotationPath": "com.sap.vocabularies.UI.v1.LineItem",
					"identificationAnnotationPath": "com.sap.vocabularies.UI.v1.Identification#productHeader1",
					"addODataSelect": true,
					"stopResizing": false,
					"defaultSpan": {
						"rows": 5,
						"cols": 1,
						"showOnlyHeader": false
					}
				}
			},

Identification annotation in local annotation file looks like:

<Annotation Term="UI.Identification" Qualifier="productHeader1">
					<Collection>
						<Record Type="UI.DataFieldForIntentBasedNavigation">
							<PropertyValue Property="SemanticObject" String="Action"/>
							<PropertyValue Property="Action" String="toappnavsample"/>
						</Record>
					</Collection>
				</Annotation>

Since only header navigation is configured and lineitem annotation does not have any navigation related property then click line items will also behave the same as click on the header. To configure line item level following “DataFieldForIntentBasedNavigation” record should be added to existing line item annotation:

<Record Type="UI.DataFieldForIntentBasedNavigation">
							<PropertyValue Property="SemanticObject" String="Action"/>
							<PropertyValue Property="Action" String="toappnavsample2"/>
						</Record>

Navigation operation should supply the application with Navigation parameters, in order to launch the target application with the relevant context. When a card header is clicked, following details are passed to target application:

1. Global Filters and global analytical parameters.
2. Card Filters as defined in the selection variant.
3. Card Sorters like sortBy and sortOrder as defined in presentation variant.
4. Static parameters if defined for that card in app descriptor.
5. Global custom filters
6. Custom parameters

When a card line item is clicked, the context of the clicked line item is also passed in addition to the above data.

I’ll discuss custom filter and custom parameters when I’ll talk about extensibility topic.

Example of navigation in an analytical chart will be given when the Analytical chart topic is discussed in this blog.

Static parameter in intent-based navigation

If your card has IntentBasedNavigation then you can pass a static Parameter’s to the navigation application by adding the following manifest settings for the card:

"staticParameters": {
              "parameter1": "parameterValue1",
              "parameter2": "parameterValue2",
            },

URL based Navigation

For URL based navigation, com.sap.vocabularies.UI.v1.DataFieldWithUrl Annotation is used.

<Annotation Term="UI.Identification" Qualifier="productHeader2">
					<Collection>
						<Record Type="UI.DataFieldWithUrl">
							<PropertyValue Property="Url" String="www.google.com"/>
							<PropertyValue Property="Value" Path="ProductID"/>
						</Record>
					</Collection>
				</Annotation>

pointed the second card (“card02”) to above identification annotation:

"card02": {
				"model": "GWSAMPLE_BASIC",
				"template": "sap.ovp.cards.list",
				"settings": {
					"title": "{{card01_title}}",
					"subTitle": "Extended List card - Standard flavour",
					"entitySet": "ProductSet",
					"listType": "extended",
					"listFlavor": "standard",
					"sortBy": "Availability_Status",
					"sortOrder": "Descending",
					"annotationPath": "com.sap.vocabularies.UI.v1.LineItem",
					"identificationAnnotationPath": "com.sap.vocabularies.UI.v1.Identification#productHeader2",
					"addODataSelect": true,
					"stopResizing": false,
					"defaultSpan": {
						"rows": 5,
						"cols": 1,
						"showOnlyHeader": false
					}
				}
			},

Smart links in OVP cards

The SmartLink control uses a semantic object to display NavigationPopover for further navigation steps. To enable smart link for any entity attribute we need to provide the associated semantic object via the following annotation:

<Annotations Target="GWSAMPLE_BASIC.Product/ProductID">
				<Annotation Term="Common.SemanticObject" String="Action"/>
			</Annotations>

after adding the above annotation we will see, wherever the ProductID is used as dataField, it will be displayed as a smart link.

Authorization in OVP cards

You can control the visibility of any cards to a particular user based on user’s roles by “requireAppAuthorization” property of the card settings, the value of this property should be a combination of “#”<semantic object>”-“<semantic action>.

"requireAppAuthorization": "#sampleObject-sampleAction",

If the user has the permission to perform the sampleAction action on sampleObject object, then only this card will be visible to the user.

Conclusion

We have learnt about different settings and annotation used for navigation and authorization in OVP cards. We also learnt about smart links support in OVP application.

What Next?

In the next blog, I’ll discuss configuring Linklist card. Stay Connected !! 🙂