Defining Dialogs as Fragments

You can use fragments for the definition of dialogs.

Context

To use fragments for defining popups, just let the root control of the fragment be a dialog or similar control.

The following shows an XML fragment dialog example:

#!xml
<Dialog xmlns="sap.ui.commons" title="XML Fragment Dialog">
    <TextView text="{/dialogText}" />
    <buttons>
        <Button text="Close" press="closeDialog"/>
    </buttons>
</Dialog>

Other fragment types are used the same way to define, for instance, a dialog as fragment.

For example, in JS fragments, the createContent() method returns a dialog control:

#!js
sap.ui.jsfragment("testdata.fragments.JSFragmentDialog", {
    createContent: function(oController) {
        var oDialog = new sap.ui.commons.Dialog({title: "JavaScript Fragment Dialog"});
        
        var oText = new sap.ui.commons.TextView({text: "{/dialogText}"});
        oDialog.addContent(oText);
        
        var oButton = new sap.ui.commons.Button({
            text: "Close",
            press: function(){oDialog .close();}
        });
        oDialog.addButton(oButton);

        return oDialog;
    }
});