Customizing Dialog response

This topic focuses on how to influence the UI behavior of a D2FS dialog from its server-side component especially the end outcome of a dialog. The server-side component is identified by the Java class having name same as the dialog itself and that implements ID2Dialog interface of the D2-API. In this topic, we refer to the server-side component as the dialog itself.

Methods of the dialog

• buildDialog(...) : This method is called while creating/recreating the Dialog presentation any time during an execution.
• validDialog(...) : This method is called with the intention of validating current data state and/or running a positive flow logic when user wants to move forward with the dialog execution.
• cancelDialog(...) : This method is called with the intention of cleanup and/or running a cancellation/negative flow logic, when user wants to stop/cancel the dialog execution.

How to communicate the final outcome of a dialog execution

There are 2 types of interactions that can be provided for the success message.

1. Alert : if the developer wants to show an alert message popup post operation.

       XmlNode result = super.validDialog(context);
       XmlNode msg = new XmlNodeImpl("message");
       msg.setValue("Processed Successfully");
       msg.setAttribute("type", "alert");
       msg.setAttribute("title", "Success");
       result.appendXmlNode(msg);

Sample Output :

   "page-content": {
        "success": {
            "message": {
                "content": "Processed Successfully",
                "order": 1,
                "title": "Success",
                "type": "alert"
            }
        }
    }

2. Toast : if the developer wants to show a toast message on top of the screen.

       XmlNode result = super.validDialog(context);
       XmlNode msg = new XmlNodeImpl("message");
       msg.setValue("Processed Successfully");
       msg.setAttribute("type", "toast");
       msg.setAttribute("title", "Success");
       result.appendXmlNode(msg);

Sample Output :

   "page-content": {
        "success": {
            "message": {
                "content": "Processed Successfully",
                "order": 1,
                "title": "Success",
                "type": "toast"
            }
        }
    }

Where

• message is child node of success, and it is mandatory which is having their content as Value. This is the communication message shown in the UI.
• type is also a mandatory key which allow either alert/toast as value. An alert is shown as a mini popup where as toast is shown as a banner in UI.
• title is an optional parameter. It is set only when type='alert' and it is displayed as the title for the alert popup in UI.

Overriding the default post action behavior

There are basically 3 types of post action that can be performed on the selected objects after the completion of the dialog service operation. Those operation can be set as an attribute to the result before returning in the case of validDialog(.) and cancelDialog(.)

1. Locate content and refresh state upon action : This will locate the object and update the state of the object selected. For example, if you are performing some operation which will move the selected object from one location to another. Then this attribute will help the user to identify where it is located as well as refreshing the state of the current container. Attribute used for this is locateAndRefresh
2. Refresh state : This will refresh the state of the object selected post dialog operation. For example, if you have performed a lifecycle operation or a property update as part of the validDialog(.) then if you want to have the updated menus as well as values in the selected item in the widget we would need to set this value as part fo the result. Attribute used for this is refreshCheckoutState
3. Refresh widget : This will reload the widget post the operation. Attribute used for this is refreshWidget

Sample Code

       XmlNode result = super.validDialog(context); 
        result.setAttribute("locateAndRefresh", "true"); 
        result.setAttribute("refreshCheckoutState", "true"); 
        result.setAttribute("refreshWidget","true"); 
        return result; 

info

1. Supported values are "true"/"false".
2. Default value if not set is false.

Passing additional data to the UI

Any attribute added to the top-level XML node from the output of validDialog() or cancelDialog() will be extracted on the UI side and merged onto the form data earlier collected in UI. E.g., in the following code snippet, before dialog validation if the form data contains prop1 but after the validation it has prop2 that was propagated from validDialog()

// In the dialog's Java class file
public XmlNode validDialog(D2fsContext context) throws Exception {
    XmlNode result = super.validDialog(context);
    result.setAttribute("prop2", "value2");
    return result;
}

//In the dialog's customized action code
import DialogAction from 'd2/sdk/controls/dialogs/generic/dialog.action';
class CustomValidateAction extends DialogAction {
    execute(options) {
        const {formView, dialogState} = optionns;
        return formView.validateForm(true)
            .then(isValid => {
                if(isValid) {
                    const formValues = {prop1: 'value1'}; // Suppose this is the literal form values we are passing to back-end
                    return dialogState.validateForm(formValues)
                        .then(formData => {
                            console.log(JSON.stringify(formValues)); // Prints {prop1: "value1", prop2: "value2"}
                            dialog.close();
                        });
                }
            });
    }
}