What is SAP UI5 ?

Build Enterprise-grade Apps, Create a Consistent UX.

SAPUI5 (SAP user interface for HTML5) is a collection of libraries that you can use to build desktop and mobile applications that run in a browser — while maintaining one code base. With the SAPUI5 JavaScript toolkit, it’s easy to build HTML5 applications that are accessible and responsive without additional coding. You can create web applications using HTML5 web development standards.

Under the Hood

You must understand SAPUI5’s primary, underlying development concept. SAPUI5 supports the Model View Controller (MVC) concept. ‘a software architectural pattern for implementing user interfaces’. As a developer, you are encouraged to use the MVC to keep the data model handling. The UI design and the application logic separate. This helps in facilitating UI development in addition to modifying the different parts.

Model: retrieval and updating of the data that is being viewed in your application.

View: interpreting and rendering the initial UI. The view in the context of SAPUI5. Generates the presentation to the user based on changes in the model.

Controller: separating the view logic from the data logic. The Controller responds to user interaction and ‘view events’ by adjusting the view and the model.

SAPUI5 simplifies web application development. A variety of UI controls. Ranging from basic elements to complex UI patterns, can be combined for an appealing layout. All UI controls leverage a consistent design language and coherent UX patterns. SAPUI5 flexibility services let you easily adapt the UI of an app and store the changes in a layered repository.

Project Creation

I personally don’t recommend creating an application from scratch, especially if you have the wizard tool to assist you and get you started straight into development. There are two ways to generate or create a project from an existing template. Follow the either or the steps below.

Template Selection

The next screen will be the template selection screen. In here, you can select what type of a starter project you want. For our tutorial will just pick the “SAPUI5 Application”.

Make sure to pick the appropriate SAPUI5 version according to your project specifications.

After selecting the desired application, we can now proceed with the project name and namespace:

The “Project Name” will be the folder name of your application in your SAP Web IDE work space. While the “Namespace” will be your unique identifier for this whole application. Together with the project name, the namespace will be the prefix to build a unique identifier for your application.

As a result:

We will just create a default home view (page) for now.

You can click “Finish” from this screen.

Creating Run Configurations

After creating the project from a template, we are almost set to run the application. But before running the application, we must specify how does the SAP Web IDE will run this application. Is this a stand-alone application or a Fiori Launchpad based application?

You can either create a stand-alone application by choosing the web application or a Fiori based application by choosing the Launchpad sandbox.

This will create a new configuration setting in your project, you can press “Save and Run” for now. This will open a new tab on your browser which you can view the application separately. As you can see, there are many customizations available for the application to run.

Creating the List View

In continuation, we can now place the list element in the XML view file.

The Home.view.xml will contain the list of all to-do items we create for our application. Open the view file and copy the following statements inside the content tag:

<List>

<items>

<StandardListItem title=”Buy Milk”/>

<StandardListItem title=”Pay Bills”/>

<StandardListItem title=”Exercise”/>

</Items>

</List>

Run the application, the output should be similar to the item below:

Congratulations! you’ve just created your first SAPUI5 application.

If you want to keep updated on our IT Services that come across the technology spectrum with key focus on SAP, then you can connect with Rigved Technologies and stay one step ahead!