Skip to Content

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:

      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

14 Comments
You must be Logged on to comment or reply to a post.
  • 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

    • 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

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

    • Hi Kranthi,

      simply bind the element using bindAggregation method.

      eg:

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


      Regards,

      Rashmee

  • 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.

    • 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

  •  

    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.getObjectID();
    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()); oDialogFragment.open();