FlexibleColumnLayout on second view not working SAP UI5

Question

I am building a view with hardcoded data. which comes from home screen to the next view which is supposed to be a split view screen.

I am using FlexibleColumnLayout and inside of it begin and end layout to call views from my view folder. I have been following this tutorial. and even then my split view is not expanding on click.

My aggregation looks like this (I am not sure if it is correct):

App -> (View1, FCLView)

FCLView -> (MasterVIew, DetailView)

FCLView:

<mvc:View displayBlock="true" height="100%" xmlns="sap.f" xmlns:mvc="sap.ui.core.mvc">
    <FlexibleColumnLayout id="flexibleColumnLayout" backgroundDesign="Solid">
        <beginColumnPages>
            <mvc:XMLView id="beginView" viewName="Ui5.Ui.view.MasterView"/>
        </beginColumnPages>
        <midColumnPages>
            <mvc:XMLView id="detailView" viewName="Ui5.Ui.view.DetailView"/>
        </midColumnPages>
    </FlexibleColumnLayout>
</mvc:View>

component.js

...
getHelper: function () {
    var oFCL = this.getRootControl().byId('flexibleColumnLayout'),
    oSettings = {
        defaultTwoColumnLayoutType: sap.f.LayoutType.TwoColumnsMidExpanded,
        initialColumnsCount: 2
    };


    return FlexibleColumnLayoutSemanticHelper.getInstanceFor(oFCL, oSettings);
}

MasterViewController

...
onListItemPress: function (oEvent) {
    MessageToast.show("here");
    var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
    
    var oFCL = this.oView.getParent().getParent();
    oFCL.setLayout(fioriLibrary.LayoutType.TwoColumnsMidExpanded);
}

I am following this tutorial

The scenario is, I have my first fullscreen view (View1) in which there's a button and it will navigate to second view which is a split view. (table and on clicking a row, the detail view will expand).

I am new to SAP, any kind of help would be appreciated.

Answer 1

It is difficult to debug your code excerpts, because there are several other things that can go wrong. (e.g. did you configure the use the sap.f.router instead of the sap.m.router in the manifest?)

The easiest way to start with a FlexibleColumnLayout is to begin with the UI5 MasterDetail-Template This can be downloaded from Github or easily created in the WebIDE with a few clicks (new Project from template -> select Master Detail Application)

You can read more about the Template in the Demokit