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