UI5- Simple Form with different Form Layouts
- GridLayout
- ResponsiveLayout
- ResponsiveGridLayout
The post shows how to design a simple form. The default layout is Responsive Layout.
Create a SAP UI5 project without an initial view. In the Index.html file write the below code.
The output with default layout i.e Responsive Layout
make the layout settings as Responsive Layout.
The output. The last output with no layout set and the current layout both have same meaning.
Make the seeings as Grid Layout.
The fields are little adjusted in the UI as compared to the Responsive Layout.
Make setting as ResponsiveGrid Layout
The UI controls are arranged little better. The major difference can be seen in the HOME section.
Code Snippet:
var oSForm = new sap.ui.layout.form.SimpleForm(
{
//layout: sap.ui.layout.form.SimpleFormLayout.GridLayout,
//layout: sap.ui.layout.form.SimpleFormLayout.ResponsiveLayout, // default
layout: sap.ui.layout.form.SimpleFormLayout.ResponsiveGridLayout,
content:[
new sap.ui.core.Title({text:”Person”}),
new sap.ui.commons.Label({text:”Name”}),
new sap.ui.commons.TextField({}),
new sap.ui.commons.TextField({}),
new sap.ui.commons.Label({text:”Date of Birth”}),
new sap.ui.commons.DatePicker({}),
new sap.ui.commons.Label({text:”Gender”}),
new sap.ui.commons.RadioButtonGroup({
columns: 2,
items: [new sap.ui.core.Item({text: “Male”}),
new sap.ui.core.Item({text: “Female”})]
}),
new sap.ui.core.Title({text:”Address”}),
new sap.ui.commons.Label({text:”Street/Number”}),
new sap.ui.commons.TextField({}),
new sap.ui.commons.TextField({}),
new sap.ui.commons.Label({text:”Zip Code/City”}),
new sap.ui.commons.TextField({}),
new sap.ui.commons.TextField({}),
new sap.ui.commons.Label({text:”Country”}),
new sap.ui.commons.TextField({}),
new sap.ui.core.Title({text:”Contact”}),
new sap.ui.commons.Label({text:”Mobile”}),
new sap.ui.commons.TextField(),
new sap.ui.commons.Label({text:”Email”}),
new sap.ui.commons.TextField(),
new sap.ui.core.Title({text:”Office”}),
new sap.ui.commons.Label({text:”Location”}),
new sap.ui.commons.TextField(),
new sap.ui.commons.Label({text:”Building”}),
new sap.ui.commons.TextField(),
new sap.ui.commons.Label({text:”Room”}),
new sap.ui.commons.TextField(),
new sap.ui.core.Title({text:”Home”}),
new sap.ui.commons.Label({text:”Location”}),
new sap.ui.commons.TextField(),
new sap.ui.commons.Label({text:”Building”}),
new sap.ui.commons.TextField(),
new sap.ui.commons.Label({text:”Room”}),
new sap.ui.commons.TextField()
] }).placeAt(“content”);
SAPCODES 