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

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