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 –

Screen1.PNG


Second view –


Screen2.PNG


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

    

     Screen3.PNG


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

Screen4.PNG

  • 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”));

frg.placeAt(“content”);

   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 – 

   (https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/Fragments.html).

To report this post you need to login first.

16 Comments

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

  1. Timothy Muchena

    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);

    this.oDialog.open();

     

     

    Kind regards

    (0) 
    1. shivam shukla Post author

      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 .

       

      Thanks,

      Shivam

      (0) 
      1. Timothy Muchena

        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

        (0) 
        1. shivam shukla Post author

          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”);

          titleid.setText(“{i18n>approvalTitle}”);

           

          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 .

           

          Thanks,

          Shivam

          (0) 
  2. Sai Sravya

    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.

     

    sap.ui.controller(“fragment.fragment”)


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

    (0) 
    1. shivam shukla Post author

      Hi Srisha,

       

      sap.ui.controller is used for registering the action of fragment to corresponding controller –

       

      in my code first fragment is the folder name under WebContent & second fragment is the name of Controller to which u want to register the actions of fragment .

       

      Thanks,

      Shivam

      (0) 
      1. Sai Sravya

        Hi shivam,

         

         

        I am getting the error , button.fragment.xml not loaded. Kindly find the below screen short and please solve the error.

         

         

         

        /wp-content/uploads/2016/01/ui5_867985.jpg

        Controller.js

        /wp-content/uploads/2016/01/ui51_868019.jpg

         

        Error: 

         

         

         

         

         

        /wp-content/uploads/2016/01/ui53_868020.jpg

        (0) 
        1. shivam shukla Post author

          Hi Srisha,

           

          Please correct your code like below , you have wrongly typed the fragment name –

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

          frg.placeAt(“content”);


          fragment name is Button you typed it like – button 

           

          Please try

          (0) 
  3. Michael Appleby

    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

    (0) 

Leave a Reply