Fragments with Multiple Root Nodes

XML fragments and JS fragments can have more than one root control.

#!js
sap.ui.jsfragment("sap.ui.core.fragmenttest.MultiRootFragment", {

    createContent: function(oController) {
        var oLabel = new sap.m.Label({text:"These controls are within one multi-root Fragment:"});
        var oInput = new sap.m.Input();
        var oButton = new sap.m.Button({text: "Still in the same Fragment"});

        return [ oLabel, oInput, oButton ];
    }

});

As XML documents need to have exactly one root node, to achieve XML fragments with multiple root nodes, an additional <FragmentDefinition> tag needs to be added as root element containing the actual root controls. This <FragmentDefinition> tag will not have any representation in HTML at runtime; the children are added directly to wherever this fragment is placed.

#!xml
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
    <Label text="These controls are within one multi-root Fragment:" />
    <Input />
    <Button text="Still in the same Fragment" />
</core:FragmentDefinition>