Ultra-wide monitor for application – SAP Fiori Elements with Flexible Column Layout

Web developers like having big monitors side by side and start coding, this gives extra space and extra productivity.  Nowadays we have even 49 inch monitor which is massive.

Image courtesy: https://www.samsung.com/us/business/products/computing/monitors/800-series/cj890-series-49-curved-lc49j890dknxza/

Likewise I started to think If I have something like ultrawide monitor for my application which gives me more productivity . At that moment it slipped my mind to look into SAP Fiori elements with flexible column layout.

What is SAP Fiori elements?

SAP Fiori elements provide a framework for the most common application patterns and supports commonly used UX defined floor plans which cater to the need to majority of the applications.

A feature which has off late gained a lot of traction is flexible column layout .In this blog I am going to tell you more about the flexible column layout which has been enhanced significantly over past few quarters.

Flexible column layout is like ultrawide monitor for your application in which you can configure different layouts in an application. SAP Fiori elements makes use of flexible column layout and appends its own features to make it more intuitive and user friendly.The flexible column layout offers different layouts with up to three columns (1, 2, 3)

Flexible column layout has now been enabled in both draft enabled and non-draft enabled SAP Fiori applications. In draft enabled SAP Fiori applications we can configure three column layout and do CRUD operations, whereas in non-draft enabled SAP Fiori applications the support is for display mode. Enablement of three column layout for non-draft enabled SAP Fiori applications is been worked for upcoming SAP S/4HANA releases.

Enabling  flexible column layout is simple and can be configured with varied number of columns, easily making a popular feature among the consuming application teams.To enable flexible column layout, we need to add the below entries to the manifest of the application. This configuration will be under sap.ui.generic.app.

(New to SAP Fiori elements development? Please follow this link )

"sap.ui.generic.app": {
	"_version": "1.1.0",
	"settings": {
		"flexibleColumnLayout": {
			"defaultTwoColumnLayoutType": "TwoColumnsMidExpanded",
			"defaultThreeColumnLayoutType": "ThreeColumnsEndExpanded"
		}
	}
}

There are different configurations that can be done on flexible column layout

1. TwoColumnsBeginExpanded
2. TwoColumnsMidExpanded
3. ThreeColumnsMidExpanded
4. ThreeColumnsEndExpanded

Need to concentrate on particular column, no worries, we need to click on full screen icon which is present on the second and the third column. Done with full screen, now going back to previous state is a piece of cake, just exit the fullscreen mode by clicking on the exit fullscreen icon.

Here is a short demo of SAP Fiori elements application in flexible column layout.

Click on the back button will also restore to the previous state of the columns. Furthermore, we can push or slide the columns if we want to see some more details and stay on the same page. Cool, isn’t it?

Reference: https://experience.sap.com/fiori-design-web/flexible-column-layout/#minimized-third-column

Based on the complexity of the application we can achieve various behavior patterns

Reference: https://experience.sap.com/fiori-design-web/flexible-column-layout/#entering-and-exiting-full-screen-mode

At max we can show 3 columns in same page. Furthermore, this configuration also be controlled using the property using maxColumnsCount.

One more tip, we can always make the third column to open in full screen mode by adding the “defaultLayoutType” to “EndColumnFullScreen” in manifest.json. Likewise, there are many options to DefaultLayoutType example : “OneColumn”, “MidColumnFullScreen” .

"pages": [{
		"navigationProperty": "to_Item",
		"defaultLayoutType": "EndColumnFullScreen",
		"entitySet": "STTA_C_SO_SalesOrderItem_ND",
		"component": {
			"name": "sap.suite.ui.generic.template.ObjectPage",
			"settings": {
				"gridTable": false,
				"sections": {
				  "to_ScheduleLine::com.sap.vocabularies.UI.v1.LineItem": {
						"navigationProperty": "to_ScheduleLine",
						"entitySet": "STTA_C_SO_SalesOrderSL_ND"
					}
				}
			}
		},
		"pages": [{
			"navigationProperty": "to_ScheduleLine",
			"entitySet": "STTA_C_SO_SalesOrderSL_ND",
			"component": {
				"name": "sap.suite.ui.generic.template.ObjectPage"
			}
		}]
	}

In SAP Fiori elements, we can bookmark url of the app in  flexible column layout, when fired the copied url the app will be rendered in the same state as the state when it was copied (most liked featured).

In this layout SAP Fiori elements has taken important aspects in term of the user experience. The end user may get lost while selecting rows in the table. It can very confusing for the user w.r.t navigation if the number of rows is more, it will be very difficult for the end user to identify from where he navigated. Same navigation complexity can be carried over to 2^nd and 3^rd column. To avoid this complexity SAP Fiori elements provides feature called navigation indicator which tell the end user from which row he has navigated across different columns.

What if the end user opens all the three columns and changes the selection to a different item in first column? If that is the case the last column which was open it will be closed and selected item data in the first column will be displayed in other words If the item is selected in the first column, and the last column was open before the new item was selected, selecting the item closes the last column.

Please refer to this link https://sapui5.hana.ondemand.com/#/topic/3768c47116ad47308699e6ed042c23ed for more information about SAP Fiori elements

So, what do you think isn’t SAP Fiori elements with flexible column layout is an ultra wide monitor for your application. Please let me know your thoughts in the comment section below.