Creating SAPUI5 UI elements in XML views.

Creating UI elements in JS views and XML views is different. SAPUI5 is concentrating more on XML views recently and for developers also it is very easy to code and understand XML views. Since there are loads of UI elements are available, we can’t explain each and everything. But we can help you to get started with UI elements in XML views.

We suggest you to start with simple elements such as text, link, button etc.. Once you get familiar with XML syntax, you can try other elements easily.

For this tutorial we are using Web IDE and sample UI5 application which is created using Web IDE template. In case if you don’t have Web IDE account and sample project you can follow below mentioned 2 tutorials for step-by-step procedure to continue with this tutorial.

UI elements are created in view.xml files and controller.js files are used for coding functions and application logic. Now we have App.view.xml and it should looks as in below screenshot.

ssample_view

 

In this view we have App container and inside that we can place pages. In page container we have content aggregate where all our code will go. We do create all our UI elements inside content section.

Creating UI element

We have our application view ready and let’s see how we can create UI elements inside that.

Lets start with creating text element . This is the most simple and frequently used UI element. Since we are in xml views everything will be in tags format. xml uses angular brackets to open and close tags.

Ex: <UIElement> </UIElement>. Here <UIElement> is the opening tag and tag with ‘/’ is closing tag i.e. </UIElement>. We can also use inline tags for some elements such as <UIElement/> where instead closing tag we can just use ‘/’ at the end of first tag.

 Text element

Above one line code is enough for creating a simple text on application page. Here <Text> </Text> are tags and text is property and value is “Some Random Text”. Text element can have other properties such as tool tip, width etc. You can find all the possible properties of all the UI element in SAPUI5 Explored page.

Placing UI elements inside view

We can place these UI elements inside content section of our view as shown below

ui-controller

 

and the output would look like,

ui-demo

 

 

Creating UI element is easy as this much. There are plenty of UI elements available in Explored App. You can try them all if interested.