Let’s start creating a simple UI5 app, based on the below mockup design:

Step 1. Open the existing project(myFirstApp) in eclipse. Goto demo.view.js, for the title property we have written as Hello World! before(blog link here), let’s change it to “Simple App” which is the title of our mock up design.

Step 2. Now we need to add an input text bar and a button, for doing so we need to go to the Open UI5 online library.Open the URL from here. Click on explored, now we can see all the components and elements of the application which we need to use.

Step 3. Now search for input keyword, then again drag down for the same(input) keyword,we need an input with a placeholder( i.e. inside the text field we should be able to see the name).Let’s check the first example(Input-Assisted).

Step 4. Now click on it–>goto the top right corner–>click on it to show the source code for this sample. Now it will show the code what we required as per the mockup design for the text field.

Step 5. Now let’s go to IDE ,eclipse and we will be doing bit correction inside the code,we will be creating an object of sap.m.Input. Here ‘o’ prefix to our variable refers to that it contains an object (similarly, we will be using ‘a’ if we were creating an array).Now we can pass the parameters inside it with syntax :

placeholder:"Enter Name",

Let’s add the submit button to the page.In our code just create a button object and include the text property(Submit) too.

Step 6. Yes ! Just refresh the index.html page to see the updated output.

We have created our first application as per the Mockup diagram.We will learn more in our next post. Stay tuned,Thanks ! 🙂

Stay tuned and thanks for subscribing to our youtube channel ! 🙂