UI5ers Buzz #30: Leverage Fiori 2.0 with the New Flexible Column Layout

[annette_frei]

One of the latest layout patterns of the Fiori 2.0 guidelines is the sap.f.FlexibleColumnLayout. It offers a contextual view of detail information and can display up to three columns on the screen. In the following blog post we'll give you an introduction to this pattern.

Users can expand or collapse the columns according to their needs. This option is indicated by layout arrows next to the divider of the detail view. With the full screen button in the rightmost column, you can expand the view even further. This way, entire layouts can be shown as detail information in a responsive way on any devices. With these features, the user can grasp information much more intuitively, and your app becomes a great deal more flexible. Thanks to the optimized interaction between app and user, the control was added to the latest best practices.



For developers, too, the control has some nice advantages: The flexible column layout has predefined layout types with predefined routing, so you can use it out-of-the-box. Well, out-of-the-library, but you know what I mean. You can also take this initial state to tweak it for your usage scenario. In any case, programming is faster and easier as you don't need to start from scratch.

Another advantage is the performance improvement you get with the predefined layout. At first appearance, only the first (that is, the leftmost) column is shown, causing the server to send only one batch request for this initial view. By contrast, the traditional master-detail layout caused the server to send two initial batch requests: one for the master view, and one for the detail view, meaning more network traffic.

From a user perspective, this one-column-first appearance makes sense, too. Why should a user see detail information if no selection was made yet? It is a much more user friendly UX design if we allow the master view to take the available space on the screen for the user to get an overview first.

To see the flexible column layout in action, you can take a look at the updated Master Detail demo app or the UI5Lab browser. There are also three implementation examples in the OpenUI5 Demo Kit.

To enable the flexible column layout in your code, you just need to make three prerequisite settings in your manifest file:

• routerClass


• controlAggregation


• dependency to sap.f library

You can see an example in the code sample below that is taken from the updated Master Detail demo app with two columns.

1. Add the sap.f.routing.Router routerClass property in our manifest file to refer to the sap.f library. If you are updating an app, don't forget to change this routerClass property. If it still has the traditional value sap.m routing.Router, the app is not going to work.


2. Add the controlAggregation to your manifest. This is our default navigation target and should be beginColumnPages.


3. Add the sap.f library as libs dependency.

"routing": {

	"config": {

		"routerClass": "sap.f.routing.Router",

		"viewType": "XML",

		"viewPath": "sap.ui.demo.masterdetail.view",

		"controlId": "idAppControl",

		"controlAggregation": "beginColumnPages",

		"bypassed": {

			"target": [

				"master",

				"notFound"

			]

		},

		"async": true

	},



	...



	"dependencies": {

    	...

    	"libs": {

    		"sap.ui.core": {

    		},

    		"sap.m": {

    		},

    		"sap.f": {

    		}

    	}

    },

Of course, there are more details to learn about the flexible column layout pattern. In addition to the links above, the description in the Fiori Design Guidelines offers a more design-oriented view.

Did this make you curious? I hope this short introduction of this layout pattern serves as a good starting point for you to use this Fiori 2.0 element and motivates you to dig in!

Previous Post: UI5ers Buzz #29

Annette

Annette is a UI5 developer at SAP who loves to be creative and produce sophisticated Web front ends. Always in pursuit of the optimal user experience, she’s supporting UI5 communities, happy to share success and grateful for learning something new every day.