SAP Fiori Overview Page – Navigation concepts

As you get your Overview Page application(OVP) ready with additional cards, you would next look for navigation from this overview information to complete the Insight to Action.

OVP supports navigation to other applications on click within card elements. To be specific, you can have a navigation defined at the card header, another defined for line items (table/list card) and for data points from a chart card. In all these cases, the navigations are defined in the following 2 annotations:

1. com.sap.vocabularies.UI.v1.DataFieldForIntentBasedNavigation
2. com.sap.vocabularies.UI.v1.DataFieldWithUrl

Intent Based Navigation

Intent based navigation is a concept provided by the Fiori Launchpad, To define Intent based navigation, you would have to specify the SemanticObject and Action. This combination is the “intent” of navigation, a sample is as follows:

http://<server>:<port>/<path>/FioriLaunchpad.html#AppArea-overview

Steps to set up navigation can be found here

Sample Annotation:

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

It may happen that you end up with an error on navigation using Semantic Object and action. The easiest way to validate this is to check if the url

http://<server>:<port>/<path>/FioriLaunchpad.html#SampleSemanticObject-SampleAction works fine.

If this does, then the corresponding navigation from OVP should work fine as well.

URL Based Navigation

To navigate to any other url either hardcoded or computed at runtime, this annotation can be used

Eg: www.google.com

Sample Annotation:

<Record Type="UI.DataFieldWithUrl">
    <PropertyValue Property="Url" String="www.google.com"/>
    <PropertyValue Property="Value" String="Search"/>
</Record>

This also allows parameters to be passed as shown below:

<Record Type="com.sap.vocabularies.UI.v1.DataFieldWithUrl">
    <PropertyValue Property="Label" String="Link to"/>
    <PropertyValue Property="Value" String="Google Maps"/>
    <PropertyValue Property="Url">
        <Apply Function="odata.fillUriTemplate">
            <String>https://www.google.de/maps/place/{street},{city}</String>
            <LabeledElement Name="street">
                <Apply Function="odata.uriEncode">
                    <Path>Address/Street</Path>
                </Apply>
            </LabeledElement>
            <LabeledElement Name="city">
                <Apply Function="odata.uriEncode">
                    <Path>Address/City</Path>
                </Apply>
            </LabeledElement>
        </Apply>
    </PropertyValue>
</Record>

Card Header Navigation

Navigation from card headers require you to define the annotation within Identification annotation, eg as follows:

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

Line Item Navigation

And in case of navigation from line item(applicable for list/table card) the annotation needs to be within lineitem annotation as shown below:

<Annotation Term="UI.LineItem">
	<Collection>
		<Record Type="UI.DataFieldForIntentBasedNavigation">
			<PropertyValue Property="SemanticObject" String="SampleSemanticObject"/>
			<PropertyValue Property="Action" String="SampleSemanticAction"/>
		</Record>
	</Collection>
</Annotation>

Navigation concept for stack cards

In case of stack cards, where you may need to navigate to different targets from left side of stack card, and from the quick view card header you can use the identification annotation with comma separated values as shown below:

"demo_OVPNavigationDemo_card01": {
	"model": "Northwind",
	"template": "sap.ovp.cards.stack",
	"settings": {
		"title": "{{demo_OVPNavigationDemo_card01_title}}",
		"entitySet": "Employees",
		"identificationAnnotationPath": "com.sap.vocabularies.UI.v1.Identification#stackHeader,com.sap.vocabularies.UI.v1.Identification#quickView"
	}
}

The first identificationAnnotationPath is used for navigation from the left side of the Stack Card. The second identificationAnnotationPath is used for navigation from the header and footer actions of QuickView Cards.

Navigation concept for Analytic cards

Starting SAPUI5 version 1.50, Analytic cards support Header Navigation and Data Point Navigation from chart area. Header navigation is same as defined for other cards. Data Point Navigation will lead to navigation to the same application as defined for the card header, but with selected data point as navigation parameter.

"demo_OVPNavigationDemo_card03": {
	"model": "Northwind",
	"template": "sap.ovp.cards.charts.analytical",
	"settings": {
		"title": "{{demo_OVPNavigationDemo_card03_title}}",
		"entitySet": "Employees",
		"chartAnnotationPath": "com.sap.vocabularies.UI.v1.Chart",
		"identificationAnnotationPath": "com.sap.vocabularies.UI.v1.Identification"
	}
}

Navigation parameters

Navigation parameters are supported 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 selection variant.
3. Card Sort conditions as defined in presentation variant.
4. Global custom filters provided from application breakout (Breakout function name: “getCustomAppStateDataExtension”).
5. Custom parameters provided from application breakout (Breakout function name: “onCustomParams”).

On click of a line item in the OVP card, the context of the clicked line item is also passed in addition to the above data. And in case of chart cards, that of the selected data point.

Hope this helps to clear queries related to Navigation concepts for SAP Fiori Overview Pages. Look forward to your comments and feedback.