Skip to Content
Author's profile photo Rauf Shaikh

SAPUI5 Dialog(with BusinessCard) As XML Fragment along With Controller

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

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

Instantiate The Fragment & Open Fragment Dialog:

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


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:


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

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

Hope this will help in your Work.



Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      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.



      Author's profile photo Andrzej Koeller
      Andrzej Koeller

      Hi Thomas,

      to reuse fragment as many times as you want you should be able to add Id for the fragment during creation:

      under the section "Unique ID's"



      Author's profile photo bhaskar kuntla
      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,


      Author's profile photo Michael Appleby
      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

      Author's profile photo Former Member
      Former Member

      Can you provide the link with the solution.

      Author's profile photo Andrzej Koeller
      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:

      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,


      Author's profile photo Former Member
      Former Member


      I am new to sapui5 technology, can any one help me how to create fragment file

      Author's profile photo Former Member
      Former Member

      Just create a file ending with fragment.xml in the folder in eclipse or web ide where your view exists and instantiate it using the code shown above

      Author's profile photo Timothy Muchena
      Timothy Muchena

      Nice one. Thanks

      Author's profile photo kranthikumar surampudi
      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.



      Author's profile photo Former Member
      Former Member

      Hi Kranthi,

      simply bind the element using bindAggregation method.


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



      Author's profile photo venkateswarlu bommineni
      venkateswarlu bommineni

      Hi All,

      When i try to open the pop up , it is giving below error,

      Uncaught TypeError: this._oDialog.setMultiSelect is not a function .

      Please help me in getting rid of that.

      Author's profile photo Michael Appleby
      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

      Author's profile photo Former Member
      Former Member


      Hi Rauf,

      You should use dynamic fragment name and when you call it, call fragment name with + 1 id;

      onInit: function() {
      this.onInitValue = true;
      this._oRouter = sap.ui.core.UIComponent.getRouterFor(this);
      this.oView = this.getView();
      this.FrgId = 0;
      this.Frg = ‘idViewSettingsFragment’;
      this.InvType = ”;

      var that = this;
      that.FrgId = that.FrgId + 1;
      var FrgName = “idViewSettingsFragment”;
      that.Frg = FrgName + that.FrgId;

      var oDialogFragment = sap.ui.xmlfragment(that.FrgId,this.getView().getController());;