Introduction

In the first part of this blog we created two Fiori applications and also created a Fiori Launchpad Sandbox project were we configured it to display the two Fiori applications.  In this part we will add the code necessary to implement the app to app navigation between the two applications.  We can break this task into three parts

  • Create a list containing the Sales Order Items in the salesorders app
  • Implement the code to navigate from the sales order app to the material app
  • Implement the code in the material app to navigate to the selected sales order item material

Creating the Sales Order Items list

In the salesorders project open the file view/Detail.view.xml.  Towards the bottom of the file you will find the declaration for the footer, above this we will add the code to create the listing of the sales order items.  Add the following code between the </content> and <footer id=”detailFooter”> as shown.


        </content>
        <List items="{SOItems}" headerText="Order Items">
              <items>
                   <StandardListItem title="{Item}" type="Active" press="goToMaterialDetail"
                            info="{Material}"
                            description="{Description}">
                   </StandardListItem>
               </items>
     </List>
        <footer
            id="detailFooter">
          ...

After completing the code entry test the app to verify no issues exist.  The result should resemble..


Screen Shot 2015-02-12 at 1.20.27 PM.png



Implementing the Code to Navigate to the Material app

Within the List we defined the function goToMaterialDetail to handle the press event.  To implement the code to process this event, open the file view/Detail.controller.js in the salesorder application and add the following, making sure to place a comma at the appropriate place, either before or after the function, dependent on where you place it in your controller.


goToMaterialDetail: function(oEvent){
      if(sap.ushell && sap.ushell.Container && sap.ushell.Container.getService){
            var oCrossAppNavigator = sap.ushell.Container.getService("CrossApplicationNavigation");
            oCrossAppNavigator.toExternal({
                target : { semanticObject : "materials", action : "display" },
                params : {
                          "material" : oEvent.getSource().getInfo(),
                          "description": oEvent.getSource().getDescription()
                }
            });
        }else{
            alert("App to app navigation is not supported in this mode");
        }
  }









The key parts in this function are the values of the semanticObject and action, which must match those you defined in the fioriSandboxConfig.json and the params which are what will be received by the target application.  Once completed, select the fioriSandboxConfig.json of the FLPSandbox project and choose the menu option Run -> Run in SAP Fiori Launchpad Sandbox, or in version 1.8 or later, Run -> Run as -> SAP Fiori Component.  Choose the Sales Order App and then choose an Order Item from the list, this should navigate you to the material application.

Implementing the Code in the Material app to Handle the Navigation

To be able to handle the incoming parameters, the binding of the list needs to be removed from the view and handled in the controller.  In the materials app open view/Master.view.xml and search for the string items=”{/MaterialCollection}” and remove this from the list definition and save the file.  Open the file view/Master.controller.js, within this file we will define two functions, bindList which is defined as…


bindList:function () {
       var oTemplate, aFilters, oList;
       aFilters = this.getParamFilters();
       oList = this.getView().byId("list");
       oTemplate = oList.getItems()[0].clone();
       oList.bindAggregation("items", {
            path:'/MaterialCollection',
            template:oTemplate,
            filters:aFilters,
       });
  },






The second function will be called getParamFilters and defined as…


getParamFilters: function(){
  var sComponentId, oMyComponent, aStartupParameters;
  sComponentId = sap.ui.core.Component.getOwnerIdFor(this.getView());
  oMyComponent = sap.ui.component(sComponentId);
  if (oMyComponent && oMyComponent.getComponentData()) {
       aStartupParameters = oMyComponent.getComponentData().startupParameters;
       if (aStartupParameters) {
            if (aStartupParameters.material && aStartupParameters.material[0] && aStartupParameters.description && aStartupParameters.description[0]) {
                 var material = aStartupParameters.material[0];
                 var description = aStartupParameters.description[0];
                 var filters = [ new sap.ui.model.Filter("MaterialNumber", sap.ui.model.FilterOperator.EQ, material.toString())];
                 this.getView().byId("searchField").setValue(description);
            }
            return filters;
       }
  }
  return null;
  },






