Skip to Content

Use of Fragments in SAPUI5 (Reusability)

Many times we need to show a pop up screens (Dialogs, Message Boxes etc.) to user at runtime. So in this case creating a complete view and its controller is not desirable. Hence Fragment comes into the picture.


Fragments are light-weight UI parts (UI sub-trees) which can be re-used, defined similar to Views (in XML, HTML, JS), but do not have any controller or other behavior code involved. In case code is required and for event handler methods they should be able to connect to existing controllers of the “owning” View.

So In case where someone require a set of controls to be reused in each of the view, we can utilize the capacity of fragment. We can create a fragment & can reuse everywhere we want.

For example – if we want to reuse the Product information (Below screenshot) in each of the view so in that case we can create a fragment for product information.

First view –


Second view –


Below is the step by step process to create & reuse the fragment in any SAPUI5 Project.

  • Create a SAPUI5 Project.
  • Create a Folder named “xml_frag” under webcontent



Creating a fragment –

  • create a file under that folder with extension “fragment name”.fragment.xml
  • Write the code in fragment file according to the requirement in my case I created the controls for product information.

  1. Button.fragment.xml


  • Create an xml view & write the below code in init method of Controller of the view to load the fragment created.

          Loading a fragment & registering the fragment with action.

          //import xml fragment for display

var frg = sap.ui.xmlfragment(“xml_frag.button”,sap.ui.controller(“fragment.fragment”));


   In the same way in other views you can load the fragment & can pass the controller of current view & can load the fragment.  

   Define the fragment action in corresponding view with which fragment has been registered.

   Fragments are like static controls & can be easily implemented & high reusability with actions.You can also find the detailed documentation of fragment at        below – 


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


    Thanks for the post.

    I have one question regarding fragments and binding of data. I have an XML fragment for Approval of orders dialog box and i want to pass the selected order to the dialogue box, how do I do that


    Here is how i’m triggering the dialogue box


    var oDialogController = new truckloader.view.fragment.Approve();

    this.oDialog = new sap.ui.xmlfragment( “truckloader.view.fragment.Approve”, oDialogController);;



    Kind regards

    • Hi Eli ,


      I think you can directly set the label there in the fragment & then set the value for that particular label .


      Kindly let me know if you need any further help on this .




      • Hi


        I have an i18n folder containing messageBubble file with language texts. The model is set in the component.js file and is accessible to all the other views except the dialog view. May you please be more specific because currently i am setting the dialog title as follows


        <Dialog title=”{i18n>approvalTitle}”


        Kind regards

        • Hi Eli ,


          In above case what you can do is , get the value of title into some variable(local variable)

          and the step where you are opening  this dialog box before that you have to set the title like below .


          in the same way i have implemented this in my code & works fine for me.


          var titleid = sap.ui.getCore().byId(“titleid”);



          try this out may be you would be able to set Title for your dialog box if problem still persist please put the screenshot of your project structure so that i can give some close look on this .




  • Hi Shivam,


    i did one example based on your code,  i am getting error . would you please let me know about what the fragment in that sap.ui.controller.



    The above code “fragment” means name of the project or controller name .

  • Unless you are asking for clarification/correction of some part of the Document, please create a new Discussion marked as a Question.  The Comments section of a Blog (or Document) is not the right vehicle for asking questions as the results are not easily searchable.  Once your issue is solved, a Discussion with the solution (and marked with Correct Answer) makes the results visible to others experiencing a similar problem.  If a blog or document is related, put in a link.  Read the Getting Started documents (link at the top right) including the Rules of Engagement. 



    NOTE: Getting the link is easy enough for both the author and Blog.  Simply MouseOver the item, Right Click, and select Copy Shortcut.  Paste it into your Discussion.  You can also click on the url after pasting.  Click on the A to expand the options and select T (on the right) to Auto-Title the url.



    Thanks, Mike (Moderator)

    SAP Technology RIG