SAPUI5 Example : Application Form

Welcome Back! Now, we have designed Hello World project in the previous tutorial. We discussed each line of code in detail. But in realtime we are going to get much more challenging screens. So, Let’s try another example.

This time, we are going to introduce ‘Controls’ in our project. Controls represent elements which you are going to use in View. Buttons, Form, Tables, Text etc. are some of the controls. In this SAPUI5 Example, we are going to discuss ‘Form’.

All controls have some properties. E.g. Label has text, Input has width etc.

Here VBox is also a control, acting like a container aligning all controls vertically in output.

‘onSubmit’ function (to be written in the controller) will handle press event of the button.

As we have already seen, the syntax of the function declaration in Controller, let’s proceed with ‘onSubmit’ function.

Once User press ‘Submit’ button, he will get a pop-up showing message “Registration Successful”.

To understand the significance of properties of controls, put your hands dirty by :

a) removing VBox from View

b) remove ‘width’ from Input box and see the output

Whatever we write in ‘View’ will be reflected in the output. In this SAPUI5 Example, we have been introduced to Controls which are the smallest block of View. You must have noticed that our Application Form is not properly aligned. In upcoming tutorials, we will make this form more interactive and aligned. We will also add validations in the form such that required fields can’t be left blank.

Share this Tutorial with your colleagues using following Social Platforms and Stay tuned for next tutorials.