The Beacon nugget, Learning Floorplans – and Layouts, Too, explained the difference between layouts and floorplans. The flexible column layout (FCL) can display up to three floorplans on a single page in a flexible and responsive way. FCL offers a high overall performance since the page stays the same while navigating. Since no new pages need to be loaded, the user experiences a smooth flow.
FCL can contain up to three columns, each displaying a different floorplan. It is supposed to be used for master-detail or master-detail-detail use cases from left to right, going from basic info to deeper details.
FCL adapts to the screen sizes of desktops, tablets, and phones. Whereas desktops have enough space for up to three columns, tablets provide a desktop-like experience by displaying two columns. For optimal readability, phones show one column at a time.
Size L/ XL (desktop) offers 5 layouts
Size M (tablet) offers 3 layouts
Size S (phone) offers 1 layout
You can easily adjust the current layout to its needs with a few actions.
As an SAP Fiori element, FCL already includes these actions plus routing behavior.
Drilling in or navigating forward opens a new column. The forward and backward browser navigation works, too. As you can see below, the freshly opened column is initially displayed in minimized mode.
Exemplary forward navigation starting with full screen on size XL/ L
Exemplary forward navigation starting with full screen on size M
Depending on the last action, Back closes a column or exits the full screen mode.
However, Back does not restore layout changes (such as switching from 33% + 67% to 67% + 33%) neither reopens columns that were closed via close (X).
Exemplary backward navigation on size M
For more details, please check out the article in the SAP Fiori design guidelines.
Many thanks to ux designer and layouts expert Jan-Michel Blinn!
Lots of options: it’s flexible!
FCL can contain up to three columns, each displaying a different floorplan. It is supposed to be used for master-detail or master-detail-detail use cases from left to right, going from basic info to deeper details.
FCL adapts to the screen sizes of desktops, tablets, and phones. Whereas desktops have enough space for up to three columns, tablets provide a desktop-like experience by displaying two columns. For optimal readability, phones show one column at a time.
Size L/ XL (desktop) offers 5 layouts
Size M (tablet) offers 3 layouts
Size S (phone) offers 1 layout
How to interact with FCL
You can easily adjust the current layout to its needs with a few actions.
As an SAP Fiori element, FCL already includes these actions plus routing behavior.
Going forward
Drilling in or navigating forward opens a new column. The forward and backward browser navigation works, too. As you can see below, the freshly opened column is initially displayed in minimized mode.
Exemplary forward navigation starting with full screen on size XL/ L
Exemplary forward navigation starting with full screen on size M
Backward navigation
Depending on the last action, Back closes a column or exits the full screen mode.
However, Back does not restore layout changes (such as switching from 33% + 67% to 67% + 33%) neither reopens columns that were closed via close (X).
Exemplary backward navigation on size M
For more details, please check out the article in the SAP Fiori design guidelines.
Many thanks to ux designer and layouts expert Jan-Michel Blinn!
- SAP Managed Tags:
