Skip to Content
Author's profile photo Wouter Lemaire

UI5 Classes and objects

Dear UI5 Developers,

As you all know, UI5 is a JavaScript-based HTML5 framework for building desktop and mobile applications. JavaScript is a very flexible object-oriented language when it comes to syntax. But Objects in JavaScript are class-free. There is no constraint on the names of new properties or on the values of properties. Objects are useful for collecting and organizing data. Objects can contain other objects, so they can easily represent tree or graph structures.You can read more about JavaScript Objects in the book “JavaScript: The Good Parts”.

JavaScript is class-free, but you can somewhat simulate classes. There are multiple ways to simulate classes and so has UI5 his own way to simulate classes.

In this blog I’ll show you how you can create a class and how to create an object of this class. I’ll also show you how you can use this objects in your JSON model.

We start with creating a class by extending the component/class: “sap.ui.base.Object” . 

The extended class has a constructor. This has the same functionality as in ABAP or Java. It will be called when you create an object of your class.

With the “this” object you can refer to the object itself and store properties like firstname, lastname, …

Like every other language, you can also create function in your class. But it’s not possible to create private, protected or public functions. SAP defines protected function by starting a function with a underscore, for example _privetFunction:function(){}.

An example of a basic UI5 class with properties, functions and a constructor:

], function(Object, JSONModel) {
  "use strict";
  return Object.extend("be.wl.objects.model.Person", {
    constructor: function(data) {
      if (data) {
        this.firstname = data.firstname;
        this.lastname = data.lastname;
        this.fullname = this.getFullName();
      this.model = new JSONModel();
    getFullName: function() {
      return this.firstname + " " + this.lastname;
    getModel: function() {
      return this.model;

Now you can create an object of your class in the controller of your view like this:

this.p = new Person({firstname:"Wouter",lastname:"Lemaire"});

The constructor of my class already creates a JSON model for every object. This means I can just use my function getModel() to get the created model of the object “p”:


After setting the model of the view with the object “p”, we can access all the properties of the object in our view:

<Input value="{person>/firstname}" editable="false"></Input>
    <Input value="{person>/lastname}" editable="false"></Input>
    <Input value="{person>/fullname}" editable="false"></Input>

This will look like this:


Working this way seperates your model from your view and controller. This will also reduce coding in the controller.

You can find the full example on Plunker:

Try using objects, it will make your code easier to read and accelerates your developements.

Next topic – Inheritance: UI5 Classes and objects – Inheritance

Find out how to use this in your UI5 project: UI5 Classes and Objects – Putting it all together

Kind regards,


Assigned Tags

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

      The 'constructor' used here is as in Object.prototype.constructor ?

      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      Yes, exactly!

      Author's profile photo Former Member
      Former Member

      Is it possible to build this model and fill it with data from a Gateway or oData Service?

      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      Yes! That's what I do for complex projects. I fetch the the data using an OData model using the read function. After that, I create objects from the result and put it in a JSON model.


      Author's profile photo pas longo
      pas longo

      hello Wouter,

      found your blog on classes. very helpfull to me!

      i am working on a large project and you have helped me move some code from a big big controller to a bunch of smaller objects.

      thank you very much.

      i have small problem that you may be able to assist ...

      i have a view that has several controls on it. i want to move the event handlers to an object.

      i am struggling to get this to work.

      do you have any thoughts/suggestions?


      pas longo

      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      Hi Pas longo,

      I would keep your event handlers in the controller of your view. You can move the logic from the event handler to your object but still have to call the function in your object in the event handler. Event handlers are part of the UI, so it would not make sense to replace them.



      Author's profile photo pas longo
      pas longo

      thank you wouter,

      that works.


      Author's profile photo Martin Ceronio
      Martin Ceronio

      Very helpful, thanks!

      Author's profile photo John Zhang
      John Zhang

      Today I was refactoring an ES6 class to UI5 class, so I copied the constructor to UI5 like this:


      constructor(var1, var2) {}


      And in runtime I got "xxx is not a constructor" error.

      I went up and down scratching my head. Finally, I was enlightened by a stackoverflow post stating "arrow function can't be constructor"

      So in the end, the working version is:


      constructor: function(var1, var2) {}



      Hope this helps future adventurers. Cheers!

      Author's profile photo Avi Tovi
      Avi Tovi

      Very useful,