step-2-creating-an-empty-flexible-column-layout-bf38e4d.md

Step 2: Creating an Empty Flexible Column Layout

In this step, we add an instance of the sap.f.FlexibleColumnLayout control in the main view of the app.

Preview

An empty instance of the sap.f.FlexibleColumnLayout control

Coding

You can view and download all files at Flexible Column Layout App - Step 2.

webapp/manifest.json [MODIFY]

{
	"_version": "1.38.0",
	"sap.app": {
		"id": "sap.ui.demo.fcl",
		"type": "application",
		"applicationVersion": {
			"version": "1.0.0"
		}
	},
	"sap.ui5": {
		"rootView": {
			"viewName": "sap.ui.demo.fcl.view.App",
			"type": "XML",
			"async": true,
			"id": "fcl"
		},
		"dependencies": {
			"minUI5Version": "1.98.0",
			"libs": {
				"sap.f": {},
				"sap.ui.core": {}
				}
		}
	}
}

First, we add the sap.f library as a dependency in the manifest.json file.

webapp/view/App.view.xml [NEW]

<mvc:View
	displayBlock="true"
	height="100%"
	xmlns="sap.f"
	xmlns:mvc="sap.ui.core.mvc">
		<FlexibleColumnLayout id="flexibleColumnLayout" backgroundDesign="Solid"></FlexibleColumnLayout>
</mvc:View>

We create a new App.view.xml that contains an instance of the sap.f.FlexibleColumnLayout control. Keep in mind that there is no content yet and the app appears as an empty page.

webapp/manifest.json [MODIFY]

{
	"_version": "1.38.0",
	"sap.app": {
		"id": "sap.ui.demo.fcl",
		"type": "application",
		"applicationVersion": {
			"version": "1.0.0"
		}
	},
	"sap.ui5": {
		"rootView": {
			"viewName": "sap.ui.demo.fcl.view.App",
			"type": "XML",
			"async": false,
			"id": "fcl"
		},
		"dependencies": {
			"minUI5Version": "1.98.0",
			"libs": {
				"sap.f": {},
				"sap.ui.core": {}
			}
		},
		"config": {
			"fullWidth": true
		}
	}
}

We set the rootView to point to the created App.view.xml.