Flexible Column Layout Navigation (SAPUI5)

0
votes

I've created an app with SAPUI5 that makes use of a Flexible Column Layout.

I'm trying to navigate between pages, but I'm having difficulty.

Here is the main xml view:

<mvc:View id="Main" controllerName="SAP.demo.controller.Main" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
displayBlock="true" xmlns="sap.f" xmlns:core="sap.ui.core" xmlns:m="sap.m">
<m:App id="idAppControl">
    <m:pages>
        <m:Page title="{i18n>title}">
            <m:content>
                <FlexibleColumnLayout id="fcl" initialMidColumnPage="start" layout="TwoColumnsBeginExpanded">
                    <beginColumnPages>
                        <m:Page title = "Master">
                            <m:content>
                                <Button text="Chart Button" press="displayChart"/>
                            </m:content>
                        </m:Page>
                    </beginColumnPages>
                    <midColumnPages>
                        <m:Page id="start" title = "Detail">
                            <m:content>
                                <core:Fragment fragmentName="SAP.demo.view.Start" type="XML"/>
                            </m:content>
                        </m:Page>
                        <m:Page id="charts" title="Charts">
                            <m:content>
                                <core:Fragment fragmentName="SAP.demo.view.Charts" type="XML"/>
                            </m:content>
                        </m:Page>
                    </midColumnPages>
                </FlexibleColumnLayout>
            </m:content>
        </m:Page>
    </m:pages>
</m:App>

I want to navigate from the start page to the charts page. The controller is as follows:

sap.ui.define([
"sap/ui/core/mvc/Controller"], function (Controller) {
"use strict";

return Controller.extend("SAP.demo.controller.Main", {
    displayChart:function(oEvent){
        this.byId("fcl").toMidColumnPage("charts");

    }
});});

Can someone please advise as to what I'm doing wrong, because it stays on the start page even after I press the button.

2
sapui5
Your view is probably wrapping the ID, you should try replacing "charts" with this.getView().createId("charts") - TiiJ7

2 Answers

2
votes

This is because the real ID of the view is not "charts" but "__xmlview0--charts". Be careful with the ID always and use the API method byId('theIDHere').

In your case use one of the following options:

displayChart:function(oEvent){
   this.getView().byId("fcl").toMidColumnPage(this.getView().byId("charts"));
}

Or

displayChart:function(oEvent){
   this.getView().byId("fcl").toMidColumnPage(this.getView().byId("charts").getId());
}

And also add the correct XML namespace to your button

<m:Button text="Chart Button" press="displayChart"/>
0
votes

Managed to fix it with the following code:

displayChart: function () {
    this.byId("fcl").toMidColumnPage(this.createId("charts"));
},