How do you display data in 2 columns and 2 rows for a List which has aggregation Binding?

Question

In my view I have a List which has aggregation binding with a property from a model. I want this to be displayed in the form of 2 columns and 2 rows. Which control should be used / layout?

In my code the model is set in the controller and has property question and answers where answers is a collection. This model is being binded to the List in the view.

Now I want to display this data in a layout where first two options are in first column and first row and then next 2 options in 2nd row i.e. 2 options with checkboxes per row.

At the moment my code for view, controller and my output looks like follows

App.view.xml

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form" xmlns:core="sap.ui.core"
displayBlock="true" controllerName="opensap.examples.controller.App" height="100%">
<Page title="List Page">
    <content>
        <List headerText="{myModel>/question}" id="myList" items="{myModel>/answers}">
            <items>
                <InputListItem label="{myModel>answerText}">
                    <CheckBox/>
                </InputListItem>
            </items>
        </List>
           <Button press="load" text="Click Me"/>
    </content>
</Page>

App.controller.js

sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel"], function(Controller, JSONModel) {

var oData = {
    "question": "Which pet do you like from the following?",
    "answers": [{
        "answerText": "Cats"
    }, {
        "answerText": "Rabbits"
    }, {
        "answerText": "Dogs"
    }, {
        "answerText": "Hamsters"
    }]
};

var oModel;

Controller.extend("opensap.examples.controller.App", {

    onInit: function() {
        oModel = new JSONModel();
        oModel.setData(oData);
        this.getView().setModel(oModel, "myModel");


    },
    load: function() {
        console.log(oModel);
    }

});
});

Output:

What is needed: To display Cats and Rabbits answers one one row and Dogs and hamsters on next one i.e. 2 items with checkboxes on one row and so on.

Which control should one use for this? I need a control with aggregation binding.

Answer 1

You'll need to restructure your data. Each item in the list binding can only represent one item in the data. There's no (easy) way to combine two objects in the data into one item in the list when you're using aggregation binding. Then you can either use a Table with a ColumnListItem to separate the columns, or use a CustomListItem like I've done here.

Try this:

View:

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="opensap.examples.controller.App" height="100%">
    <Page title="List Page">
        <content>
            <List headerText="{myModel>/question}" id="myList" items="{myModel>/answers}">
                <items>
                    <CustomListItem>
                        <FlexBox justifyContent="SpaceBetween">
                            <Text text="{myModel>answerText1}"/>
                            <CheckBox/>
                        </FlexBox>
                        <FlexBox justifyContent="SpaceBetween">
                            <Text text="{myModel>answerText2}"/>
                            <CheckBox/>
                        </FlexBox>
                    </CustomListItem>
                </items>
            </List>
            <Button press="load" text="Click Me"/>
        </content>
    </Page>
</mvc:View>

Controller:

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel"
], function(Controller, JSONModel) {

    var oData = {
        "question": "Which pet do you like from the following?",
        "answers": [{
            "answerText1": "Cats",
            "answerText2": "Rabbits"
        }, {
            "answerText1": "Dogs",
            "answerText2": "Hamsters"
        }]
    };
    var oModel;
    Controller.extend("opensap.examples.controller.App", {
        onInit: function() {
            oModel = new JSONModel();
            oModel.setData(oData);
            this.getView().setModel(oModel, "myModel");
        },
        load: function() {
            console.log(oModel);
        }
    });
});