Creating UI5 application project with multiple JS files

[naveen_inuganti2]

Introduction

When I started working on SAP UI5 Application in eclipse, I remember coding everything in a "createContent: function(oController){}" function generated by application creation wizard, ended up with thousands of lines. Finding things in this code and version management (when other folks are working on same application) is not an easy task.

First thing that we learnt in ABAP after some basic programming is Modularization Techniques for better readability and re-usability of code. Why should we give such an importance to these techniques? Because, implementation is not all about the application.. it should get support from other teams after implementation. A well written program can save up to 40% of review time, easy to extend, minimize defects and much more. UI5 application is not exception for that, right?

We have well documented Modularization Techniques for UI5 projects in tool-kit. In this blog, I am going to explain one of the technique i.e. how to use multiple JS files to simply UI5 application project.

Creating UI5 application project with multiple JS files

Create one project in eclipse with initial view name "Demo". As expected, we got controller and view under "Demo/WebContent/demo" folder in the project application.

Let's add Application Header, Button and Table to the page as shown below. We need to pass these controls to one vertical layout and add Layout to index page.

 

Now we need to add Application header & Button to the default view (generated by wizard) and create Table and it's functions in new/separate JS file. For that, Let's create new folder "util" under "WebContent" (You can give any name to folder).

Create one .JS file under this new folder.

You can give any name to this JS file. You project folder should look like below after above two steps. "util" is my folder name and "OtherFunction.js" is my JS file name.

Now add below content to OtherFunction.JS file. This is just copy & paste of sample code of Table control from SAP UI5. However, make sure to remove line where it places the content on screen (remove oTable.placeAt("sample1")). Also, give unique ID to your table to be able call this from other places of application. In below code sample, I am using "table1" as ID for my oTable.

Now, create Application Header and Button in Demo.view.js file. Add these two controls to vertical layout control along with the Table control that we created in OtherFunction.js file. As you can see here, we are calling oTable with help of reference ID "table1".

Now you can add further code in function of button press and modify the properties of the table. In this example, I am just using getVisible and setVisible property.. but we can use any other property based on the requirement.

Before running this application, we need to add our new JS file as source file in INDEX.HTML page and of course ui.tables library for table control. It should look like below:

With that, we've successfully created UI5 application with one additional JS file from different folder. You can add number of JS files to this folder, but when mention that as a source file in index.html it should be in right order. For example, If I move "util/OtherFunction.js" reference from Line 15 to Line 22 in above code, it won't work because I am using OtherFunction.js scripting in Demo.View.js. However, you can handle these dependencies with jQuery.sap.declare & jQuery.sap.require functions as guided here. Next time, I will extend this blog to show how it works with same example.

There will be no dependency between these file while we deploy or submit this application to server, which will allow to engage more people in single application.

Thanks for going through this blog.

Regards,

Naveen Inuganti