Search code examples
sapui5

Why it does not show two columns?

I am trying to use Flexible Column Layout on my app and I have trouble with the routing. However it does not show the expected result on the screen.

The routing is defined as follows:

"routing": {
        "config": {
            "routerClass": "sap.f.routing.Router",
            "viewType": "XML",
            "async": true,
            "viewPath": "com.example.RequestAccess.view",
            "controlId": "fcl",
            "transition": "slide",
            "bypassed": {}
        },
        "routes": [{
            "pattern": "jobprofile",
            "name": "jobprofile",
            "target": [
                "JobProfileSelector",
                "JobProfileOrder"
            ]
        }, {
            "pattern": ":layout:",
            "name": "authorize",
            "target": [
                "Authorization"
            ]
        }],
        "targets": {
            "Authorization": {
                "viewName": "Authorization",
                "controlAggregation": "beginColumnPages"
            },
            "JobProfileOrder": {
                "viewName": "JobProfileOrder",
                "controlAggregation": "midColumnPages"
            },
            "JobProfileSelector": {
                "viewName": "JobProfileSelector",
                "controlAggregation": "beginColumnPages"
            }
        }
    }
},

when I do the call

var oRouter = this._getRouter();
oRouter.navTo("jobprofile");

it shows one column layout instead two columns. I expect to be two columns, because I have defined:

"pattern": "jobprofile",
"name": "jobprofile",
"target": [
    "JobProfileSelector",
    "JobProfileOrder"
]

Two targets for the path /jobprofile. I expect, that the app should show like this: enter image description here

What am I doing wrong?

Update

I have created an example app https://github.com/softshipper/fclpoc. Click on Go to jobprofile

enter image description here

and you will redirect to page /jobprofile path. Here I expect, that it is going to show me Second and Third view next to each other, like master detail view.

Solution

  • You have to adjust property layout of your FlexibleColumnLayout in order to have 1, 2 or 3 columns. Default is 1.

    In your root view, you already have a binding on this property, which is a good idea.

    <FlexibleColumnLayout id="fcl"
                stateChange="onStateChanged"
                layout="{/layout}"
                backgroundDesign="Solid">
            </FlexibleColumnLayout>

    However, you are not calling function _updateLayout from the App.controller.js anywhere.

    I suggest refactoring this controller to adjust the layout based on the active route.