The bindList function will call the getParamFilters function to check if any values have been sent to the application.  If so, then we will set the value of the search field to the material description and create a filter with the material number.  Otherwise the function will just return a null value.  Using this value, the bindList function will bind the items aggregation to the MaterialCollection with the corresponding filter and template values.  Place the call to the bindList function within the onInit function of the controller.


onInit : function() {
     ...
     ...
     ...
     oEventBus.subscribe("Detail", "Changed", this.onDetailChanged, this);
     oEventBus.subscribe("Detail", "NotFound", this.onNotFound, this);
     this.bindList();
  },





In addition add the following line of code in the onSearch function to clear the app to app filter


onSearch : function() {
     ...
     ...
     ...
     //add this line to clear the app to app application filter
     this.getView().byId("list").getBinding("items").aApplicationFilters = [];
    
     // Update list binding
     this.getView().byId("list").getBinding("items").filter(filters);
     ...
     ...





Conclusion

At this point your application should be complete.  After making sure all of the files have been saved, select the fioriLaunchpadSandbox.json of the FLPSandbox project and then choose the menu option Run -> Run in SAP Fiori Launchpad Sandbox, or in version 1.8 or later, Run -> Run as -> SAP Fiori Component.  Choose the Sales Order App and then choose an Order Item from the list, which should navigate you to the material application.  Verify that the master list has been filtered correctly and that the filter can be removed without issue.

To report this post you need to login first.

13 Comments

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

  1. Wolfgang Röckelein

    Is there a documentation of values of the available semanticObject, action and parameters of the SAP delivered Fiori Apps available?

    (0) 
    1. Wolfgang Röckelein

      I am looking eg how to navigate to semantic object MaintenanceOrder, activity display and I am searching for the info which parameters I need to set.

      (0) 
  2. Timothy Muchena

    Hi

    Thanks for the blog.

    I have the Items displayed but the problem is the if I select one order its displaying items for all orders. Is there something I need to change in the master controller?

    Kind regards

    (0) 
    1. Jamie Cawley Post author

      Hi Eli,

      You may have a typo somewhere in your app.  If you open the app and then show the developer tools, select the network tab.  When you select a sales order you should see a request that looks like

      sap/opu/odata/sap/SALESORDERXX/SOHeaders(‘0000000002’)/SOItems?$skip=0&$top=2


      Regards,

      Jamie

      SAP – RIG

      (0) 
  3. BHARANIDHARAN S P M

    Hi Jamie,

    Finally i am able to achieve Fiori App to App navigation in WebIDE.

    Thanks for your valuable responses to my queries.

    How to navigate from one app to another app in fiori launchpad ?

    Eg. from My account app to My Contact app or vice-versa

    Regards,

    Bharani

    (0) 
    1. Jamie Cawley Post author

      Some of the apps have app to app navigation built into them, otherwise you would have to implement the code within an extension app.

      Regards,

      Jamie

      SAP – RIG

      (0) 
  4. Gregor Wolf

    Hi Jamie,

    I’ve deployed the apps I’ve created using the WebIDE wizard to my local ABAP Stack (with SW component SAP_UI 740 SP14) added them to a Catalog and Group in the Launchpad and configured the semantic navigation. Unfortunately at the first click I always got the error message:

    “adding element with duplicate id ‘app'”

    in the JavaScript console.

    What fixed the problem for me was replacing the value of id which is set to app by default to EPMCustomers in the rootView section of the Component.js file:

    “rootView”: {

      “viewName”: “com.csw.epm.customers.view.App”,

      “type”: “XML”,

      “id”: “EPMCustomers”

    },

    Then the navigation between my two apps works already on the first click.

    What’s not working is the navigation back to the app where I’ve left. Any hints?

    Best regards

    Gregor

    (0) 
  5. Ezgi Yilmaz

    Heyy
    I wanted to navigate between 2 views but this error message appears.

    Uncaught TypeError: Cannot read property ‘setHash’ of undefined

    I don’t know what to do. Can you help me please.

    I’m desperate 🙁

     

    (0) 

Leave a Reply