Skip to Content
Author's profile photo Elina Visoki

Fiori App To App Navigation in Web IDE Full-Stack

Hi

 

In SAP Web IDE Full-Stack, the testing of App 2 App navigation in the FLP sandbox is now even easier than before!

In this blog, I will show how to test the navigation between apps.

  1. Make sure you have 2 (or more) apps in your SAP Web IDE Full-Stack workspace. I will use the Approve Purchase Orders and Manage Products sample apps.
  2. Right-click the app you want to navigate from and select Enable App to App Navigation. In this example, I’ll select the Approve Purchase Orders app:
  3. Select the apps you want to navigate to (you can select several apps), and click Enable.
  4. A new project called FLPSandbox is created in your workspace. This project contains the appconfig folder, in it, you will find the json file that contains the configurations for the FLP sandbox.
  5. Let’s add a navigation button to the Approve Purchase Order

    1. In the Approve Purchase Order app, open the webapp > view > S2_PurchaseOrders.view.xml file using the layout editor.
    2. Search for the Button control in the Controls.
    3. Drag the button to the canvas and drop it to the right of the Search field.
    4. In the Properties pane, change the button text to “Go to Manage Products”.
    5. Change the width of the button to 100%.
    6. In the Events pane, in the Press field, select New Function from the Configures event dropdown list.
    7. In the New Function dialog box, enter a name for the navigation function and click OK. A new empty method is created in the applicable controller.
    8. Back in the Events section, in the Press field, select Open in Editor from the Configures event dropdown list.
    9. In the opened controller.js file, search for the newly created method and add the following code to the method:
      var oCrossAppNav = sap.ushell && sap.ushell.Container && sap.ushell.Container.getService("CrossApplicationNavigation");
      			var href_For_Product_display = (oCrossAppNav && oCrossAppNav.toExternal({
      				target: {
      					shellHash: "sampleManageProducts-display"
      				}
      			})) || "";
      ​

      I used the CrossApplicationNavigation api. You can also use the NavigationHandler 

    10. Click Save.
  6. Now, all we need to do is test the navigation.
    1. Select the FLPSandbox
    2. Click the Run button .
      A predefined configuration is used to run the project with all configured apps (see the advanced settings in Run Configurations for more info ). The FLP sandbox is launched with the applications that were configured in the fioriSandboxConfig.json file.
    3. Click the origin app, in our example this is the ApprovePurchaseOrder tile.
    4. In the application that opens, click the navigation item, in our example it is the Go to Manage Products button.

Further information can be found in the readme.txt file in the FLPSandbox project.

Till next time 🙂

Elina

