How to bind property (checked) from checkbox in dialog with label on the column table, SAPui5

Question

i have a view, which contains table; with onclick event dialog pops up with checkboxes in it. When user checkes boxes, the same columns(as checkboxes) should be added to the table. How to bind properties of checkbox (checked: true) with column(setVisible) ? Thank you!

ex of checkbox:

var tv3 = new sap.ui.commons.CheckBox({
    text : 'Equipment Tag',
    checked: false,
});

one of the tablecolumn

table.addColumn(new sap.ui.table.Column({
    label : new sap.ui.commons.Label({
        text : "Functional Location"
    })
}));

Answer 1

You're asking how to bind checkbox selections in a dialog with visibility of columns in a table. You can use a JSON model to achieve this:

• have visibility properties for each of the columns you want bind
• those model properties to the visible property of each column control
• bind those model properties also to the checkbox control's selected property

The two-way binding will mean that the effect is achieved. I've written a working example with a JSON model, commons Table, Columns and CheckBox controls in a Dialog for you to see.

Here are the salient parts:

Visibility in JSON model:

sap.ui.getCore().setModel(new sap.ui.model.json.JSONModel({
    visibleColumns: {
        firstName: true,
        lastName: true
    },
    names: [
        { firstName: "DJ", lastName: "Adams" },
        { firstName: "Joseph", lastName: "Adams" }
    ] 
}));

Visibility binding on Column:

new sap.ui.table.Column({
    visible: "{/visibleColumns/firstName}",
    label: new sap.ui.commons.Label({ text: "First Name" }),
    template: new sap.ui.commons.TextView({ text: "{firstName}" })
}),

Visibility binding on CheckBox:

new sap.ui.commons.CheckBox({
    text: "First Name",
    checked: "{/visibleColumns/firstName}"
})

Bonus: You may be interested in the TablePerso* mechanism set in the sap.m library which does a similar thing for column visibility.