Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
AshishAnand
Employee
Employee

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 !! 🙂

 

 

 

 
23 Comments
0 Kudos

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 .

AshishAnand
Employee
Employee
0 Kudos
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

 
0 Kudos

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 .

 

janithi
Participant
0 Kudos
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
AshishAnand
Employee
Employee
0 Kudos
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

 
janithi
Participant
0 Kudos
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?
AshishAnand
Employee
Employee
Hi,

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

Thanks and Regards

Ashish
akshaya_p
Contributor
0 Kudos
Hi Ashish ashish.anand4

 

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?

 

 
former_member411487
Discoverer
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.
0 Kudos
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
supreethgowda1
Discoverer
0 Kudos
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.
AshishAnand
Employee
Employee
0 Kudos
Hi Supreeth,

 

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

Hope it helps 🙂

Thanks and Regards

Ashish
anmoljain63
Explorer
0 Kudos
 

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.
supreethgowda1
Discoverer
0 Kudos
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 ) .

0 Kudos

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

former_member725891
Discoverer
0 Kudos
Hi Ashish,

Great Blog.

 

Can we set cards settings dynamically??

 

Thank and regards

Megharaj S
AshishAnand
Employee
Employee
0 Kudos
Hi megharaj ,

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

 
AshishAnand
Employee
Employee
0 Kudos
Hi gulmmerve ,

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

Thanks and Regards

Ashish
former_member725891
Discoverer
0 Kudos

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));

akshaya_p
Contributor
0 Kudos

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

ashish.anand4 

taphafall015
Discoverer
0 Kudos
Hi ,

Very nice !! Really helpful

Keep updates please !
former_member760312
Discoverer
0 Kudos
I'm facing the same problem!

 

Did you found a solution?
former_member800340
Discoverer
0 Kudos
Hi Ashish,

 

The blog is really nice and has quite a lot of useful information. In fact, I am following it to create my first overview page application.

But currently I am struggling with requireAppAuthorization part. I have mentioned the semantic object and action as shown below:
UnusedContracts": {
"model": "MM_PRC_OVP",
"template": "sap.ovp.cards.list",
"settings": {
"title": "{{UnusedContracts}}",
"entitySet": "C_UnusedPurchaseContractQResults",
"listType": "condensed",
"listFlavor": "standard",
"requireAppAuthorization": "#PurchaseContract-analyzeUnusedContracts",
"annotationPath": "com.sap.vocabularies.UI.v1.LineItem#UnusedCont",
"selectionAnnotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant#UnusedContSelVar",
"identificationAnnotationPath": "com.sap.vocabularies.UI.v1.Identification#UnusedContId",
"staticParameters": {
"EvaluationId": ".SAP.MM.PUR.UNUSEDCONTRACT.EVAL"
}
}
}

 

Also, this target mapping is present in the catalog that is assigned to the user. But, even a user with authorization to this application is not able to see it.

 

Kindly let me know if anything is possible.

 

Regards,

Rajinder Singh