FlexibleColumnLayout is not expanding. Uncaught TypeError: oFCL.setLayout is not a function

[emilymcox13]

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:

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);}

This onPress function hits, but gives an errror on the last line "Uncaught TypeError: oFCL.setLayout is not a function"

Whereas, in the tutorial I am following it does not look like I have to do anything else besides this.

Any kind of help would be appreciated 🙂

[ramuknura1395]

Hi Emily Cox,

It is not working because getParent method doesn't correctly linked to the <FlexibleColumnLayout>.

onListItemPress: function () { var oFCL = this.oView.byId("flexibleColumnLayout");
oFCL.setLayout(fioriLibrary.LayoutType.TwoColumnsMidExpanded); }

If it works through id then check the getparent() through debugger and make it right.

Regards,

Arun.D

[PankajSingh9]

Did it resolve ? Or is there any other solution to it. I am too facing smilar issue.

[Jay_Dalsaniya]

I was trying out flexible column tutorial and was facing the same issue. Below code worked for me

      onListItemPress: function (oEvent) {
        // Get the FlexibleColumnLayout and set to two-column layout
        var oAppView = this.getOwnerComponent().getRootControl();
        var oFCL = oAppView.byId("app");
        
        if (oFCL && typeof oFCL.setLayout === "function") {
          oFCL.setLayout(fioriLibrary.LayoutType.TwoColumnsMidExpanded);
        }

        // Get the selected item's binding context and set it to the detail view
        var oSelectedItem = oEvent.getSource();
        var oBindingContext = oSelectedItem.getBindingContext();
        
        if (oBindingContext) {
          // Get the detail view and set the binding context
          var oDetailView = oAppView.byId("detailView");
          if (oDetailView) {
            oDetailView.setBindingContext(oBindingContext);
          }
        }
      }