//////////SAP Fiori Overview Page (OVP) – Navigation

SAP Fiori Overview Page (OVP) – Navigation

As mentioned at the beginning of this blog series, the great added value of an OVP is to be able to interact with a card. This allows us to perform additional actions from a card. We remain with our card with the last ordered products. Suppose it interests us to see from which invoices this product is a component. The goal is to click on a product and go to an overview page (detail app). On which we then see a listing of all invoices that contain this product.

For this we need:

  • Our existing OVP
  • And a detailed app that we can navigate through.

 

Since we want to deal mainly with the navigation here, I am at this point not closer to the creation of the detail app. All necessary files can here be downloaded and easily imported into the Web IDE. Later more.

We have two options for navigation:

  1. „DataFieldForIntentBasedNavigation“ – navigation to another Fiori app
  2. „DataFieldWithUrl“ – Navigation to an external link

For our project – the navigation to the overview of the invoices – we need the navigation via an Intent.

We define this in the annotations of our OVP. More specifically, in the annotation term from which navigation is to take place. In our case the annotation „UI.LineItem“. To anticipate the tension, I’ve already prepared something:

4navigationannotationPICTURE

Added to this is the last record.

The term „Intent“ and „SemanticObject“ is new. An „intent“ can be roughly imagined as a function call. Which of three parts is composed:  # <semantic object> – <action> <semantic object parameter> = <value1>?

  1. <semantic object>  – The semantic object. This is in our case „PRODUCT“.
  2. <action>  – The action that you want to run with this semantic object. Here I chose „lookup“.
  3. Additional (optional) parameters

Why all this? We already know that OVPs are started from the Fiori Launchpad. There is no other possibility. If you open a Fiori Launchpad provides the last part of the URL like success: /Fiorilaunchpad.html#Shell-home  Behind the hash we see „Shell-home“. Shell is the semantic object! And home the related action. If we open an x-arbitrary Fiori app, we see that I change the hash and therefore the corresponding semantic object. In other words, Fiori runs the complete navigation between the individual apps, via semantic objects.

Next, it is necessary to deploy the OVP to an existing Fiori Launchpad. We have already created a tutorial for this. As a semantic object we use „PRODUCT“ and as an action „display“.

The downloaded Detail app can be imported into the Web IDE. From there, we are also re-deploying the Fiori Launchpad. This time, however, we use „lookup“ as an action.

Von | 2017-03-06T16:24:37+00:00 6. Oktober 2016|Expert Blog, Fiori, Neue Technologien|