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’.
Create a new SAPUI5 Project and write below code in ‘View’ and check the output. You may find the source code on GitHub: https://github.com/iankitgarg/SAPUI5
All views are coded in XML. Below are key points :
- In SAPUI5 we have ‘Controls’ like Label, Input, VBox, Button etc.
- Each Control has an open tag (<>) and close tag (</>)
- 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.