Beginner’s SAPUI5 Tutorial – To-do List App

In this 5 parts tutorial, we will go through the basics of SAPUI5. At the end of this tutorial, we will build a to-do list application that will cover the necessary concepts to create a whole SAPUI5 application.

This is Part 1 of 5 the SAPUI5 application tutorial.

Part 1 – Beginner’s SAPUI5 Tutorial – To-do List App
Part 2 – Beginner’s SAPUI5 Tutorial – To-do List App – Part 2 (Data Binding)
Part 3 – Beginner’s SAPUI5 Tutorial – To-do List App – Part 3 (Formatters and Events)
Part 4 – Beginner’s SAPUI5 Tutorial – To-do List App – Part 4 (Dialogs and Fragments)
Part 5 – Beginner’s SAPUI5 Tutorial – To-do List App – Part 5 (Routing)

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 of the steps below:

Project From Template
“Project From Template” on context menu
Project From Template
“Project From Template” on “File” menu

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”.

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

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

Project Name and Namespace
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.

Format:

namespace + project name

Example:

com_mytodo

SAP Web IDE doesn’t allow period (.) in the project name, so we need to replace the character with any valid character (e.g. underscore) for now.

As a result:

Project Result
Project Result

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

Home View
Home View

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?

Run Configurations
Run Configurations

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

Run Configurations Dialog
Run Configurations Dialog

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. we will tackle some of this configuration as we go forward in this tutorial.

Depending on your run configuration you’ll end up with the applications below:

Web Application Run Configuration
Web Application Run Configuration
Launchpad Sandbox Run Configuration
Launchpad Sandbox Run Configuration
Moving forward we will use the launchpad sandbox configuration so we can be very familiar with Fiori based application look and feel.

Recap

So far we’ve created a new project from a template. We also have a running application based on the version we want and the configuration we needed. The next step is to start modifying this application according to our specifications.

Correcting the namespace

Before proceeding, we must correct the namespace we’ve created. This is due to the Web IDE’s limitation on the character. First, search the namespace in the whole project:

Search Namespace
Search Namespace

Afterward, click each entry so that you will be redirected to the file and replace each instance with the correct value (e.g. com.mytodo).

Replace Namespace
Replace Namespace

Now, run the application. You will notice that there’s an error in your development console (F12 -> console).

Application Error
Application Error

This is because, during replace, the import dependency syntax was malformed. So open Component.js and modify the line:

Correct Dependency
Correct Dependency

The application should word now.

Creating the List View

Congratulations! you’ve just created your first SAPUI5 application. In the next tutorial, we will add more features and enhancement to our application by application more advance SAPUI5 features. For now, review the code and play around to familiarize your self with SAPUI5. You can also check this post for more SAPUI5 controls that you can add to the view.

Find this tutorial helpful? Let me know what you think, leave a comment below or share this with your colleagues and friends! Don’t forget to subscribe.


Leave a Reply