CODEWITHSUNDEEP
sapui5
namita kalita
namita kalita

Reputation: 79

Show and hide sap.m.Panel in SAPUI5 App

In my sapui5 app, I have 4 panels, created using the sap.m.Panel control.

var oPanel1 = new sap.m.Panel({
    headerText : "1",
}); 
var oPanel2 = new sap.m.Panel({
    headerText : "2",
});
var oPanel3 = new sap.m.Panel({
    headerText : "3",
});
var oPanel4 = new sap.m.Panel({
    headerText : "4",
});

Now I want to add a setting button with a form containing check-box elements as panels name, by default all panels name are checked in the form.

If I want to hide any panel by un-checking any of the the panel name from the settings form.

Is it possible in SAPUI5, if yes, how?

Upvotes: 1

Views: 3406

Answers (1)

hirse
hirse

Reputation: 2412

You can make the visibility of the Panels conditional by binding the property to a model property. In the next step you bind the checked-state of a checkbox to the same model property.

var oModel = new sap.ui.model.json.JSONModel({
    panels: {
        1: {
            visible: true
        }
    }
});

var oPanel1 = new sap.m.Panel({
    headerText : "1",
    visible: "{panelModel>/panels/1/visible}"
}); 
oPanel1.setModel(oModel, "panelModel");

var oCheckBox1 = new sap.m.CheckBox({
    selected: "{panelModel>/panels/1/visible}",
    text: "1"
});
oCheckBox1.setModel(oModel, "panelModel");

Upvotes: 2

Related Questions