Hi, I provide training in SAP UI5. Also feel free to checkout my new web page https://saptechblog.com

A Simple application using button control


Button UI element:

This tutorial explains you how to create a simple Button control in SAP UI5. Button is an interactive element that triggers actions. Unlike in Webdynpro ABAP custom styles can be created for the button and added to the Button UI element.

For more information:


Part 1: Creating the application project

Create a simple UI5 Project. Click on file->New->Project.


Select application project in SAP UI5 application development and click on next.


Enter the project name and click on next button.


Enter the name for the view and choose the development perspective and click on finish or next.


Note: Click on next will display the list of components to be developed as a part of this application project.

Three files will be created as a part of the application project namely.

1. Index file

2. Controller file

3. View file

Controller and view file extensions depends on the type of development perspective chosen at the time of creation of application project.


Part 2: Create the UI controls

Go the main view and create the button control UI element in the function Create Content.


SAP has created a library called sap.ui.commons. This library contains the functions that are necessary for creating the UI elements. We need not explicitly include this library file into our development environment. This library file was added by default to the application project by the framework.

Here, I am calling the function button to create the instance of button control by passing the attributes required by the function in the form of JSON notation.

Alternatively, you can also use this detailed approach for creating the control.


Return keyword, returns the object instance to the program (index.html) that calls the Views. The index.html file, then create the controls and place it in the web page.

Alternatively, you can also create your own place holders in the form of HTML and place the UI element in the desired place.


Part 3: Testing the application project.

Place the cursor on the index.html and click on the run button.


Select run on server and click on OK.


Select the tomcat server to test the application locally and check the option always use this server to run the application to avoid repeating the process and click on finish.





Thus the simple creation of button UI element is completed. Now let’s take a look into more some additional options.

Button with Image Icon:

In order to display the button text with an image, we need to fill the icon property of the button control. Since this was a demo server, we don’t have access to the sap icon. Hence I have loaded the image in the web content folder.

I have loaded the below icon save image in the web content folder


Create a folder images in the Web Content folder and simply copy(Ctrl+c) and paste(ctrl+v) it on web content folder.


Add the icon property to the button control.




Explore the other special features of the button like lite property and use of styles like emphasized, approved and reject.


Button with custom styles:

We can also add our own styles to the button control by disabling the standard styles. In order to create our own styles we need to create our own styles sheet and add the styling features there.

Right click on the web content folder and create a folder and name it styles.


Then, right click on the styles folder and create a file and name it to style.css.


Create a style class for the button as shown below. You can style your button according to your needs.


Link the style sheet to the index file of your application project.


Disable the standard style function assigned to the button control and add your custom style created.




About Arun


Post a Comment

Powered by Blogger.