Skip to Content
Author's profile photo Naveen Inuganti

Creating UI5 application project with multiple JS files


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


Naveen Inuganti

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Kimmo Jokinen
      Kimmo Jokinen

      Hi Naveen,

      Thanks for the blog.

      I would have anticipated to see dependency management taken into account as you already linked to the documents explaining it. This line in particular stood out for me:

      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

      With dependency management you have no need to define the script in index.html but can use instead in the file using it's code. That way you also explicitly declare the dependencies you need in a file.



      Author's profile photo Naveen Inuganti
      Naveen Inuganti
      Blog Post Author

      Thank you Kimmo. Sure, I will find some time to extend this example to use those functions.



      Author's profile photo Robin Van Het Hof
      Robin Van Het Hof

      I agree with Kimmo. I think it's bad coding practice to reference a bunch of .js files in the index.html; they will all get loaded which impacts performance.

      Using dependency management you have the added benefit of only loading the necessary files on demand.

      EDIT: In addition to that, I think the example given -- adding UI5 controls in a separate js file -- is a bad example because in that particular case using the Fragments concept is the preferred approach. A better example would've been to declare some utility function in the .js file and call that function from the view's controller.

      But other than that, nice blog and keep writing 🙂

      Author's profile photo Abhijeet Kulkarni
      Abhijeet Kulkarni

      I agree with Robin. A function based approach to modularise the code, through multiple files, is best. It also helps in debugging.

      Author's profile photo Former Member
      Former Member

      very useful ,looking forward to your  updates. 😘