Skip to Content
Technical Articles
Author's profile photo Srinivasa Hogarehalli

Enable Flexible Column Layout for SAP UI5 Application

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%20application%20folder%20structure

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. App%20View
  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.Route%20View%20Configurations
     "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.Added%20Global%20JSON%20Model
  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%20Enabled%20with%20Flexible%20Column%20Layout

Application Enabled with Flexible Column Layout

 

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.