Model as Interface to Dialog

We often use Dialog Box to collect user's inputs. Dialog's content can be simple or complex. The former is easy to deal with. However the latter needs a lot of effort. In this blog, we want to share an interface between dialog on caller to solve some fundamental things such as

1. How do I initialize the values of controls in the dialog? Do I have to know get the controls in the dialog and set their values accordingly?
2. How do I get the values of controls when user click on the Submit/OK buttons?
3. How do I reset the values of the dialog when it is opened again.

We propose that we use a JSON model as the interface between the caller and the dialog. Let looks at some codes.

    var dialog = new sap.m.Dialog({
         title: 'TItle of Dialog',
         content: [
             new sap.m.Input({value: '{/value1}'}),
             new sap.m.Input({value: '{/value2}'})
 ],
         beginButton: new sap.m.Button({
             text: 'OK',
             press: function () {
                 if (dialog.success) {
                     if (dialog.success()) {
                        dialog.close();
                    }
                 } else {
                    dialog.close();
                }
             }
         }),
         endButton: new sap.m.Button({
             text: 'Cancel',
             press: function () {
                 dialog.close();
             }
        })
     });

For illustration purpose, we keep the controls in the dialog simple. We have just two controls. And they are bind to /value1 and /value2 respectively. And when OK button is clicked, success function is called. Let's look at the caller's code.       

var model = new sap.ui.model.json.JSONModel();
model.setData({
value1: "",
value2: "Default value for 2"
});
dialog.setModel(model);
dialog.success = function () {
var model = dialog.getModel();
var data = model.getData();
alert(data.value1);
alert(data.value2);
 return true;
}
dialog.open();

The caller set the values for the two inputs in the dialog via a model and expects the dialog to call the success function if OK button is pressed. In this manner, the controls in the dialog can be changed to TextArea or other controls later; and the caller's code remains unchanged.

Summary: We have a way to set the default values for these inputs and their values are always re-initialize when dialog is open; and caller does not need to know the kinds of controls used in the dialog as it just fetch the values from the model.

Working code is at JSBin.

Dennis