UI5- Simple Form

lightUI5- 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.

123


The output with default layout i.e Responsive Layout

4

make the layout settings as Responsive Layout. 


5


The output. The last output with no layout set and the current layout both have same meaning.

6


Make the seeings as Grid Layout.

7


The fields are little adjusted in the UI as compared to the Responsive Layout.

8


Make setting as ResponsiveGrid Layout

9


The UI controls are arranged little better. The major difference can be seen in the HOME section.

10


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


 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s