step-13-setting-the-list-detail-pattern-cb38637.md

Step 13: Setting the List-Detail Pattern

In this step, we set up the app to follow the list-detail pattern.

Apps using the list-detail pattern operate with a layout divided into two separate areas - a list area and a details area. The list area displays the items available to the user and the details area displays the details for an item that is selected in the list. If your use case requires it, you can set the FlexibleColumnLayout to use a maximum of two columns. For more information, see the SAP Fiori Design Guidelines.

Preview

list-detail pattern with FlexibleColumnLayout

Coding

You can view and download all files at Flexible Column Layout App - Step 13.

webapp/Component.js [MODIFY]

		...
		getHelper: function () {
			return this._getFcl().then(function(oFCL) {
				var oSettings = {
					defaultTwoColumnLayoutType: fioriLibrary.LayoutType.TwoColumnsMidExpanded,
					defaultThreeColumnLayoutType: fioriLibrary.LayoutType.ThreeColumnsMidExpanded,
					initialColumnsCount: 2,
					maxColumnsCount: 2
				};
				return (FlexibleColumnLayoutSemanticHelper.getInstanceFor(oFCL, oSettings));
			 });
		},
		...

We set maxColumnsCount parameter of the getHelper method to 2.