• SAP UI5 Video Tutorials

SAP UI5 - Creating a UI5 Project

Step 1 − To create a new project in UI5 developer Studio, go to File → New → Project.

New Project SAP

Step 2 − Enter the name of project, target device, and Create an Initial View.

Name of the Project

Step 3 − Enter the View name and View type in the next window and click Next.

Enter View Name

Step 4 − In the last window, you see the project summary. It shows you the project properties. Click the Finish button to create the project.

Finish

Step 5 − You will be prompted to switch to Java EE perspective. Click Yes and it will open a new UI5 project window with an initial view - JSView.

UI5 Project

Step 6 − Now to add a Shell to this view, you can use the library sap.ui.ux3.Shell().

Library SAP

Step 7 − As Shell is not part of sap.ui.commons, you need to add sap.ui.ux3 library. You can add additional libraries to data-sap-ui-libs.

Data SAP UI Libs

To run an application, you have two options −

  • Run on server
  • Run on webapp

Run on server is recommended as it has a fixed port and it is not like run on webapp with one-time random port.

Random Port

SAP UI5 ─ Configuration

As shown in the following table, you can define various configuration attributes in SAP UI5 −

Configuration

Core Functions

The core functions in SAP UI5 are as follows −

  • Sap.ui.getCore() − This is used to get a core instance.

  • Sap.ui.getCore().byid(id) − This is used to get an instance of UI5 control created with id.

  • Sap.ui.getCore().applyChanges() − This is used to carry out and render the changes for UI5 controls immediately.

  • jQuery.sap.domById(id) − This is used to get any HTML element with id. If there is a UI5 control with id, the element returned is top most HTML element of UI5 control.

  • jQuery.sap.byId(id) − This is used to return jQuery object of DOM element with specified Id.

Advertisements