Skip to Content
Author's profile photo Former Member

SAPUI5 walkthrough step 3 – controls, dive in – how does a control get created?

Welcome to my SAPUI5 Walkthrough, And Dive In blog series, where I’ll not only walkthrough the tutorial, but dive in, to explore the magic behind SAPUI5. Buckle up and sit tight, it’s gonna be a bumpy ride as I’m no expert in any way shape or form, just a humble learner who loves coding and likes to get to the bottom of things =。=

This time, we’ll dive in to find out how does a control get created, which consists of two parts:

– How the sap.m.Text module is requested, loaded and executed.

– How a simple sap.m.Text control is created.

Break point, checked, alright, let’s dive in!


First, we’ll need to require the sap.m.Text module.

/wp-content/uploads/2015/11/02_823825.png leads to requireModule.


A sync ajax request loads the content of Text-dbg.js, sets it to, and also, sets module.state to LOADED.


If we switch to the network tab of Chrome developer tool, we’ll find Text-dbg.js had been downloaded.


With module loaded, we’ll then execute the module.


We set module state to EXECUTING first, then, call the _window.eval to have module data executed.


Once done executing the module, its state will be set to READY, and its data will be set to undefined.


With module ready, we’ll continue creating our Text control, first, to create a shell object oInstance, then, call the constructor method on it.


since Control extends from Element, the constructor method of Element will be called next.


And Element’s upper chain, the constructor of ManagedObject will also be called.


In the ManagedObject constructor method, we’ll register the object in the core.


Which leads to registerElement.


Which is essentially add our element to the global this.mElements map.


After registration, we’ll have settings ({text: “Hello World”} in our case) applied.


Which is essentially to call the setText method on “Hello World”.



With that, the shell object oInstance is now filled with our Text control properties, and returned, the end 🙂


If you want to dive even deeper on UI5 controls, then you dont wanna miss Mr. Jerry Wang’s A Tutorial how I do self-study on a given Fiori control and UI5 framework code behind series, enjoy, happy coding 😀

Assigned Tags

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

      hi Ji Wu,


      In this step where does I write the code. please elaborate this part, if possible.

      otherwise please suggest me. what i have to do get the clarity on this walkthrough concept.

      please reply.



      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hello Sudarshan,

      "how does the framework know to require the 'sap.m.Text' module at line 27168?", is that what you're asking? Hmm, good question, I'll update the post later to explain it 🙂

      Author's profile photo Sudarshan David
      Sudarshan David

      Hi Ji wu,

      Its the exact question? please elaborate.

      Thanks in advance,


      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Sorry Sudarshan for the delay response, it's kinda busy around here recently, I finally get the chance to sit down and add the answer to your question in my github version of this post, check it out 🙂

      Author's profile photo Sudarshan David
      Sudarshan David

      Hi ji wu,

      Thanks for ur marvelous job.

      Thanks a lot brother.