Controlling Attributes of Toolbar Buttons Through JS

Version

Expected Effect

For data entry reports, the attributes (such as visibility and availability) of specific buttons on the toolbar can be changed during report review or after successful submission to avoid accidental operations. For example, after successful submission, the Print and Email functions are disabled, as shown in the following figure.

Implementation Method

Choose Template > Web Attribute > Data Entry Setting, add a Data Entry Successful event, and use JavaScript codes to set the availability or visibility of a button according to its name.

For details about JS APIs related to the toolbar, see Toolbar API.

Template Preparation

Prepare a data entry template.

Event Addition

Open the template, choose Template > Web Attribute > Data Entry Setting, set Following Settings to Set for This Template Separately, and add a Data Entry Successful event, as shown in the following figure.

The JavaScript codes are as follows:

Note:

1. When setting attributes of the toolbar buttons, ensure that the button triggering the current event remains enabled. In this example, the Submit button should not be disabled.

2. The widget name of the Email button is email, and the widget name of the Print button is newprint. For details, see getWidgetByName.

_g().getToolbar().getWidgetByName("email").setEnable(false);
_g().getToolbar().getWidgetByName("newprint").setEnable(false);

To disable specific buttons during initialization, you can add a Loading End event and include a delay function in the code, as shown in the following figure.

setTimeout(function(){
_g().getToolbar().getWidgetByName("email").setEnable(false);
_g().getToolbar().getWidgetByName("newprint").setEnable(false);
},1000);

Effect Display

Save the template and click Data Entry Preview. The preview effect is shown in section "Expected Effect."

Note:

The effect cannot be previewed on mobile terminals.

For details, you can download the template Controlling Attributes of Toolbar Buttons Through JS.cpt.