Flexible Column Layout...Smart Template (FIORI 2.0)...SAP WEB IDE

[Former Member]

Introduction :

Project is based

The flexible column layout is a layout control that displays multiple floorplans on a single page. This allows a faster and more fluid navigation between multiple floorplans compared to the usual page-by-page navigation. The flexible column layout offers different layouts with up to three columns (panels). Depending on which panel the user is focused on, it can get prioritized (wider). The user can also switch between different layouts and view the last panel in full screen.

Agenda:

In Smart Template(FIORI 2.0) without flexi feature. We have one List Report which contain Header level information and by clicking row of list report we navigate into object page which contain header info as well as item level information.like below snapshot.

Without flexible column layout feature:

First View : List Report



Second View : Object Page 



Even we can implemented more objects page depending upon data level navigation.

With Flexible column layout feature: 

it will look

How to enable flexible column layout : 

open Smart Template Project folder and open manifest.json



 

To enable the flexible column layout in an app, we have to create an entry in manifest.json like below

Note : application version should be above 1.4

"sap.ui.generic.app": {

        "_version": "1.1.0",

        "settings": {

            "flexibleColumnLayout": {

                "defaultTwoColumnLayoutType": "TwoColumnsMidExpanded",

                "defaultThreeColumnLayoutType": "ThreeColumnsEndExpanded"

            }

        },

        "pages": [...

Save Project and Run it 🙂

Now we have successfully enabled Flexible Column Layout  in samrt template (FIORI 2.0).

 

Please share feedback.............

 

 

Regards

Virendra Soni