MVC Architecture – Explained in simple terms

SAPUI5 Applications are designed on MVC Architecture. In current times, It is prominently used in all web technologies.

M = Model

Model contains business data coming from SAP system

V = View

A view represents your Page. For Each page in your applications, design separate View

C = Controller

Events handling is captured here. Clicking on Button, mouse hover etc. are events.

For each View, a separate controller is to be coded. Both View and Controller usually have the same name to easily identify the pair.

MVC Architecture

Above the screen is a Page or ‘View’, which has many elements like Headers, search bar, buttons etc. The data is coming from the model, while events will be handled by Controller.

MVC Architecture 

SAPUI5 supports following languages to code Views:

  1. XML (<viewname>.view.xml)
  2. JavaScript (<viewname>.view.js)
  3. HTML (<viewname>.view.html)
  4. JSON (<viewname>.view.json)

Controller can be coded only in JavaScript

And Finally, Model are of four types

  1. ODATA Model

It is used to consume OData Services

   2.XML Model

It is used when data coming from Source System in XML format

   3. JSON Model

It is used when data coming from Source System in JSON format. Also, Mock-server is also based on this model

   4. Resource Model

It is used to make your application in multiple languages.

We will come across all the models in detail in upcoming tutorials

Project Structure

Default Structure Required Structure

MVC Architecture












Default Structure, will be available whenever you create a new project. You have to manually create subfolders within “Web Content” and place all respective files. Please note that views and controllers are placed in separate folders, though they have the same name. Keep ‘CSS’ & ‘Model’ folders empty as of now, we will put required files in them in later tutorials.

Share this Tutorial with your colleagues using following Social Platforms and comment below with your question, thoughts and suggestions.


<<Previous Tutorial                                                                                                          Next Tutorial>>                                                                                                        


  1. Hi Shalaka,

    Yes, Component.js is mandatory to have. It is created under your folder structure by default as you proceed with New Project wizard.

Leave a Reply

Your email address will not be published. Required fields are marked *