Show TOC

Fragments with Multiple Root NodesLocate this document in the navigation structure

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

In JS fragments, the createContent() method can optionally return an array of controls:
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.

<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" />
Note For HTML fragments this feature is currently not available.