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.
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.
The Layout Arrow expands the width of a column. It is located next to the divider and points in the direction in which a column can be expanded. By default, the width is 33% for the second column and 25% for the third.
The Close icon closes the last (rightmost) column. If you close the second column while the third column is minimized, both columns are closed. A dialog can appear to warn the user about losing unsaved data.