Skip to Content

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

To report this post you need to login first.

7 Comments

You must be Logged on to comment or reply to a post.

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

    (1) 
  2. Former Member

    Hi Elina,

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

     

    Best,

    Vikrant

    (0) 
  3. 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.

    (0) 
    1. Elina Visoki 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.

      (0) 
  4. 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  )

     

    (0) 
  5. 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

    (0) 

Leave a Reply