Skip to Content
Author's profile photo Krishna Kishor Kammaje

Fiori OVP: Navigation with context

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.

Assigned Tags

      13 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Pierfrancesco La Spada
      Pierfrancesco La Spada

      Hello Krishna,

      thanks for the blog!

      Where should I put the piece of code below

      //Event handler for event "initialized" of the SmartFilterBar. setNavigationParameters: function() { var oNavigationHandler = new NavigationHandler(this); //Note: This will not work in WebIDE var oParseNavigationPromise = oNavigationHandler.parseNavigation(); var oSmartFilter = this.getView().byId("smartFilterBar"); oParseNavigationPromise.done(function(oAppData, oStartupParameters, sNavType) { oSmartFilter.setDataSuiteFormat(oAppData.selectionVariant); }.bind(this)); }

      in the target application?

      I suppose a controller extension is needed, right?

      Thanks

      Author's profile photo Krishna Kishor Kammaje
      Krishna Kishor Kammaje
      Blog Post Author

      Code comment says it. 🙂

      It is the event handler in the target application for the SmartFilterBar event "initialized"

      Author's profile photo Pierfrancesco La Spada
      Pierfrancesco La Spada

      Hi Krishna, thanks for the answer.

      In an OVP created from template with WebIde where should that piece of code be written?

      I attached the folder structure available in my project.

       

      Thanks

      Author's profile photo Krishna Kishor Kammaje
      Krishna Kishor Kammaje
      Blog Post Author

      If your target application is an OVP, then you need a Controller extension. Code in this blog should help you. Just put your code in onBeforeRendering event.

      https://blogs.sap.com/2018/08/23/fiori-ovp-defaulting-values-into-global-filters/

      Author's profile photo Mark Castle
      Mark Castle

      Hi Krishna

      I'm trying to adopt your example for navigation from an OVP to an Analytical List Page.  I can't work out whereabouts in the Analytical List the code should be added.

      I've tried to adapt the OVP Controller extension example for use in an Analytical List Page (Fiori Elements template) but that hasn't got me anywhere.

      Would you be willing to share where the code should be placed?  I appreciate you have indicated in the code that it should be in the 'Event handler for event "initialized" of the SmartFilterBar.' but being fairly new to Fiori i'm not clear where this is.

      Author's profile photo Krishna Kishor Kammaje
      Krishna Kishor Kammaje
      Blog Post Author

      Hi Mark,

      I have not worked on ALP, but basic concepts should still be the same.

      Step 1. Create an extension controller as specified here.

      "sap.ui5": {
          "_version": "1.1.0",
          "extends": {
              "extensions": {
      	     "sap.ui.controllerExtensions": { // Controller extension
      	         "sap.suite.ui.generic.template.AnalyticalListPage.controller.AnalyticalListPage": { // ALP app view to be extended with controller
      	           "controllerName": "analytics2.alr.ext.controller.CustomFiltersController", // extended Controller declared using namespace

      Step 2. In the extension controller, preferably in 'onBeforeRendering' event, get reference to the SmartFilterBar, and set the filter values (aftre ensuring that the navigation was with context).

      Author's profile photo Anjanikumar Dubey
      Anjanikumar Dubey

      we are using intent based navigation, in our overview page. now we want to navigate to standard analytical application.

      below it he URL on which i want to navigate, can you please help me into this to pass Evaluation ID with Semantic Object and action.

      URL:-

      https://fiori-system_url:port/fiori#DaysPayablesOutstandingKPI-analyzeSBKPIDaysPayablesOutstanding?EvaluationId=.SAP.AP.DPO.LAST12MONTH

      where
      Semantic Object-DaysPayablesOutstandingKPI
      Action – analyzeSBKPIDaysPayablesOutstanding
      Additional we need to add in URL is – EvaluationId =.SAP.AP.DPO.LAST12MONTH

       

      BR,

      Anjani

      Author's profile photo Mike Heisenberg
      Mike Heisenberg

      Hi Krishna

      Thanks for your interessting Blog - very helpful. I have a problem with passing parameters from OVP to my target page. I have a "ColumnStacked" chart and want to pass all context parameters for the clicked item (consist of year and category). The only paramters which is passed is the dimension  value (Year).

       

      In this example parameter Year (2017) is passed, the value for category (80) doesn't work.

       

      Target link (only year is passing):

      I'm using itent based navigation and have configured my annotation as you in your example. But the Value for "CatAVal" (category) will not passed.

       

      Thanks

      Author's profile photo Mikhail Dryk
      Mikhail Dryk

      Hello Mike Heisenberg, I have same issue, did you find any solution to resolve it?

      Author's profile photo Hussain P
      Hussain P

      hi Mike Heisenberg,

      am also facing same issue, did you get the solution?

      Thanks & Regards

      Author's profile photo Krishna Kishor Kammaje
      Krishna Kishor Kammaje
      Blog Post Author

      Mike Heisenberg, , Hussain P , Did you guys explore using sap-xapp-state ?  That seems to be working always for me.

      Author's profile photo Ekansh Saxena
      Ekansh Saxena

      Hi Krishna,

      I had a similar requirement and your blog helped as always.

      Just wanted to mention for others, about the commented line in the code that it wouldn't work in WebIDE. It would work in WebIDE as well if cross app navigation is enabled between apps in WebIDE and are accessed from the FLPSandbox project. https://blogs.sap.com/2018/03/05/fiori-app-to-app-navigation-in-web-ide-full-stack/.

      BR, Ekansh

      Author's profile photo Makbule Merve Gul
      Makbule Merve Gul

      Hello All,

      I would be very appreciated if you can check it out my below post regarding OVP navigation issue that I am getting.

      https://stackoverflow.com/questions/65932256/cross-app-navigation-in-ovp-causes-the-column-disappear

      Best,

      Merve