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 following fragmet as "myFragment.fragment.xml"

(in my case i had store 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