Skip to Content

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.

To report this post you need to login first.

30 Comments

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

  1. Abhi S

    Thanks for sharing the info. I have one question

    You mentioned in the blog “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”

    Can you please share any example where I can do navigation based on data point. I have a column chart and would like to navigate by passing the parameters.

     

    Thanks!

    Abhi

     

     

    (0) 
    1. Prasita Prabhakaran Post author

      Hi Abhi,

      If you are using DataFieldForIntentBasedNavigation the dimension of the selected DataPoint will be passed on to the navigating app by default.

       

      (0) 
      1. Pierfrancesco La Spada

        You mentioned in the blog “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”

        Two questions Prasita Prabhakaran:

        1. I see navigation from analytical cards (charts) is working also in UI5 version 1.42. I experienced it in Procurement Overview Page app; are there new features related to analytical cards navigation using UI5 version 1.50 or upper ?
        2. I am trying to implement DataPoint navigation for a Line Analytical Chart but I have a few problem. Is the Identification qualifier mandatory for the specific card in the manifest file for dataPoint navigation? In which position of the annotation file should the “ >Record Type=“UI.DataFieldForIntentBasedNavigation”> ” (containing semantic object and action) annotation be placed? I tried to position it into the  <Annotation Term=“UI.Chart” Qualifier=“SpendTrend”> but it didn’t work.

        Thanks for your help

        (0) 
        1. Prasita Prabhakaran Post author

          Regarding question 1. until UI5 version 1.50 chartNavigation would lead to the same target as the header.

          Starting 1,50 only header navigation is possible and the chart navigation will be disabled. Navigation type “chartNav” will not be possible now and is deprecated.

          The following property is set in the “settings” of the manifest file to achieve this. Not setting this property will result in the default data point navigation.

          “navigation” : “headerNav”

           

          Regarding query 2, this should be part of the identificationAnnotation:

          Eg:

          <Annotation Term="UI.Identification" Qualifier="Eval_by_Currency_Scatter">
             <Collection>
                <Record Type="UI.DataFieldForIntentBasedNavigation">
                   <PropertyValue Property="Label" String="Go to Procurement Overview Page application" />
                   <PropertyValue Property="Criticality"
                      EnumMember="UI.CriticalityType/Positive" />
                   <PropertyValue Property="SemanticObject" String="OVP" />
                   <PropertyValue Property="Action" String="Procurement" />
                </Record>
             </Collection>
          </Annotation>
          (1) 
  2. GAURAV SARDANA

    Hi Prasita,

    Can you provide an example for geolocations embedding in cards or overview page ? That would really helpful for me.

    Thanks in Advance.

    Gaurav

    (0) 
    1. Prasita Prabhakaran Post author

      Hi Gaurav,

      This would call for a custom card as of now. No standard examples are available.

      You can find info on custom cards here: https://help.sap.com/viewer/468a97775123488ab3345a0c48cadd8f/7.52.1/en-US/6d260f7708ca4c4a9ff45e846402aebb.html

       

      (0) 
  3. Kaan Ozdogan

    Hi Prasita,

    We created custom cards and get data from XSJS services.

    How can append XSJS services to xsodata service? Is it possible?

    If no,

    How can we create annotation file for these XSJS services?

    I want to create annotation file for routing new page or application when card is pressed.

    Another question is that how can I refresh cards auto ?

     

    Best Regards,

    Kaan.

     

    (0) 
    1. Prasita Prabhakaran Post author

      Hello Kaan,

      I am not an expert with services, but for auto refresh of cards in OVP we have a manifest setting. Starting UI5 version 1.48 you can use refreshIntervalInMinutes in the manifest.json, to set the refresh interval(in minutes)

      The property should have a value more than or equal to 1 minute. If the refresh interval is set to less than 1, then the interval will be considered as 1 minute. If the value is more than 1, then the refresh interval is taken as specified by the user. After the specified minutes, the models will be refreshed and the card data will be reloaded.

      (0) 
  4. Vijay Sharma

    Hi Prasita,

    I need your help Please.

    I have created an Overview page using Web Ide and I want to navigate to my custom KPI app on clicking the data point on analytical card. When I click on the card I get the error message “Navigation to this application is not supported.”

    I searched about it but no luck . Please help to resolve this issue.What I have done is:

    – Provided the Semantic object and action of my KPI app under the UI identification annotation

    -created KPI app and is existing on the Launchpad and is running fine

    Below is the code snippet from Manifest.Jason of my OVP

    “card02”: {
    “model”: “ZS4_ENCONS_CDS”,
    “template”: “sap.ovp.cards.charts.analytical”,
    “settings”: {
    “title”: “{{card02_title}}”,
    “subTitle”: “{{card02_subTitle}}”,
    “entitySet”: “ZS4_ENCONS”,
    “selectionAnnotationPath”: “com.sap.vocabularies.UI.v1.SelectionVariant”,
    “chartAnnotationPath”: “com.sap.vocabularies.UI.v1.Chart#ANNEBR”,
    “dataPointAnnotationPath”: “com.sap.vocabularies.UI.v1.DataPoint#EMPDBR”,
    “identificationAnnotationPath”: “com.sap.vocabularies.UI.v1.Identification#EMPDBR”,
    “navigation”: “dataPointNav”
    }
    },

    Below is snippet from Annotation file

    <Annotations Target=”ZS4_ENCONS_CDS.ZS4_ENCONSType”>
    <Annotation Term=”UI.Identification” Qualifier=”EMPDBR”>
    <Collection>
    <Record Type=”UI.DataFieldForIntentBasedNavigation”>
    <PropertyValue Property=”SemanticObject” String=”empdetails”/>
    <PropertyValue Property=”Action” String=”analyzeSBKPIDetails”/>
    </Record>
    </Collection>
    </Annotation>
    <Annotation Term=”UI.Chart” Qualifier=”ANNEBR”>
    <Record Type=”UI.ChartDefinitionType”>
    <PropertyValue Property=”ChartType” EnumMember=”UI.ChartType/Bar”>
    <Annotation Term=”Common.Label” String=”Enabled by Region”/>
    </PropertyValue>
    <PropertyValue Property=”Measures”>
    <Collection>
    <PropertyPath>EnabledResources</PropertyPath>
    </Collection>
    </PropertyValue>
    <PropertyValue Property=”MeasureAttributes”>
    <Collection>
    <Record Type=”UI.ChartMeasureAttributeType”>
    <PropertyValue Property=”Measure” PropertyPath=”EnabledResources”>
    <Annotation Term=”Common.Label” String=”EnabledResources”/>
    </PropertyValue>
    </Record>
    </Collection>
    </PropertyValue>

    Thanks

    Vijay

    (0) 
      1. Former Member

        Hi  Prasita Prabhakaran:

        I am trying to navigate to KPI app(Standard Fiori app : Value Contract Consumption) from OVP table card and facing below issue.

        I have added semantic object and action as below.

        <Annotation Term=”UI.Identification” Qualifier=”lineitemnav”>
        <Collection>
        <Record Type=”UI.DataFieldForIntentBasedNavigation”>
        <PropertyValue Property=”SemanticObject” String=”PurchaseContract”/>
        <PropertyValue Property=”Action” String=”analyzeValueContractCnsmpn”/>
        </Record>
        </Collection>
        </Annotation>

        “sap.ovp”: {
        “globalFilterModel”: “ZPPM_INPUT_QUERY_SRV”,
        “globalFilterEntityType”: “ZPPM_INPUT_QUERYResult”,
        “enableLiveFilter”: true,
        “considerAnalyticalParameters”: false,
        “cards”: {
        “card00”: {
        “model”: “ZPPM_INPUT_QUERY_SRV”,
        “template”: “sap.ovp.cards.table”,
        “settings”: {
        “title”: “{{card00_title}}”,
        “entitySet”: “ZPPM_INPUT_QUERYResults”,
        “addODataSelect”: false,
        “annotationPath”: “com.sap.vocabularies.UI.v1.LineItem#tablecard”,
        “identificationAnnotationPath”: “com.sap.vocabularies.UI.v1.Identification#lineitemnav”
        }}}}

        When I run the app from web ide , it says “Navigation to this application is not supported.”

        When I try to deploy the app to ABAP repository I am getting this error “Cannot read property ‘indexOf’ of undefined”.

        As per your comments, I tried to test with below URL

         

        https://xxxx/fiori#PurchaseContract-analyzeValueContractCnsmpnNot working

        https://xxxx/fiori#PurchaseContract-analyzeValueContractCnsmpn?EvaluationId=.SAP.MM.PUR.VALUECONTRACTCNSMPN.EVALIts working with the parameter

        In this case how to add the property in UI annotation.

        Any help would be grateful.

        Thanks,

        Vasantham

         

        (0) 
      2. Vijay Sharma

        Hi Prasita,

        I checked for Typos and there is none. Also, i am able to access the KPI as a standalone application , so i believe should not be an authorization issue as well.

        Is it something we are missing for the custom KPI app to workthrough OVP navigation?

         

        Thanks

        Vijay

        (0) 
  5. Pierfrancesco La Spada

    Hi Prasita,

    thanks for the very useful post.

    I have a question about navigation parameters:

    when passing a parameter to a target application, how is the match “source-parameter -> target-parameter” solved by the system? Is it based on field name, field data type or defined in target mapping of the semantic object / action ?

     

    Thanks,

    Pierfrancesco

    (0) 
    1. Prasita Prabhakaran Post author

      Hello Pierfrancesco,

      The parameters(both passed via url and the app state) are applied in the target application based on the relevant implementation in the target application.

       

      (1) 
      1. Pierfrancesco La Spada

        Hello Prasita,

        Thanks for your answer.

        The procedure you provided works for most of the object developed in UI5 but It seems doesn’t work for Overview Page.

        Also trying to hardcoding the URI of a standard Overview Page (ex. Procurement Overview Page) parameters value in the Uri are not passed to Smart Filter Bar.

        Do you have any idea of how implementing it?

         

        Thanks

        (0) 
            1. Prasita Prabhakaran Post author

              Hello  Pierfrancesco,

              Request you to share the details on the parameters passed and some info on business case that requires OVP to be the target application would be helpful as well

               

              (0) 
  6. Allan Jason Mercado

    Hi Prasita,

    First of all great guide, been following your posts regarding OVP.

    Hope you can help with the navigation of my OVP.

    I am trying to add a Link List card that will serve as a Quick Link window in the OVP. The items in the card is clickable but once clicked it is doing nothing.

    ” Annotation
    <Annotations Target=”ZTM_TEST_SRV.QuickLink”>
    <Annotation Term=”UI.Identification” Qualifier=”QL_Semantic”>
    <Collection>
    <Record Type=”UI.DataFieldForIntentBasedNavigation”>
    <PropertyValue Property=”SemanticObject” Path=”SemanticObject”/>
    <PropertyValue Property=”Action” Path=”Action”/>
    </Record>
    </Collection>
    </Annotation>
    <Annotation Term=”UI.HeaderInfo” Qualifier=”QL_Header”>
    <Record Type=”UI.HeaderInfoType”>
    <PropertyValue Property=”TypeName” String=”{@i18n&gt;title_link}”/>
    <PropertyValue Property=”TypeNamePlural” String=”{@i18n&gt;title_links}”/>
    <PropertyValue Property=”Title”>
    <Record Type=”UI.DataField”>
    <PropertyValue Property=”Value” Path=”Title”/>
    </Record>
    </PropertyValue>
    </Record>
    </Annotation>
    </Annotations>

    ” Card
    “com_test_home_QL”: {
    “model”: “TestModel”,
    “template”: “sap.ovp.cards.linklist”,
    “settings”: {
    “title”: “{{com_test_home_TestHome_card01_title}}”,
    “entitySet”: “QuickLinkSet”,
    “listFlavor”: “standard”,
    “identificationAnnotationPath”: “com.sap.vocabularies.UI.v1.Identification#QL_Semantic”,
    “headerAnnotationPath”: “com.sap.vocabularies.UI.v1.HeaderInfo#QL_Header”
    }
    }

    If you can please check if you see any problems with the annotation and card above.

    I have tried accessing the URL with the below format and it works fine.

    http://<server&gt;:<port>/<path>/FioriLaunchpad.html#SampleSemanticObject-SampleAction

    Also, if I use the same properties in a List Card navigation to other objects works fine the problem is when using Link List Card.

    Thanks in advance.

     

    Regards,

    Aljay

    (0) 
    1. Prasita Prabhakaran Post author

      This is the correct usage, please try the following:

      <PropertyValue Property=”SemanticObject” String=”SemanticObject”/>
      <PropertyValue Property=”Action” String=”Action”/>

      (0) 
  7. Magina Zhang

    Hi Prasita,

     

    thank you very much for sharing your knowledge!

     

    I met an issue when doing intent-based-navigation in “List Card”, would you please help to look it?

    I am using CDS View based annotation, in there I marked a field with navigation:

    @UI: {
    lineItem: [
    {
    position: 10,
    qualifier: ‘RecordInExpirationOrder’,
    importance: #HIGH,
    label: ‘Change Record’
    }
    ]
    }
    @Consumption.semanticObject: ‘ChangeRecord’
    ChangeRecord,

     

    when I perform selection in my list card, as you mentioned, all fields(includes some meaningless fields) in that CDS view will be taken together as parameters when navigating to target applications.

    the target application is a smart template one, which has “list report page” and “object page”, what I expect is, when doing the navigation, it should bring me to the “object page” of selected “Change Record”.

    however, the navigation is not possible with all that parameters, do you know where should I make the change to enable that?

     

    also, is that possible to set only one field in the list card as navigatable, rather than the entire entry?

    I suppose that will work as it will only bring related context when performing navigation

     

    BR, Magina

    (0) 
    1. Prasita Prabhakaran Post author

      Hello Magina,

      You can make use of the “addODataSelect”: “true”, in cardSettings. This will ensure that only the fields included in the lineItem annotation are passed during navigation.

      Alternatively, you may make use of Custom Navigation Parameters as described here : https://help.sap.com/doc/468a97775123488ab3345a0c48cadd8f/7.52.0/en-US/40051b67edaf457cad37d552c37b497d.html

      (0) 
  8. Richard Brünning

    Hi Prasita,

    at the moment I have configured a list card with intend based navigation on header level. I now want the intend based navigation also on item level, but i need some URL parametes.

    sample:

    Header Level:  #MyQuotation-display

    Item Level #MyQuotation-display?/QuotationSet/00505692-6481-1ed7-adb1-437786d6fa9f

    Some ideas on that?

    (0) 
    1. Prasita Prabhakaran Post author

      Hello Richard,

      The context of the selected line item will be passed by default. If you wish to add custom parameters you can make use of the extension provided for the same. You can find further info on this here

      (0) 
      1. Richard Brünning

        Hi,

        this did not work because my target app use other parameter format (Master Detail Template). But i found a solution to use URL based Annotation for Intend based Navigation Path

        <Record Type="UI.DataFieldWithUrl">
          <PropertyValue Property="Value" Path="URL"/>
             <PropertyValue Property="Url">
        	<Apply Function="odata.fillUriTemplate">
        		<String>#MyQuotation-display&amp;/QuotationSet/{guid}</String>
        			<LabeledElement Name="guid">								 
                                          <Path>Guid</Path>
        			</LabeledElement>
        	</Apply>
           </PropertyValue>
        </Record>
        (1) 

Leave a Reply