ES7 dialog and form handling pattern

Here’s a handy pattern for handling dialogs and forms in an ES7 application:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
form = {
    formfield: "",
};
processForm = null;

openForm(open_form_parameter:int)
{
    // Show dialog

    this.processForm = ()=>{
        // Use open_form_parameter in here with this.form
        // Hide dialog
    }
}

The trick is that open_form_parameter is only available when opening the form (it could be an id of something you clicked to open the dialog). It then gets captured when the processing function (processForm) is defined so that it can be used when the dialog is acknowledged. It saves having to manually store it for use later.