Skip to Content

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.

To report this post you need to login first.

6 Comments

You must be Logged on to comment or reply to a post.

  1. 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

    (0) 
      1. 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

        (0) 
          1. 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.

            (0) 
            1. Krishna Kishor Kammaje 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).

              (0) 

Leave a Reply