Skip to Content
Technical Articles
Author's profile photo Ashish Anand

Overview Page (OVP) Card navigation and authorization

Prerequisites

Make sure you have been to the previous blog of this blog series.

OVP Card Navigation

OVP cards support navigation at card header level and chart content level.

For list and table cards, Header navigation is done by identification annotation and Line item level navigation uses lineitem annotation respectively. Identification annotation is present and lineItem annotation does not have any navigation related annotation properties then line items will also navigate to the application where the header is configured to navigate.

For analytical cards, cards identification Annotation is used for both header and chart area navigation. navigation: “noHeaderNav” card setting is used by analytical cards to disable header navigation.

OVP cards support two types of navigation:

  1. Intent-based Navigation: Used to navigate to an application deployed within the Fiori launchpad based on Semantic Object, Semantic action and Semantic Object parameters provided.
  2. URL based Navigation: Mostly used to navigate to an external application on the basis of the URL provided.

Intent-Based Navigation

Before discussing Intent-based navigation lets talk about how navigation is done in Fiori. So generally URL of a Fiori application deployed in Fiori launchpad looks like:

https://<server>:<port>/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html#<semantic object>-<semantic action>?<semantic object parametes>

A semantic object represents a business entity. Usually, all the applications related to the same business entity have the same semantic object.

A semantic action represents an action like display, create etc.

Semantic action parameters are the parameters for the semantic object.

So let’s say I have created two applications one to create and edit sales order and another display sales order list and individual sale order. I’ll give semantic object “salesOrder” to both the applications. for creating sales order application I’ll have “create” as semantic action. and when I provide “?salesOrderID=1111567567” then it should open sales order with ID 1111567567 in edit mode. Similarly, for display sales order application, I will give “display” as the semantic action and when I pass “?salesOrderID=1111567567” then it should open sales order with ID 1111567567 in detail mode.

To configure header navigation in list card (the first card which we created with id “card01”), I have just added “identificationAnnotationPath” property to the existing card settings:

"card01": {
				"model": "GWSAMPLE_BASIC",
				"template": "sap.ovp.cards.list",
				"settings": {
					"title": "{{card01_title}}",
					"subTitle": "Standard List card - Standard flavour",
					"entitySet": "ProductSet",
					"listType": "condensed",
					"listFlavor": "standard",
					"sortBy": "Availability_Status",
					"sortOrder": "Descending",
					"annotationPath": "com.sap.vocabularies.UI.v1.LineItem",
					"identificationAnnotationPath": "com.sap.vocabularies.UI.v1.Identification#productHeader1",
					"addODataSelect": true,
					"stopResizing": false,
					"defaultSpan": {
						"rows": 5,
						"cols": 1,
						"showOnlyHeader": false
					}
				}
			},

Identification annotation in local annotation file looks like:

<Annotation Term="UI.Identification" Qualifier="productHeader1">
					<Collection>
						<Record Type="UI.DataFieldForIntentBasedNavigation">
							<PropertyValue Property="SemanticObject" String="Action"/>
							<PropertyValue Property="Action" String="toappnavsample"/>
						</Record>
					</Collection>
				</Annotation>

Since only header navigation is configured and lineitem annotation does not have any navigation related property then click line items will also behave the same as click on the header. To configure line item level following “DataFieldForIntentBasedNavigation” record should be added to existing line item annotation:

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

Navigation operation should supply the application with Navigation parameters, in order 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 the selection variant.
  3. Card Sorters like sortBy and sortOrder as defined in presentation variant.
  4. Static parameters if defined for that card in app descriptor.
  5. Global custom filters
  6. Custom parameters

When a card line item is clicked, the context of the clicked line item is also passed in addition to the above data.

I’ll discuss custom filter and custom parameters when I’ll talk about extensibility topic.

Example of navigation in an analytical chart will be given when the Analytical chart topic is discussed in this blog.

Static parameter in intent-based navigation

If your card has IntentBasedNavigation then you can pass a static Parameter’s to the navigation application by adding the following manifest settings for the card:

"staticParameters": {
              "parameter1": "parameterValue1",
              "parameter2": "parameterValue2",
            },

URL based Navigation

For URL based navigation, com.sap.vocabularies.UI.v1.DataFieldWithUrl Annotation is used.

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

pointed the second card (“card02”) to above identification annotation:

"card02": {
				"model": "GWSAMPLE_BASIC",
				"template": "sap.ovp.cards.list",
				"settings": {
					"title": "{{card01_title}}",
					"subTitle": "Extended List card - Standard flavour",
					"entitySet": "ProductSet",
					"listType": "extended",
					"listFlavor": "standard",
					"sortBy": "Availability_Status",
					"sortOrder": "Descending",
					"annotationPath": "com.sap.vocabularies.UI.v1.LineItem",
					"identificationAnnotationPath": "com.sap.vocabularies.UI.v1.Identification#productHeader2",
					"addODataSelect": true,
					"stopResizing": false,
					"defaultSpan": {
						"rows": 5,
						"cols": 1,
						"showOnlyHeader": false
					}
				}
			},

Smart links in OVP cards

The SmartLink control uses a semantic object to display NavigationPopover for further navigation steps. To enable smart link for any entity attribute we need to provide the associated semantic object via the following annotation:

<Annotations Target="GWSAMPLE_BASIC.Product/ProductID">
				<Annotation Term="Common.SemanticObject" String="Action"/>
			</Annotations>

after adding the above annotation we will see, wherever the ProductID is used as dataField, it will be displayed as a smart link.

 

Authorization in OVP cards

You can control the visibility of any cards to a particular user based on user’s roles by “requireAppAuthorization” property of the card settings, the value of this property should be a combination of “#”<semantic object>”-“<semantic action>.

"requireAppAuthorization": "#sampleObject-sampleAction",

If the user has the permission to perform the sampleAction action on sampleObject object, then only this card will be visible to the user.

Conclusion

We have learnt about different settings and annotation used for navigation and authorization in OVP cards. We also learnt about smart links support in OVP application.

What Next?

In the next blog, I’ll discuss configuring Linklist card. Stay Connected !! 🙂

 

 

 

 

