Enable Flexible Column Layout for SAP UI5 Application

[srinihog]

Enable Flexible Column Layout for UI5 application with normal pages aggregation.

Prerequisite: An application with root view and three pages has created. Below is the screenshot of folder structure.

UI5 application folder structure

Route view, router and targets are added. App view is the route view, initially master view will be rendered, from there we navigate to second page and from there to third page.

"routing": {

            "config": {

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

                "viewType": "XML",

                "async": true,

                "viewPath": "flexiblelayout.view",

                "controlAggregation": "pages",

                "controlId": "app",

                "clearControlAggregation": false

            },

            "routes": [

                {   "name": "RouteMaster",

                    "pattern": ":?query:",

                    "target": [

                        "TargetMaster"

                    ]

                },

                {   "name": "SecondPage",

                    "pattern": "SecondPage",

                    "target": [

                        "Second"

                    ]

                },

                {   "name": "ThirdPage",

                    "pattern": "ThirdPage",

                    "target": [

                        "ThirdPage"

                    ]

                }

            ],

            "targets": {

                "TargetMaster": {

                    "viewType": "XML",

                    "transition": "slide",

                    "clearControlAggregation": false,

                    "viewId": "Master",

                    "viewName": "Master"

                },

                "Second": {

                    "viewType": "XML",

                    "transition": "slide",

                    "clearControlAggregation": false,

                    "viewName": "SecondPage"

                },

                "ThirdPage": {

                    "viewType": "XML",

                    "transition": "slide",

                    "clearControlAggregation": false,

                    "viewName": "ThirdPage"

                }

            }

        },

        "rootView": {

            "viewName": "flexiblelayout.view.App",

            "type": "XML",

            "async": true,

            "id": "App"

        }

    },

 

To convert this application into an Flexible Column Layout application. Follow the below steps.

1. In the root view that is App view, add the Flexible Column Layout control and give an unique ID to it.


2. Go to manifest.json file and make the required changes. Change the router class to 'sap.f.routing.Router'. Change the control aggregations to 'beginColumnPages' and provide the flexible column layout ID as control ID. Change route view, routes and target configurations as per below code snippet.
   

    "routing": {
   
               "config": {
   
                   "routerClass": "sap.f.routing.Router",
   
                   "viewType": "XML",
   
                   "async": true,
   
                   "viewPath": "flexiblelayout.view",
   
                   "controlAggregation": "beginColumnPages",
   
                   "controlId": "flexiID"
   
               },
   
               "routes": [
   
                   {   "name": "RouteMaster",
   
                       "pattern": ":?query:",
   
                       "target": [
   
                           "TargetMaster"
   
                       ] },
   
                   {   "name": "SecondPage",
   
                       "pattern": "SecondPage",
   
                       "target": [
   
                           "TargetMaster",
   
                           "Second"
   
                       ]  },
   
                   {   "name": "ThirdPage",
   
                       "pattern": "ThirdPage",
   
                       "target": [
   
                           "TargetMaster",
   
                           "Second",
   
                           "ThirdPage"
   
                       ]                }
   
               ],
   
               "targets": {
   
                   "TargetMaster": {
   
                       "viewType": "XML",
   
                       "transition": "slide",
   
                       "viewId": "Master",
   
                       "viewName": "Master"
   
                   },
   
                   "Second": {
   
                       "viewType": "XML",
   
                       "transition": "slide",
   
                       "viewName": "SecondPage",
   
                       "controlAggregation": "midColumnPages"
   
                   },
   
                   "ThirdPage": {
   
                       "viewType": "XML",
   
                       "transition": "slide",
   
                       "viewName": "ThirdPage",
   
                       "controlAggregation": "endColumnPages" 
   
                   }
   
               }
   
           },
   
           "rootView": {
   
               "viewName": "flexiblelayout.view.App",
   
               "type": "XML",
   
               "async": true,
   
               "id": "App"
   
           }​

   
   


3. To handle the layout data, created a global JSON model and named it as layoutMod.


4. Use the layoutMod to set the layout property for Flexible Column Layout control.


5. Views with button to navigate to next page.


6. Controller logic for setting the layout property and navigating to required target.

Now the application is enabled with Flexible Column Layout.

Application Enabled with Flexible Column Layout