Step_2_Creating_an_Empty_Flexible_Column_Layout_bf38e4d.md

loio
bf38e4de70084477b9e104bf6f6d7737

view on: demo kit nightly build | demo kit latest release

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.12.0",
	"sap.app": {
		"id": "sap.ui.demo.fiori2",
		"type": "application",
		"applicationVersion": {
			"version": "1.0.0"
		}
	},
	"sap.ui5": {
		"rootView": {
			"viewName": "sap.ui.demo.fiori2.view.App",
			"type": "XML",
			"async": true,
			"id": "fcl"
		},
		"dependencies": {
			"minUI5Version": "1.60.0",
			"libs": {
				"sap.ui.core": {},
				"sap.f": {}
				}
		}
	}
}

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.12.0",
	"sap.app": {
		"id": "sap.ui.demo.fiori2",
		"type": "application",
		"applicationVersion": {
			"version": "1.0.0"
		}
	},
	"sap.ui5": {
		"rootView": {
			"viewName": "sap.ui.demo.fiori2.view.App",
			"type": "XML",
			"async": false,
			"id": "fcl"
		},
		"dependencies": {
			"minUI5Version": "1.60.0",
			"libs": {
				"sap.ui.core": {},
				"sap.f": {}
			}
		},
		"config": {
			"fullWidth": true
		}
	}
}

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

Parent topic:Flexible Column Layout App Tutorial

Next:Step 1: Setting Up the Initial App

Previous:Step 3: Using Dynamic Page for the List View