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

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:

https://sapui5.netweaver.ondemand.com/sdk/#test-resources/sap/ui/commons/demokit/Button.html

Part 1: Creating the application project

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

clip_image002

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

clip_image003

Enter the project name and click on next button.

clip_image004

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

clip_image005

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.

clip_image006

Part 2: Create the UI controls

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

clip_image008

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.

clip_image010

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.

clip_image011

Part 3: Testing the application project.

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

clip_image013

Select run on server and click on OK.

clip_image014

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.

clip_image015

Output:

clip_image017

clip_image019

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

clip_image020

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

clip_image021

Add the icon property to the button control.

clip_image022

Output:

clip_image024

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

clip_image026

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.

clip_image027

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

clip_image028

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

clip_image030

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

clip_image031

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

clip_image032

Output:

clip_image034

About Arun

0 Comments:

Post a Comment

Powered by Blogger.