Skip to Content

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

13 Comments
You must be Logged on to comment or reply to a post.
  • 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.

  • Hi Elina,

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

     

    Best,

    Vikrant

  • 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.

    • 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.

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

     

  • 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

  • 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

     

  • 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

     

     

  • 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.

     

     

  • 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 ?