How to convert a Fiori Master-Detail app to Flexible Column Layout

[guilherme_maeda]

If you're familiar with UI5 development, you've probably used the Master-Detail app template from the WebIDE at least a few times.

Well, recently the Split Screen layout has been deprecated in the Fiori Design Guidelines (as of version 1.48). This means all of those Master-Detail applications' design are now outdated.

And while the Master-Detail WebIDE app template is not yet updated, it's quite easy to convert a new app to the new Flexible Column Layout.

(This post is about traditional UI5 apps. For Fiori Elements apps, there's already a great post about this:
https://blogs.sap.com/2018/03/11/fiori-elements-turn-your-list-report-into-a-master-master-detail-ap...)

 

Step 1 - Create a new app from template in WebIDE

For this example, we'll use the Northwind OData service:
http://services.odata.org/V2/Northwind/Northwind.svc/

First, create a destination in the Cloud Platform cockpit to allow our app to call the service:



Then, in WebIDE, create a new Project from Template and choose SAP Fiori Master-Detail Application.



Fill in the name of the application, namespace and choose our newly create Northwind destination.



For the master and detail object collections, choose Customers and Orders, respectively.



Finish the template creation and run the flpSandbox.html file. Here's our fresh deprecated app.



 

Step 2 - Change SplitApp to FlexibleColumnLayout

The first thing that needs to be done is to replace the retired sap.m.SplitApp control from our App.view.xml file with a new sap.f.FlexibleColumnLayout control:

<mvc:View

	controllerName="example.app.flc-northwind.controller.App"

	xmlns:mvc="sap.ui.core.mvc"

	displayBlock="true"

	busy="{appView>/busy}"

	busyIndicatorDelay="{appView>/delay}"

	xmlns="sap.m"

	xmlns:f="sap.f">

	<App>

		<f:FlexibleColumnLayout id="idAppControl" />

	</App>

</mvc:View>

Now we need to update the manifest.json file.

As the FlexibleColumnLayout is only available since the 1.46 library version, we need to specify it in the minUI5Version field. Also, we need to include the sap.f library as a dependency.



The router class for our app needs to be changed to the new sap.f.routing.Router.

Remove the controlAggregation field from the config section, as this will now be be handled at target level.

And specify a Layout Type for each route (check the docs for other possible layout types).



In the targets section, set a controlAggregation for each target: "beginColumnPages" for the master target and "midColumnPages" for the object target.



And voilà! Our Master-Detail app is now using the new Flexible Column Layout:



 

(Option) Step 3 - Enable the third level of navigation

The coolest thing about this new Flexible Column Layout, is that it enables a 3 column mode in large screens.

To enable that 3rd view in our app, we need to create a new view and controller to navigate further into the detail items.

After that, we'll have a Master-Detail-Detail application (yes, that is the correct name for it).

To create the new view, I created a new Master-Detail template app in WebIDE, but this time for the Orders entity set. Then I copied the Detail view/controller pair file to our app as DetailDetail, and adjusted the code accordingly.

In the Detail view, add a navigation to the line items table:

<ColumnListItem type="Navigation" press="onSelectionChange">

And in the Detail controller, add the navigation handling (copied and adapted from the Master controller):

/**

 * Event handler for the items list selection event

 * @param {sap.ui.base.Event} oEvent the list selectionChange event

 * @public

 */

onSelectionChange : function (oEvent) {

  var oList = oEvent.getSource(),

    bSelected = oEvent.getParameter("selected");



  // skip navigation when deselecting an item in multi selection mode

  if (!(oList.getMode() === "MultiSelect" && !bSelected)) {

    // get the list item, either from the listItem parameter or from the event's source itself (will depend on the device-dependent mode).

    this._showDetail(oEvent.getParameter("listItem") || oEvent.getSource());

  }

},

/**

 * Shows the selected item on the detail-detail page

 * On phones a additional history entry is created

 * @param {sap.m.ObjectListItem} oItem selected Item

 * @private

 */

_showDetail : function (oItem) {

  var bReplace = !Device.system.phone;

  this.getRouter().navTo("subObject", {

    objectId : oItem.getBindingContext().getProperty("CustomerID"),

    subObjectId : oItem.getBindingContext().getProperty("OrderID")

  }, bReplace);

}

In the manifest.json file, add the new route and target:

"routes": [

  ...

  {

    "pattern": "Customers/{objectId}/{subObjectId}",

    "name": "subObject",

    "target": [

      "master",

      "object",

      "subObject"

    ],

    "layout": "ThreeColumnsMidExpanded"

  }

 ...

 "targets": {

  ...

  "subObject": {

    "viewName": "DetailDetail",

    "viewId": "detailDetail",

    "viewLevel": 3,

    "controlAggregation": "endColumnPages"

  },

After correctly wiring the DetailDetail view, we can now open the 3rd level navigation:



 

Complete code is available in GitHub: github.com/koemaeda/fiori-fcl-master-detail-example