Designing a Simple Form using SAPUI5 Elements in 5 Simple steps

In this Post, we will learn some of the popular UI5 components and how to use them in a form:

Simple Form Design 1 — We will follow the API Reference for the syntaxes from Here and how those components can also be found Here

Step 1:- Now let us go to the c9 IDE from Here,where we have already setup a basic framework to create UI5 application like

So , we will create a folder named Form under that we will create the HTML file named as myApp.html
Now we will add the UI5 library inside our c9 IDE like mentioned below:-

  <script id="sap-ui-bootstrap" type="text/javascript" src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m,sap.ui.layout,sap.ui.commons,sap.ui.demokit"></script>

Step 2:-We will write the UI5 code(the form) inside the script tag. Let’s go to the explorer and search for Simple Form. When it is opened we will search for its library(sap.ui.layout.form.SimpleForm), now click on the left side search image and search this library in the API Reference. Now select JsDoc Report – SAP UI development Toolkit for HTML5 – API Reference – sap.ui.layout.form.SimpleForm.

Step 3:-Now we have to add the simple form and add some properties like content which comprise of all the major things required in our form inside our code in cloud 9.

Inside the script tag let us add the Simple Form

<script>
var oMyForm = new sap.ui.layout.form.SimpleForm

also, the properties which we required. Now add all the components inside content required to design the form.


content:[
 
        
new sap.m.Label({text:"Simple Form"}),

new sap.m.Input({placeholder:"Simple Input",}),
new sap.m.Button({text:"Press me"
}),

new sap.m.RatingIndicator({
value:4.7
}),
new sap.m.TextArea({value:"Awesome Text Area"}),
new sap.m.DatePicker({
}),

new sap.ui.unified.FileUploader({}),
new sap.m.Bar({
contentRight:[new sap.m.Button({text:"Right Side"
})
]
}),

new sap.m.VBox({
items:[
new sap.m.Button({
text:"VBox Btn1"}),
new sap.m.Button({text: "VBox Btn2"
})
]
}),
new sap.m.HBox({
items:[
new sap.m.Button({
text:"HBox Btn1"
}),
new sap.m.Button({text:"HBox Btn2"})
]
})]
});     
</script>

In the Explored you might not find VBox and HBox, but we can find these in API reference and we are going to use these to align components vertically and horizontally respectively:

Step 4:-Now if we go to the browser console and type

 
v = new sap.m.VBox()


v.getItems

which means items aggregation is possible inside the VBox so we can use inside our code similarly for HBox too which are already added to the above content.

Step 5:-We will place the oMyForm inside our content div


oMyForm.placeAt("content");

Lastly, click on preview & select Live Preview File

Ye ! We have designed successfully our Simple Form using the above simple steps.

Stay tuned for more 🙂