docs
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.
Parent topic:Flexible Column Layout App Tutorial