Implement Intent Based Navigation Using CDS UI Annotation In SAP UI5 Application

[former_member689370]

Hi All,

In this blog we are going to know how you can apply intent based navigation in your application using CDS UI annotations.

Let’s start with the introduction of Intent based navigation.

 

Intent Based Navigation is a technique in Fiori Launchpad through which user can launch other applications depending on the runtime parameters. This technique is achievable by defining application navigation targets using abstract intents, which at runtime are resolved into actual URLs by the Fiori Launchpad target resolution service. This navigation technique contains an action i.e., related to a semantic object. The combination of semantic object and semantic object action is an intent. The annotation @Consumption.semanticObject is used for navigation based on intent then the client will decides how to react when this navigation is triggered.

 

To showcase this scenario, I have used one SAP Fiori Element – Overview page-based template application. In which I have added a table card, and, in the backend, I have created one Consumption CDS view and added annotation for intent based navigation.

 

Functionality: On the click of table line items, another app will get open.

 

Explanation: Suppose there are two application App1(Sales Overview) and App2(Manage Sales Order). App1 consist table card, and on the click of line item of the table, another app which is App2 will open and also on the click of sales document number (field used for navigation), the framework shows the list of applications based on user authorizations.

Here, two actions will get performed,

1. On click of line item, another app which is “Manage Sales Order” will get open.


2. And, on click of Sales Document Number, list of applications will get open based on user has authorization.

Steps to be performed to achieve this scenario:

• Create a consumption CDS view on top of the interface view.


•  

@AbapCatalog.sqlViewName: 'ZV_SALES'

@AbapCatalog.compiler.compareFilter: true

@AbapCatalog.preserveKey: true

@AccessControl.authorizationCheck: #CHECK

@EndUserText.label: 'Sales order details'

@OData.publish: true

define view ZC_SalesOrderDetails

  as select from I_SalesDocumentBasic

  association [0..*] to ZI_SalesOrderItem as _items on _items.salesorder = $projection.SalesDocument

