Fiori OVP: Navigation with context

[kammaje_cis]

I was experimenting with Fiori Overview Pages and struggled a lot to achieve the right navigation when clicking on an OVP card and charts inside it. The goal was to click within a stacked-bar chart (or any other card) and

"navigate with the context of the chart along with the Global-filters".

I debugged SAP delivered OVPs to understand how they are achieving it and came across a concept of "sap-xapp-state" which is not yet covered in any detail in SAP documentation. In this blog, I explain how to use it.

Consider a Global Filter as below. Note that date is a range here and others are multi-value filters.



Consider a stacked-chart as below.



Now, when I click on any of the bars, I want to carry the context of Score and Status from the clicked bar, along with the date-range in the Global filter. That would be ideal.

According to available documentation, for context-specific navigation, you need to specify the Identification annotation as below and specify this annotation in card configuration. (in manifest.json).

<Annotation Term="UI.Identification" Qualifier="Chart-Navigation">

	<Collection>

		<Record Type="UI.DataFieldForIntentBasedNavigation">

			<PropertyValue String="ZSQRMBWA" Property="SemanticObject"/>

			<PropertyValue String="showApplication" Property="Action"/>

			<PropertyValue Property="RequiresContext" Bool="true"/>

		</Record>

		<Record Type="com.sap.vocabularies.UI.v1.DataField">

			<PropertyValue Property="Label" String="Status"/>

			<PropertyValue Property="Value" Path="StatusId"/>

		</Record>

		<Record Type="com.sap.vocabularies.UI.v1.DataField">

			<PropertyValue Property="Label" String="Score"/>

			<PropertyValue Property="Value" Path="ScoreId"/>

		</Record>					

	</Collection>

</Annotation>

This worked well, and I started getting these parameters in the URL. But the problem was with the Date-Range global filter. It was getting ignored.

There was also a problem with other global filters, whenever I had more than one values in them (multi-value filters). In such cases, those filters were also getting ignored. By debugging the UI5 code, I found that whenever a filter had more than one value, be it a range or multi-input, then that filter was getting ignored for URL parameters, This might be because of complexities involved in creating a URL in such cases.

However, URL had one other peculiar URL parameter called sap-xapp-state. I debugged SAPUI5 code to find that this is the solution to my problem. The URL parameter looks like this. sap-xapp-state=AS4HRFQDC01V6RWJY30ENTN5R1YN0P5HO7IUPQV3

This parameter is generated and handled in UI5 by a new class called sap.ui.generic.app.navigation.service.NavigationHandler for navigation, which can be accessed at /sap/bc/ui5_ui5/ui2/ushell/resources/sap/ui/generic/app/navigation/service/NavigationHandler-dbg.js

What does this parameter contain?

sap-xapp-state URL parameter contains a reference to the application state. Once in the target application, the target application can use this parameter value to access the context and set the state. By this strategy, the application is no longer constrained by passing the context in the URL.

So now let us assume that we have all the required context in this parameter. Next question is,

How do we access the navigation context in target application/view?

If the target application is an application containing a SmartFilter, you have hit a gold mine. All you have to do is the below code to set the SmartFilter (in the target application). In the below code 'setNavigationParameters' is the event handler for 'initialized' event of the SmartFilterBar.

//Event handler for event "initialized" of the SmartFilterBar.

setNavigationParameters: function() {

	//Note: This will not work in WebIDE

	var oNavigationHandler = new NavigationHandler(this); 

	var oParseNavigationPromise = oNavigationHandler.parseNavigation();

	var oSmartFilter = this.getView().byId("smartFilterBar");



	oParseNavigationPromise.done(function(oAppData, oStartupParameters, sNavType) {

		//Set the filter values. 'true' ensures that existing filters are overwritten

		oSmartFilter.setDataSuiteFormat(oAppData.selectionVariant, true);

		}.bind(this));

}

Where NavigationHandler =  "sap/ui/generic/app/navigation/service/NavigationHandler"

Ensure that filter property have the same name in the current entity and the source entity.

What if I am not using a SmartFilter in the target application?

You can easily access the context using below code (within the 'done' promise of oParseNavigationPromise in the above snippet) and use it as desired.



 

Note that this is not an OVP specific concept, rather you can use it to do any complex navigations. Study the NavigationHandler to find out how to generate sap-xapp-state and how this actually works.

Hope you enjoyed this blog. Let me know your thoughts.