Effective way to use SAPUI5 demo toolkit samples

SAPUI5 is a core part of the SAP FIORI Framework, and it has evolved a lot over the years. As a result, the necessity to understand the basic concepts of SAPUI5 is crucial for frontend developers. For an ABAP consultant looking to explore SAPUI5 programming capabilities, to become Frontend Application designer, it is important to start from basics. And what better place to begin than the SAPUI5 demo Toolkit website. https://sapui5.hana.ondemand.com/.

This help & documentation website provided by SAP, covers the basics required to understand SAPUI5 controls and the required set of attributes, methods & events. A resource valuable for both Freshers and Experienced SAPUI5 developers. One of the most vital parts of this demo toolkit is the “Samples” section.

SAPUI5 Demo toolkit Samples section:

As an ABAP developer, when I started looking into SAPUI5 terminologies, one of the most common problems I faced was how to utilize the wide variety of controls offered by SAPUI5 libraries. The answer was right there in the SAPUI5 demo toolkit, but unlike ABAP, it’s not possible to simply copy paste the code in an editor like SE38 and execute. Here UI5 CLI comes to the rescue. We will have a look at the step-by-step procedure on how to download the code sample from SAPUI5 SDK and execute it in SAPUI 5 development environment like Business Application Studio, famously known as BAS.

1. Locate the particular control sample on SAPUI5 demo toolkit website (URL given above), which is suitable for your requirement  and download the code in a zip file format with the option shown as below.
2. On the SAP Business Application Studio in the “projects” directory, create a new folder as below and give any suitable name.
3. Upload the downloaded zip file in this newly created folder.

It will look like this.

4. In the terminal window, route to the new folder directory with below command.

5. Unzip the folder with this given CLI command – unzip sap.m.sample.IconTabBarResponsivePadding.zip -d mySampleProjec, where unzip is the keyword, followed by the name of the zipped folder and then -d which represents “Destination folder”, and after that the name of the target/destination folder where the unzipped content should be moved to.

Unzipped content will look like this.

6. Move all the files to parent folder SampleProject, as shown below. Also remove the extra folder i.e. mySampleProject and zipped files, which are not required anymore.

7. To install all dependencies locally, which are required for this app execution, we will need to execute command “npm i” as shown below.

8. To launch the application, execute command “npm start” in the working directory as shown below.

9. Click on the “Open in a New Tab” button, and the working app will be displayed as below.

We can check the functionality of the app by clicking on options given in the app, and if we wish to add any more functionality to check the behavior we intend, then we can also implement the same in this app code which is now readily available with these simple steps.

Happy Coding!