{

       @Consumption.semanticObject: 'SalesOrder'

       @UI.selectionField: [{

              position: 10,

              label:'Sales Document'

          }]

 

      @UI.lineItem: [ { position: 10, label: 'Sales Document Number'},

     {type: #FOR_INTENT_BASED_NAVIGATION, semanticObjectAction: 'manage'}]

  key  SalesDocument,

       @UI.lineItem.position: 20

       @UI.selectionField: [{

              position: 20

          }]

       @UI.lineItem.label:' Created By'

       @UI.identification: [{

           position: 20

       }]



       CreatedByUser,

       @UI.dataPoint: {title: 'Net Value',

       criticalityCalculation: {

       improvementDirection: #TARGET,

       deviationRangeLowValue: 100,

       deviationRangeHighValue: 2000,

       toleranceRangeLowValue: 400,

       toleranceRangeHighValue: 800

       }}

       @UI.selectionField: [{

                 position: 30

             }]

       @UI.lineItem.position: 30

       @UI.lineItem.label:'Net Value'

       @UI.lineItem.type: #AS_DATAPOINT

       @UI.identification: [{

           position: 30

       }]

       TotalNetAmount,

       TransactionCurrency,

       @UI.lineItem.position: 50

       @UI.lineItem.label:'SD Document Category'

       @UI.identification: [{

           position: 50

       }]

       SDDocumentCategory,

       @UI.selectionField: [{

              position: 700

          }]

       @UI.lineItem:  { position: 700, qualifier:'netAmt', label: 'Sales Document Type', type: #AS_DATAPOINT}

       @UI.identification: [{

           position: 700

       }]

       SalesDocumentType,

       @UI.lineItem:  { position: 40, qualifier:'netAmt', label: 'Sales Document Processing Type', type: #AS_DATAPOINT}

       @UI.identification: [{

           position: 40

       }]

       SalesDocumentProcessingType,

       @UI.lineItem.position: 60

       @UI.lineItem.label:' Last Changed By User'

       LastChangedByUser,

        @UI.dataPoint: {title: 'Creation Date'}

       @UI.selectionField: [{

              position: 70

          }]

       @UI.lineItem.position: 70

       @UI.lineItem.label:' Creation Date'

       @UI.identification: [{

           position: 70

       }]

       CreationDate,

       @UI.lineItem.position: 80

       @UI.lineItem.label:' Creation Time'

       @UI.identification: [{

           position: 80

       }]

       CreationTime,

       @UI.lineItem.position: 90

       @UI.lineItem.label:' Last Change Date'

       @UI.identification: [{

           position: 90

       }]

       //Associations

       @ObjectModel.association.type: [#TO_COMPOSITION_CHILD]

       _ItemBasic,

       _items

}

 

CDS Annotation added:

Below annotation is used to provide intent based navigation to the application.

 

• Add” @odata.publish: true” annotation to expose the CDS as a OData service.


• Add the exposed service in your system using below mentioned tcode

Transaction:  /n/IWFND/MAINT_SERVICE

Then the service will be available to be used by the SAPIDE to generate the application.

 

Create destination in SAP Cloud Connector.

• Login to your SAP Cloud connector.


• Click on “Cloud to On-Premise” in SAP Cloud Connector and make an entry for your SAP system.

       

 

Next is to create destination in SAP cloud platform.

• Login to your SAP Cloud Platform (Neo Trial account) -> Destinations -> Click on “New Destination” -> Make a new entry and Check the connection.

Connection should be reachable.

 

 

Then,open SAP WEB IDE Full Stack.

Note: Click on “Service tab” and enable SAP WEB IDE Full Stack service if not enabled.

• And Click on “File”-> New -> Project from template -> “Overview Page” template -> Next.


• Enter Project name (ZSalesOrderDetailsOVP), title (Sales Overview) and Namespace and then next.


• Select the system in service catalog -> Add registered OData service (ZC_SALESORDERDETAILS_CDS) ->Next.


• After this you can see the annotation file-> click next


• Select Datasource Alias, Entity Type (ZC_SalesOrderDetailsType) for Filter ->Default checked “Enabled Live Filter” box remains same -> Select “Resizable” in Container Layout --Click on “Next” -> Click on “Finish”.


• Then we can see a project file will get generated in files section.

 

Next step is to add a table card in the application.

• Right click on the folder name -> Select New -> Card


• Select table card and next.


• Use existing data source -> Next

• Enter General fields: “Entity Set(ZC_SalesOrderDetails)”, “Title(Sales Order Details)” and “Subtiltle(Table Card)” -> Enter Annotations fields: “Identification (com.sap.vocabularies.UI.v1.Identification)”, “Annotation Path(com.sap.vocabularies.UI.v1.LineItem)” -> Enter Card Properties fields: “Sort By (Sales Document)”, “Sort Order(Descending)” -> Click on “Next” -> add row span 12 and col span 4 and then click next -> then finish

 

Note: Check in manifest.json file, table card will be added.

Now run the application, we can see the table card has been added to the application.

 

Last step is the deployment of the application/Project.

• Right click on your Project Folder -> Select Deploy -> Select Deploy to SAP UI5 ABAP Repository.

 

• Select System and Deploy as a new application -> then click on next.

 

• Enter an application name(ZDEMOSALESOVP), description(Sales Overview), and provide $TMP as a package then click on next and then finish.

 

Now, we can see the application in the system through tcode /nse80.

 

 

Steps to launch the application on Fiori Launchpad (FLP):

•  Create a semantic object using tcode /UI2/SEMOBJ.Note: To create semantic one transport request is required

 

• Then open Launchpad Designer in "CUST" mode using tcode /UI2/FLPD_CUST.


• Enter system User ID and password.

 

• Click on setting button (Top Right Side) ->Assign transport request as None (Local Object)


• And then, click “OK”.

 

• Then click on create button for catalog creation.

 

• Enter title, catalog Id and save it.

Now we can see a catalog gets created with ID “ZPOC_FIORIELEMENTS”.

Next step is tile creation.

• 
  

  Open newly created catalog -> click on the create button.

  
  

 

• Then select static tile template

 

• Enter title, action and the semantic object name which you created earlier and then click on save button.Next step is to create target mapping corresponding to the tile.

 

• Click on Target Mapping tab-> then click on Create Target Mapping.

 

• Enter semantic object name (same as provided in tile), action as display, application type as SAPUI5 Fiori App, title, URL and ID and then click on save.

Note:

•  URL:      /sap/bc/ui5_ui5/sap/<Deployed SAP UI5 Application name>


•   ID:          Component ID of your application

To check:

• Goto /nse80 tcode


• select BSP Application and enter the SAP UI5 Application name as below


• Goto Component.js and select the component ID
  


• Also add target mapping of other application (which you want to launch on the click of theapplication) in catalog “ZPOC_FIORIELEMENTS”.Here I am trying to launch a standard application which is “Manage sales order”. So, I have just created a reference of the standard target mapping.

 

Steps to create reference of standard target mapping:

• Open the standard catalog which consist Manage Sales Order target mapping.


• Select the target mapping corresponding to tile “Manage Sales Order” and click on the create Reference button.

 

• After this, select the catalog name (ZPOC_FIORIELEMENTS)

       Now, we can see a reference of the standard target mapping will get added to our catalog.

 

Next step is to create a group

• Select group tab(Left Top) -> Click create button

 

• Enter Title and ID for group and save it.

 

Then we can see in the left, a group will get created with ID ZPOC_FIORIELEMENTSGRP

Now it’s time to add our tile from catalog to group.

•    Click on the create button under section “Show as Tiles”.

• Enter catalog name -> Add tile (Click on tick button)

 

Now we can see a tile will get added to our group.

       Next step is to create a role.

• Go to tcode “/nPFCG”


• Enter Role -> Click on Create Single Role

 

• Enter description for the role.


• Add the newly created catalog and groups under menu tab and users under user tab.

Remember:

• The user ID which you have provided under user tab has only authorization to see the tile on their FLP.


• Always reimport the catalog into role whenever, made any changes to the catalog.

 

Now, open the Fiori Launchpad using tcode /n /UI2/FLP.

Here we can see the tile (Sales Order) under tab Fiori Elements Apps (Group Name).

 

• Open the tile then Sales Overview app (App1) will get loaded to the screen with a table card.


• Click on the table line item -> App2(“Manage Sales Order” app will get opened).

 

Cheers!! we had successfully implemented intent based navigation through CDS annotation in our application.

 

I hope this blog will help you to develop an intent based navigation application using CDS UI annotation.

 

For more information, please visit the below sites:

• SAP Fiori Elements Guidelines-https://experience.sap.com/fiori-design-web/overview-page/


• SAP Community: Fiori Elements- https://wiki.scn.sap.com/wiki/display/Fiori/Fiori+Elements


• For UI Annotations- https://help.sap.com/viewer/cc0c305d2fab47bd808adcad3ca7ee9d/7.5.9/en-US/f8af07bb0770414bb38a25cae29...


• For Intent Based Navigation-https://help.sap.com/viewer/52715f71adba4aaeb480d946c742d1f6/2.0.01/en-US/5ff538515a2a455696f9c20393...

 

Thanks,

Anubhuti

 

 

 

[former_member687463]

Well explained.

[former_member689370]

Thank you

[former_member130268]

Good article.

[former_member615149]

HI Anubhuti,

Nice Article. I have a scenario regarding intent based navigation.If we are navigating from App1 to App2 and the global filter field technical name is not same then we are getting error. Is there any possibility to explicitly not send the global filter value or it can be set to new technical name of the destination?

[rudramani]

Good content with a very high effort. Thanks for adding Remember and Resources, it really helped.

[former_member689370]

Hi Ankit,

First I don't think that you will get any kind of error because of global field technical name is not same. As you can see in my both app, there is global field which is completely different from each other.

Second you can do intent based navigation based on single parameter.

Please follow this blog, may be it can solve your query.

https://blogs.sap.com/2019/08/02/sap-s4-embedded-analytics-and-intent-based-navigation/

 

Thanks,

Anubhuti

[former_member689370]

Thanks Rudra!!

[former_member694623]

Informative and detailed article.

[former_member673255]

Brilliant. thank you for this step by step guide.

 

[former_member2654]

Hi Anubhuti,

 

Thank you for the perfectly explained blog. I was wondering, what kind of annotations should we have if in case we want to directly(specifically) call one semanticObject&action combination rather than offering a pop-up with a list to the user? I am trying to build an application within that perspective.

 

I would be appreciated if you can help.

Best,

Merve

 

 

[gregiss]

Hi Anubhuti

I need to assign many semanticObject to SalesDocument in order to extend the Actions in the  "list of applications".


i.e. semanticObject: 'SalesOrder" with semanticObjectAction A + B and semanticObject: 'SalesInvoice" with semanticObjectAction C + D

In the list of applications I would like to show A + B + C + D

 

How can I do that?

Thank you

Stefano

[former_member751826]

Hello Anubhuti,

Thanks for the Blog !

I have also created a navigation to VA03 from my custom app, however even after giving a reference of my custom Field catalog in VA03 field catalog for target mapping I am unable to pass my sales order # as a parameter to VA03 to open for the clicked sales order. How can I achieve this ?

[former_member575393]

Hello Anubhuti,

 

I have created list report and using extension I have also made it as multiline select. Can I implement Intent based navigation where I select multiple line and with button click on List tool bar it should read data from selected line and pass to navigation page.

Could you pleas suggest any other way in this case.

Regards,

Rajesh

[joy_gupta]

Hello Anubhuti,

Could you please help me to implement the same using Business application Studio. Also, the initial page is developed using CDS and annotation in eclipse, which is a custom application.

There is an application (custom) developed using CDS and annotation using eclipse. Now, we want a navigation on clicking on sales Order number it should open a pop-up card (shown in img 2) with link to open multiple standard applications. Also, we will be needing to configure this application in Fiori launchpad. Attached is picture for reference. Kindly help.

So, as it shown below, clicking on sales order it should open a pop-up card with those applications.



Cards like: Output is needed like below.



Thank you,

Sipra

[medhoohsao]

Very informative .. And first time to know. thanks for your time in this.