It was four years ago when I created my first SAPUI5 application with the Web-IDE, I remember I was following the below OpenSAP course:
Developing Web Apps with SAPUI5
https://open.sap.com/courses/ui51
I was surprised because it was my first job, and I just started to learn about SAP technologies, and I did not know at that moment that SAP had anything outside the classic UI.
At the same time, it wasn’t easy because, at that moment, there was not much information about SAPUI5, and my team was creating an offline mobile application with SAP Mobile Platform, so the challenge to learn was actually double!
This post is for all the people who are interested to learn in a natural way how to start creating a SAPUI5 application from a Web-IDE template.
I will share with all of you a little bit of my expertise.
To move forward, we need an SAP Cloud Platform trial account, and you can get yours here:
https://www.sap.com/cmp/td/sap-cloud-platform-trial.html
We will use the IDE for SAP Cloud Platform:
We will also need an SAP HANA service to our data:
We need to set up a destination in our cockpit to link our database as below:
And we are ready to start:
In your Web-IDE right click on your workspace and then New and choose Project from Template:
Click on CRUD Master-Detail Application and after that click on next:
You need to fill the form as below:
And next, you will see the next screen:
After then, you can choose your destination and the relative path for your OData service. And after that, you can click on next.
You can customize your template and the data that will appear on your application. In this case, I am customizing the fields for the master side as below:
Click on next and finish:
You will see the application on your workspace and a structure as below:
Click run to test your application.
And your initial screen will be something like this:
In this case, the app displays just one item because there is the only one in the table from the database, but you can even start without any registration.
To create a new item, click on Add button from the footer of the master side. Then an empty form will appear, add new data, and click on save:
In this case, the form displays all the fields that I have set up on my table.
You will see the new item in our application further you have saved:
I have added a couple of items more.
If you want to edit some item, click on edit and do the respective updates.
In this case, I have updated the age for Israel from 32 years to 33 years:
If you want to delete some item, click on delete button from the footer of the detail side:
It will prompt you if you are sure:
If you click on OK, then the item will be removed as below:
Have you faced the need to create a CRUD application from scratch?
With these simple steps, you can create one Fiori CRUD application in a couple of minutes. You will be able to create, update or delete any item, you can do it with a friendly user interface and without coding… yet.
I have added some minor changes to our UI to make it a little bit better:
And it is working like a charm.
Extra tip: Do you want to set fullwidth your application?
Just add “fullWidth” property to your manifest.json:
Now, your app is fullwidth:
It looks better, right?
I hope you have enjoyed, and you have learned how to create your first Master CRUD application from Web-IDE template.
Best Wishes,
Miguel Mota
MXITGO 