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.
Note: This is Part 1 of 5 the SAPUI5 application tutorial. You can check more details of these series in the links below:
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:
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.
namespace + project name
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:
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. 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:
Moving forward we will use the launchpad sandbox configuration so we can be very familiar with Fiori based application look and feel.
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:
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).
Now, run the application. You will notice that there’s an error in your development console (F12 -> console).
This is because, during replace, the import dependency syntax was malformed. So open
Component.js and modify the line:
The application should work now.
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
<StandardListItem title=”Buy Milk”/>
<StandardListItem title=”Pay Bills”/>
Run the application, the output should be similar to the item below:
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!