Assigned Tags

      15 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Danny Van der Steen
      Danny Van der Steen

      Hi Elina,

      this is a nice feature and great example code.

      (i have spend hours in the past trying to get this working in WED-IDE just to test intent based navigation but without success)

      This will help us a lot.

      Could you also provide an example with parameters?

      To get for example a selected id number to the called app?

      Greetings

      Danny.

      Author's profile photo Vikrant Lawangare
      Vikrant Lawangare

      Hi Elina,

      is it possible to test navigation to classical apps like SAP GUI/WDA via intent based navigation (semantic object-action)?

       

      Best,

      Vikrant

      Author's profile photo Elina Visoki
      Elina Visoki
      Blog Post Author

      Steffen Huester maybe you can assist?

      Author's profile photo Martin Steinhauser
      Martin Steinhauser

      I tested this and it was pretty straight forward. But for my app (navigation example) I needed to adapt the fioriSandboxConfig file. The file was generated with source "EPMProduct-manage_st" and target "nwepmrefappsstprodmanage-display" where I would have expected different values.

      Is there a way to configure the source project, so that these name are correctly taken over into the fioriSandboxConfig file? Or maybe as part of the wizard one asks for these names....?

      After I manually changed the fioriSandboxConfig semantic object names, the external navigation works.

      Author's profile photo Elina Visoki
      Elina Visoki
      Blog Post Author

      Hi Martin,

      The values are fetched from the manifest.json of each app, from the Navigation section.

      Just open the manifest.json of the application, use the "Descriptor Editor" (the form base editor ), select the "Navigation" tab at the top, and in the first table edit the Semantic Object and the Action.

      Author's profile photo Mohamed Selim Oueslati
      Mohamed Selim Oueslati

      Hi Elina,
      I tried this tutorial and it worked well except when one of the two applications is a fiori worklist app ( smart table template ).

      This application works when running alone but  when I tried to access it through an app2app navigation it didn't show any data as shown in the figure below ( sorry it is in French  )

       

      Author's profile photo Saket Amraotkar
      Saket Amraotkar

      Hi Elina,

       

      is this feature available only for Standard Fiori apps (apps provided by SAP), i am not able to find any webapp or views while following these steps for my custom apps.

      Could you please suggest on this?

       

      Regards

      Saket

      Author's profile photo Marc Veser
      Marc Veser

      Hi,

      is there a way to specify a parameter mapping?

      We often specify in the FLP target mapping definition for our apps a parameter mapping and disable the option "allow additional parameters".

      Therefore I need a way to map the parameter names in the fioriSandboxConfig.json.

      Regards,

      Marc

       

      Author's profile photo sagar u
      sagar u

      How to pass json data from one app in FLP to another app in FLP using the cross app navigation?  Please help out!

      Author's profile photo Rakesh Singh
      Rakesh Singh

      Hi Elina,

      Simply followed your instuctions on 2 custom UI5 App, but getting the error below :

       

      Error

      App could not be opened because the SAP UI5 component of the application could not be loaded.

      Failed to load UI5 component for navigation intent "#ScanApp2-display"

       

      it seems that system creates intent by itself, and I am not seeing anything in Navigation Tab of manifest.json descriptor editor for either project.

      Still wondering how it works??

      Regards

      Rakesh

       

       

      Author's profile photo Eldwin Cheung
      Eldwin Cheung

      Had same issue here…follow Mike Doyle’s comment below and should work

      Author's profile photo Mike Doyle
      Mike Doyle

      Thanks for this blog on a nice feature.  In my case I had to add '/webapp' to the url property for the generated entries in FioriSandboxConfig.json.  Perhaps it assumes that the Component.js is in the top-level of the project?

      I too would love to know how to pass parameters.  My apps happily pass parameters when deployed to the real FLP on SAP CP, but when running in the sandbox the launched app doesn't have any startupParameters.

      I presume there is a way to list the parameters in the FioriSandboxConfig.json.  I can see that they can be listed in the manifest.

       

       

      Author's profile photo Eldwin Cheung
      Eldwin Cheung

      How I got mine to work: I ensured that the App2 intent in fioriSandboxConfig was matching the intent I wrote in my App1 controller:

      fioriSandboxConfig:

      "Create_NRS_Request-Display": {
      			"additionalInformation": "SAPUI5.Component=molex.z9cnfnrs",
      			"applicationType": "URL",
      			"url": "../../z9cnfnrs/webapp",
      			"description": "Fiori application z9cnfnrs. Can be navigated to by using the intent 'z9cnfnrs-display'.",
      			"title": "z9cnfnrs"
      		}

      App1 Controller:

      	var hash = (oCrossAppNavigator && oCrossAppNavigator.hrefForExternal({ // generate the Hash to display object Id
      				target: {
      					semanticObject: "Create_NRS_Request",
      					action: "Display" //what made it work: this was not capitalized; it must be exactly like what u see in URL of the targetapp
      				}
      				,params:{"RequestId":oObject}
      			})) || ""; 

       

      Create_NRS_Request-Display was previously z9cnfnrs-display. This is what I ensured was matching.

       

      If your deployed apps worked with startupParameters, then it should work in the FLP sandbox too

      Author's profile photo Shashi Ranjan
      Shashi Ranjan

      I am trying this cross application navigation from Fiori Elements OVP application to a Fiori Elements ALP application but it does not seem to work. Any idea how to do it ?

      Author's profile photo JaiR S
      JaiR S

      Check this out for Cross App Navigation

      https://blogs.sap.com/?p=844247