Skip to Content


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.

/wp-content/uploads/2014/10/one_554822.png

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.

Out.png 

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


/wp-content/uploads/2014/10/fold_554824.png

Create one .JS file under this new folder.

/wp-content/uploads/2014/10/js_554834.png

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.


/wp-content/uploads/2014/10/after_554835.png


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.

Tab.png

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

ViewCode.png

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.

/wp-content/uploads/2014/10/shade_554865.png


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:

/wp-content/uploads/2014/10/util_554870.png

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






To report this post you need to login first.

5 Comments

You must be Logged on to comment or reply to a post.

  1. 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 jQuery.sap.require instead in the file using it’s code. That way you also explicitly declare the dependencies you need in a file.

    Regards,

    Kimmo

    (0) 
    1. 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 🙂

      (0) 

Leave a Reply