Note: This blog is in regard of XML View and XML Fragment(for a Dialog control with BusinessCard as aggregation)


Problem :

    Many times we need to show a pop up screens(Dialogs, MessageBoxes 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:

      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.

Create A Fragment for a Dialog control:


Save the following fragmet as “myFragment.fragment.xml”

(in my case I had stored this in ‘view’ folder)


<Dialog
      xmlns= "sap.ui.commons" xmlns:b="sap.suite.ui.commons" xmlns:m="sap.m" stretch="true" showHeader="true" >
  <buttons>
      <Button id="btnInFragment" text="Close" press="doSomething"/>
  </buttons>
  <content>
      <b:BusinessCard id="businessCard" secondTitle="Associate Consultant" iconPath="images/aa.jpg">
  <b:content>
  <m:VBox>
  <m:items>
      <m:Text id="txtJobTitle" text=""></m:Text>
      <m:Text id="txtEmail" ></m:Text>
      <m:Text id="txtPhone" text="(+91)-12345676544"></m:Text>
  </m:items>
  </m:VBox>
  </b:content>
  <b:firstTitle>
      <m:Text id="txtFirstTitle" text="David Beckham"></m:Text>
  </b:firstTitle>
  </b:BusinessCard>
  </content>
</Dialog>

Instantiate The Fragment & Open Fragment Dialog:


var oDialogFragment = sap.ui.xmlfragment("view.myFragment",this.getView().getController());
oDialogFragment.open();

Explanation:

We can provide control methods to the fragment control.For this we need to give the instance of the view which instantiating the fragment. This is acheived with following:

“this.getView().getController()”

Accessing Fragmet UI Controls Using IDs:

We can access the controls created in Fragment by their IDs as follows and implement their methods:


sap.ui.getCore().byId("txtFirstTitle").setText("Name Surname");
sap.ui.getCore().byId("txtJobTitle").setText("Consultant");

We can reuse the Fragment UI any time any where now.

Hope this will help in your Work.

Regards,

Rauf

To report this post you need to login first.

13 Comments

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

  1. Thomas Fitting

    Hi Rauf,

    thanks for the great article. I think, there is a small restiction. You cant reuse the fragement twice on the same page, because the ids wouldn’t be unique anymore.

    Best

    Thomas

    (0) 
      1. bhaskar kuntla

        Hi, while am loading the same fragment in the view for second time (i’e if i press the button second time) it is showing as error in adding duplicate ids. If i click on that third time on  the same button it is showing the popup.

        Could you please help me on that.

        For ur reference.

        Capture.PNGThanks & regards,

        Bhaskar.

        (0) 
        1. Michael Appleby

          Please create a new Discussion marked as a question.  Doing so in Comments, while not uncommon, is incorrect and is discouraged when noticed.

          Regards, Mike (Moderator)

          SAP Technology RIG

          (0) 
          1. Andrzej Koeller

            Depends on what you want to achieve and what problem do you have you can try to solve it in a few ways.

            If you are using fragments for pop-ups and dialogs, some of the solutions are provided in the Explored section of UI5 documentation. For example, SelectDialog:

            http://veui5infra.dhcp.wdf.sap.corp:8080/sapui5-sdk-dist/explored.html#/sample/sap.m.sample.SelectDialog/preview

            We can create new dialog, assign it to variable in control, and next time we are going to open it we are checking if it is already there. If yes, then just take it and open the dialog, if not create and assign.

            If you want to reuse a fragment multiple times in one page all information is provided here:

            xml fragments:

            OpenUI5 SDK – Demo Kit

            js fragments (bit more problematic as all ID’s have be dynamically ‘recreated’):

            OpenUI5 SDK – Demo Kit

            If you have any more specific question let me know,

            Best Regards,

            Andrzej

            (0) 
  2. kranthikumar surampudi

    Hi Rauf ,

    Instead of text is i want to use the fragment with items=”{/customer}” (here I am using json collection).now how can i Accessing Fragmet UI Controls Using Items.

    Please help Rauf ASAP.

    Regards,

    Kranthi(9052972272)

    (0) 
    1. Rashmee B

      Hi Kranthi,

      simply bind the element using bindAggregation method.

      eg:

      sap.ui.getCore().byId(“listId”).bindAggregation(“items”, “/customer“, itemTemplate);


      Regards,

      Rashmee

      (0) 
    1. Michael Appleby

      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