Assigned Tags

      20 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Atul Sharma
      Atul Sharma

      Hi Ashish ,

      Nice blog !! Really helpful ?

      I have  a few questions :

      1. In the below Identification , Where do you define the action “toappnavsample” ?I am getting an error in Navigation “Navigation to the application not supported” .Please help!!

      <Annotation Term=UI.Identification Qualifier=productHeader1> <Collection> <Record Type=UI.DataFieldForIntentBasedNavigation> <PropertyValue Property=SemanticObject String=Action/> <PropertyValue Property=Action String=toappnavsample/> </Record> </Collection> </Annotation>

             2 . Please let me know what Paths you are using in Manifest.Json for Stack Display in your last    blog .
             3.  Please help with the map display in Card using Annotations like Geolocation/Geolocations .

      Author's profile photo Ashish Anand
      Ashish Anand
      Blog Post Author

      Hi Atul,

      1. you are getting that error because you might not have any object in your Fiori Launchpad with action "toappnavsample". you can go to the last blog of this blog series and try to deploy some application to the FLP and then you will have a semantic object and action to navigate to.
      2. I'm not able to understand the question.
      3. Geo-cards are not supported by default by OVP, you need to create your own custom card to support that, please go through this blog to seek some help regarding custom cards.

      I hope it helps, thanks for reading and your feedbacks.

       

      Thanks and Regards

      Ashish

       

      Author's profile photo Atul Sharma
      Atul Sharma

      Hi Ashish,

      Thanks for your answers!!

      For Stack display my question was that in Manifest.Json file , in AnnotationPath what Local Annotations have you used like Identifications,LineItem,Facets etc .

      Currently I am getting my Stack as blank, Not able to get data .

      Regards ,

      Atul .

       

      Author's profile photo Janith Illangakoon
      Janith Illangakoon

      Is there any way to display specific cards for a user based on user roles?

      For an example, manager can view all the cards but an employee can only view specific cards. Is that possible

      Author's profile photo Ashish Anand
      Ashish Anand
      Blog Post Author

      Hi Janith,

      yes this is very much possible. I have discussed it in this blog of this blog series.

      hope it helps !! 🙂

      thanks and regards

      Ashish

       

      Author's profile photo Janith Illangakoon
      Janith Illangakoon

      Hi, Thanks for the reply..

      What if both users have app permissions but only one user can view the card?
      Is this scenario can handle using this approach?

      Author's profile photo Ashish Anand
      Ashish Anand
      Blog Post Author

      Hi,

      This is card level authorization and not app level authorization. This should suffice your requirement.

      Thanks and Regards

      Ashish

      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy

      Hi Ashish Ashish Anand

       

      I wnat to configure external navigation without the context in ovp list cards .

      I tried datafieldforintentbased navigation with requires context false and also data field with url. both cases the  context is passed. is there a way to prevent this?

       

       

      Author's profile photo Sindhu Kishore
      Sindhu Kishore

      Hi Ashish,

      Great blog 🙂

      I had a query regarding Static parameter in intent-based navigation.

      I was able to pass single value for the field successfully and the parameter got populated as expected during the navigation. However, i want to pass multiple values for a single field. When i tried to pass the value in the form of array as below

      "staticParameters": {

      "parameter1": ["value1","value2"]
      }

      it did not work. I also tried to add the field again

      "staticParameters": {

      "parameter1": "value1",

      "parameter1": "value2"

      }

      failed here as well since its a object value pair and the above format would cause duplicate key issue.

      Could you please let me know if the multiple values are support for the field and if so, what is the format for the same.

       

      Thanks.

      Author's profile photo Bhoomika Jain
      Bhoomika Jain

      Hi Ashish,

      I am trying to perform url based navigation but i get the error: HTTP Status 404 - Application 'flpsandbox' not found in account '<account number>trial'.

      I am using trial account in webide and using northwind service for data model. The annotation is provided in the local annotation file:

      I have also added the same identification path in manifest.json:

      "identificationAnnotationPath": "com.sap.vocabularies.UI.v1.Identification#employeeNavigation"

      Could you please provide any suggestion.

       

      Thanks,

      Bhoomika

      Author's profile photo Supreeth Gowda
      Supreeth Gowda

      Hi Ashish,

      Great Blog.

      we have OVP application running on cloud and we have cards which needs to be controlled from backend roles.

      is it possible to control cards visibility from backend role assignment because as our application running on cloud.

      if so, please do provide some insight to this.

       

      as of now we are using property to cards Requireappauhtorization with app semantic object + action, but we are confused how to provide to users for that particular apps.

       

      Thanks,

      Supreeth Gowda.

      Author's profile photo Ashish Anand
      Ashish Anand
      Blog Post Author

      Hi Supreeth,

       

      For cloud scenarios also, the steps remain the same as discussed in the blog 🙂

      Hope it helps 🙂

      Thanks and Regards

      Ashish

      Author's profile photo Supreeth Gowda
      Supreeth Gowda

      HI Ashish,

      Thanks it worked for us.

      I have a question on Navigation in OVP from header and line item.i have gone through your blog.

      • we have Linklist card ( dynamic data not static content ), in that we have line item navigation #withURL line item is navigating to particular website correctly. but how do we control header navigation ( basically how to provide header navigation URL ) .
      Author's profile photo Anmol Jain
      Anmol Jain

       

      Hi Ashish,

       

      I want to disable the navigation on the cart area in analytical card in OVP and only allow navigation on the header area, Is it feasible?

       

      Thanks and Regards,

      Anmol Jain.

      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

      Author's profile photo Ashish Anand
      Ashish Anand
      Blog Post Author

      Hi Makbule Merve Gul ,

      I'm getting 404 (page not found) error for the link which you shared.

      Thanks and Regards

      Ashish

      Author's profile photo Megharaj S
      Megharaj S

      Hi Ashish,

      Great Blog.

       

      Can we set cards settings dynamically??

       

      Thank and regards

      Megharaj S

      Author's profile photo Ashish Anand
      Ashish Anand
      Blog Post Author

      Hi Megharaj S ,

      Thanks for the feedback, I'm glad you liked it.

      No, it's not possible to set cards settings dynamically. However, you can always use key user adaptation to extends these.

      Hope it helps 🙂

      Thanks and Regards

      Ashish

       

      Author's profile photo Megharaj S
      Megharaj S

      Hi Ashish, got solution somehow we succeeded to set dynamically

      we created json which  have card settings

      component,js written following code

      this.oCardProperties = new Promise(function (resolve) {
      var rPath = sap.ui.require.toUrl("com/evorait/evosuite/evodashboard/model/Cards.json");
      this.oCardsJsonModel = new JSONModel();
      this.oCardsJsonModel.loadData(rPath);
      this.oCardsJsonModel.attachRequestCompleted(function () {
      var myRes = JSON.parse(this.oCardsJsonModel.getJSON());
      //delete myRes["card11"];
      this.getManifest()["sap.ovp"].cards = myRes;
      }.bind(this));
      }.bind(this));

      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy

      Cn we give multiple semanticobject-action combination in reuireaopsurthorization attribute?

      Ashish Anand