Skip to Content

Hello Everyone,

As I saw so many doubts regarding Views, Controls, Fragments and Components confusion I am writing this blog to clear those confusions. Suggestions and Corrections are welcomed.

Fragments, Views and Controls are not related to each others.

SAPUI5 Views : Views are nothing but the application pages. We define our user interface by creating Views. Views is formed or created by using one or more Controls in it say Page,SimpleForm,Dialog,Label,Input etc. . Every view has its own controller.

SAPUI5 Controls : Controls the UI elements provided by the SAPUI5 framework. for example  Page,SimpleForm,Dialog,Input,

SAPUI5 Fragments: Fragments are the pieces of UI just like SAPUI5 Views. Whenever we need to use some similar UI parts many times in our application/views we create Fragments of those UI parts because Fragments are reusable and are light weight compared to VIews and Controls. Fragments are stored with in the application itself and can be used by that application only. Fragments are defined as View only and calling Views controller is shared with Fragment as Fragments are not having their own controllers.

I have written another blog for reusing UI elements with fragments for more details:

Click Here

SAPUI5 Components:  SAPui5 Components and Fragments are similar but components are reusable and INDEPENDANT parts used in SAPUI5 Applications. An SAPUI5 applications can use components stored on some other locations from where applications is running
Note : Components concept is under development so its advisable not to use it because it may change completely in future(see below image).

Component.JPG

I hope above information cleares all doubts  🙂

Regards,

Rauf

To report this post you need to login first.

7 Comments

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

  1. Moulika Penmetsa

    Hi Shaikh,

                   Thank you for sharing this information it is really helpful for the beginners.Can u please tell me the hierarchy between App, shell and component container? Thank you in Advance.

    Regards,

    Moulika

    (0) 
    1. Rauf Shaikh Post author

      Hi Moulika,

      Though I didn’t unerstant Hierarchy means what you are asking. But one think I can tell you is that Shell contains App(sap.m.App or sap.m.SplitApp)

      Regards,

      Rauf

      (0) 
      1. Moulika Penmetsa

        Hi shaikh,

                       Ya, I mean the same what is top level container. My question is, For a project first i have to create a shell, later in that should i add a App or SliptApp or else add a componentContainer. I’m not able get that flow of creation of app’s and containers. Please help me.

        Regards,

        Moulika

        (0) 
        1. Rauf Shaikh Post author

          Hi Moulika,

          I don’t have idea about Component Container, actually avoid it because its still in development phase. For now I use Shell as the top most thing then I add sap.m.App or sap.m.SplitApp in the Shell as per my need.

          for example:

          ——————————————-

               this.shell = new sap.m.Shell(“Shell”,{

                    title : “Shell”

               });

               this.App = new sap.m.App({});

               this.App.addPage(new sap.ui.xmlview(“firstView”, “view.firstView”));

               this.shell.setApp(this.App);

          ———————————————-

          Regards,

          Rauf

          (0) 
            1. Rauf Shaikh Post author

              I don’t think so you can create App and SplitApp in a single project, I am sure though.

              Actually app should be redesigned instead because its not a good design, even user may get confused.

              Regards,

              Rauf

              (0) 
              1. Moulika Penmetsa

                Thank you shaikh, I just want to add login page and home page before my master and detail pages. I have read somewhere that we do that using component container and split container so asking you. Thank you for your patient replies.

                Regards,

                Moulika

                (0) 

Leave a Reply