Creating a Web Application Using the SAPUI5 Framework (Part 1)

I present to you my interpretation of notes on creating a web application using the SAPUI5 framework.

To condense into a few short notes the material that demonstrates a sequence of steps sufficient to create an application using the JavaScript framework SAPUI5.

SAP Web IDE Personal Edition

See: SAP Development Tools

SAPUI5 Documentation

See: Documentation

API Reference

See: API Reference

The fictional application I came up with is designed to display information about people stored in a data repository, with the ability to apply filters to the displayed information, as well as load additional data for a selected person.

As mentioned earlier, the SAP Web IDE tool is used as the development environment. It’s worth noting that a connection to an ABAP system will not be needed. The application development will be done locally.

See:  SAP UI5. Установка и использование SAP WebIDE

The following video snippet demonstrates the sequence of steps to create the UI5 application framework using the appropriate SAP Web IDE wizard.

See: Folder Structure: Where to Put Your Files

Once a new project is created, it’s necessary to make adjustments to the application’s namespace and decide how to connect the main SAPUI5 JavaScript library (sap-ui-core.js).

Regarding the namespace, SAP Web IDE isn’t very friendly in this aspect and doesn’t allow the use of the . (dot) symbol as a separator.

It’s important to pay attention to how you plan to connect the framework’s library to your application.

See: Bootstrapping: Loading and Initializing

The next video snippet shows the steps addressing the points above, specifically:

• Adjusting the assigned namespace in the files of the new project
• Connecting the main framework library by editing the index.html file and specifying the absolute path to the library (https://sapui5.hana.ondemand.com/resources/sap-ui-core.js)

The application is now almost ready to launch.

At the initial stage, two launch options available directly from the editor may be of interest. One allows you to view your application in the context of the SAP Fiori Launchpad, and the other allows you to run your application independently (bypassing the launchpad).

See: Run Applications from the Workspace

The next video snippet demonstrates both launch options discussed above.

See: Debugging Tools

The new application has been successfully created.