Skip to Content
Author's profile photo Wouter Lemaire

UI5 Classes and objects – Singleton pattern

Dear UI5 Developers,

In UI5 you can create classes and use objects as explained in these blogs:

UI5 Classes and objects

UI5 Classes and objects – Inheritance

UI5 Classes and Objects – Putting it all together

In this blog I’m going to show you how the Singleton pattern can be used in UI5. This example is based on the example of the latest blog: UI5 Classes and Objects – Putting it all together

Singleton can be used as a shared controller to store global values like for example your JSON models. I often use it to implement AJAX calls to the backend.

To implement a singleton in UI5 you have to create a basic class. Instead of returning this class, you have to return a function that creates an instance of your Singleton class. This function will only make a new object/instance of the class the first time (if no instance/object exists) . To know if an instance/object is already created, you can use a global variable to keep the active object/instance.

In our example the Singleton will be used to create an object of the Person class. It will also have a function to add skills to a person. Last but not least it will also have a function to create an initial skill.

It will look like this:

], function(Object,Person,Skill) {
  "use strict";
  var instance;
  var services= Object.extend("",{
   this.person = {};
  this.skill = {};
  this.person = new Person({firstname:firstname,lastname:lastname});
   this.skill = new Skill({name:"name",value:"value"});
   return this.skill;
  return {
        getInstance: function () {
            if (!instance) {
                instance = new services();
            return instance;

Now you can use the singleton in your full UI5 project with the following syntax:


I’ve update the viewcontroller to use the singleton class, it will look like this:

addSkill: function() {
this.skill = services.getInstance().getInitialSkill();

The function setPerson will create an object of the Person class. We can access all properties of the singleton instance:


The function newSkill will add a skill to the peron object and the function getInitialSkill will create an empty Skill object.

The result will look the same as in the blog UI5 Classes and Objects – Putting it all together but now it’s using a singleton class.


You can find the full code example on plunker:

Kind regards,


Assigned Tags

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

      Very useful blog!!

      Author's profile photo Marco Beier
      Marco Beier

      I can only repeat what Mahesh already mentioned in 2017, very useful blog ... even to this day. 🙂 Thanks for this great blog series.