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)

SAPUI5 Dialog As XML Fragment along With Controller

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)

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