SAPUI5 binding data fragment xml

Question

I want to binding data json to fragment contain list item.

UraianList.fragment.xml:

<core:FragmentDefinition
    class="sapUiSizeCompact"
    xmlns="sap.m"
    xmlns:core="sap.ui.core">
    <Dialog
        noDataText="No Products Found"
        title="Uraian"
        search="handleSearch"
        confirm="handleClose"
        close="handleClose"
        items="{
            path: 'list>/'
        }" >
        <List
            title="{list>Name}"
            description="{list>ProductId}"
            iconDensityAware="false"
            iconInset="false"
            type="Active" />
    </Dialog>
</core:FragmentDefinition>

controller:

 listButton : function(oEvent){
        this._oDialog = sap.ui.xmlfragment("com.taspen.acb.modules.Dosir.UraianList", this);
        this._oDialog.setModel(this.getView().getModel());
        this._oDialog.open();
        var view = this;

        var data = [
            {"Name":"1","ProductId":"Atasan1"},
            {"Name":"2","ProductId":"Atasan2"},
            {"Name":"3","ProductId":"Atasan3"}
            ]
        var oModel = new JSONModel(data);
        view.getView().setModel(oModel, "list");      
  }

I want when I click button (listButton function), I open fragment and binding data to list, but data not showing. How to fix it?

Regards, Bobby

Answer 1

Your code has some mistakes.

1. Dialog has aggregation 'content' - which can store any type of control. So you list will go into the 'content' aggregation of a Dialog.
2. List has the aggregation items which will hold your different types of ListItems ( such as StandardListItem, DiaplayListItem, InputListItem etc).
3. As a good practice, add your dialog as a dependent to your view so all the models defined in the view can be used by your dialog.

You have somehow written almost the right properties but in wrong controls.

Here is the corrected code:

Fragment:

<core:FragmentDefinition
    class="sapUiSizeCompact"
    xmlns="sap.m"
    xmlns:core="sap.ui.core">
    <Dialog  id="UraianListDialog"> <!-- id provided so I dont have to create new Dialog Everytime -->
            <content>
                <List
                noDataText="No Products Found"
                title="Uraian"
                search="handleSearch"
                confirm="handleClose"
                close="handleClose"
                items="{
                    path: 'list>/'
                }" >
                    <StandardListItem
                        title="{list>Name}"
                        description="{list>ProductId}"
                        iconDensityAware="false"
                        iconInset="false"
                        type="Active" />
                </List>
            </content>
        </Dialog>
</core:FragmentDefinition>

Controller:

    onInit: function() {
        //Create Models in Init so they are not created everytime you open your dialog
         var data = [
                        {"Name":"1","ProductId":"Atasan1"},
                        {"Name":"2","ProductId":"Atasan2"},
                        {"Name":"3","ProductId":"Atasan3"}
                        ];
                    var oModel = new sap.ui.model.json.JSONModel(data);
                    this.getView().setModel(oModel, "list"); 
        },

 listButton : function(oEvent){
         var oView = this.getView();
         var oDialog = oView.byId("UraianListDialog");
         // create dialog lazily
         if (!oDialog) {
            // create dialog via fragment factory
            oDialog = sap.ui.xmlfragment(oView.getId(), "com.taspen.acb.modules.Dosir.UraianList");
            oView.addDependent(oDialog);
         }


         oDialog.open();
      }
}

Answer 2

You cannot have an array at the root of the JSONModel data

In addition you should add your fragment as a dependency of your view and you dont need to explicitly set a model for the fragment :)

View update:

<core:FragmentDefinition
    class="sapUiSizeCompact"
    xmlns="sap.m"
    xmlns:core="sap.ui.core">
    <Dialog
        noDataText="No Products Found"
        title="Uraian"
        search="handleSearch"
        confirm="handleClose"
        close="handleClose"
        items="{list>/items}" >
        <List
            title="{list>Name}"
            description="{list>ProductId}"
            iconDensityAware="false"
            iconInset="false"
            type="Active" />
    </Dialog>
</core:FragmentDefinition>

Change your controller to:

listButton : function(oEvent){
    var data = {
        items: [
            {"Name":"1","ProductId":"Atasan1"},
            {"Name":"2","ProductId":"Atasan2"},
            {"Name":"3","ProductId":"Atasan3"}
         ]
    }
    var oModel = new JSONModel(data);
    this.getView().setModel(oModel, "list"); 

    this._oDialog = sap.ui.xmlfragment("com.taspen.acb.modules.Dosir.UraianList", this);
    this.getView().addDependent(this._oDialog);
    this._oDialog.open();
}