Methods (methods)

Designers can use Vue's methods approach in scripts to execute personalized business logic. For example: after listening to data changes, calculate page data or call automations through methods.

Built-in Variables

Form data (form)

For example, if the designed form contains a single-line text field with the identifier (name)

// Get form field (name) data
console.log(this.form.name);
// Set form field (name) data
this.form.name = "Zhang San";

informat

The globally available informat object. After the page loads, the platform binds the informat object to the window object. Designers can use informat to call functional functions provided by client scripts.

Built-in Functions

submitForm

Submit the form

this.submitForm(isValidate);

Parameter	Type	Description
isValidate	boolean	Whether to validate the form when submitting. Defaults to true if not passed

// Validate before submitting the form
this.submitForm(true).then(() => {
  console.log("submitForm fired");
});

// Submit the form without validation
this.submitForm(false).then(() => {
  console.log("submitForm fired");
});

closeForm

Close the form (closeForm)

this.closeForm().then(() => {
  console.log("close form");
});

Closing the form

closeForm is only valid when using controls, automations to open forms, form creation pages, and form detail pages.

reset

Reset the form (reset)

this.reset().then(() => {
  console.log("reset form");
});

getData

Get form data

this.getData(isValidate);

Parameter	Type	Description
isValidate	boolean	Whether to validate the form when getting data. Defaults to true if not passed

this.getData(true).then((formData) => {
  console.log(formData);
});

validate

Validate form data

this.validate(fields);

Parameter	Type	Description
fields	String、Array<String>	The field identifiers to validate. If not passed, all fields in the form will be validated

// Single field validation
this.validate("name")
  .then(function () {
    console.log("validate success");
  })
  .catch(function (error) {
    console.log("validate error", error);
  });

// Multiple field validation
this.validate(["name", "sex"])
  .then(function () {
    console.log("validate success");
  })
  .catch(function (error) {
    console.log("validate error", error);
  });

// Validate the entire form
this.validate()
  .then(() => {
    console.log("validate success");
  })
  .catch(function (error) {
    console.log("validate error", error);
  });

display

Set form field display

this.display(fields);

Parameter	Type	Description
fields	String、Array<String>	The collection of field identifiers to display

// Set the field with identifier name to display
this.display("name")
  .then(() => {
    console.log("display execute");
  })
  .catch(function (error) {
    console.log("display execute error", error);
  });

// Set fields with identifiers name and sex to display
this.display(["name", "sex"])
  .then(() => {
    console.log("display execute");
  })
  .catch(function (error) {
    console.log("display execute error", error);
  });

hide

Set form field hide

this.hide(fields);

Parameter	Type	Description
fields	String、Array<String>	Collection of field identifiers to hide

// Set the field with identifier name to hide
this.hide("name")
  .then(function () {
    console.log("hide execute");
  })
  .catch(function (error) {
    console.log("hide execute error", error);
  });

// Set fields with identifiers name and sex to hide
this.hide(["name", "sex"])
  .then(function () {
    console.log("hide execute");
  })
  .catch(function (error) {
    console.log("hide execute error", error);
  });

disabled

Set field disabled state

this.disabled("name", true); // Set the field with identifier name to disabled

Parameter	Type	Description
fields	String、Array<String>	Collection of field identifiers to display
disabled	Boolean	Whether to disable the field. Optional parameter, defaults to true if not passed

// Set the field with identifier name to disabled
this.disabled("name", true)
  .then(function () {
    console.log("disabled execute");
  })
  .catch(function (error) {
    console.log("disabled execute error", error);
  });

// Set fields with identifiers name and sex to disabled
this.disabled(["name", "sex"], true)
  .then(function () {
    console.log("disabled execute");
  })
  .catch(function (error) {
    console.log("disabled execute error", error);
  });

// Set the field with identifier name to enabled
this.disabled("name", false)
  .then(function () {
    console.log("disabled execute");
  })
  .catch(function (error) {
    console.log("disabled execute error", error);
  });

// Set fields with identifiers name and sex to enabled
this.disabled(["name", "sex"], false)
  .then(function () {
    console.log("disabled execute");
  })
  .catch(function (error) {
    console.log("disabled execute error", error);
  });

dialogOpen

Open dialog

this.dialogOpen(dialogMode);

Parameter	Type	Description
dialogMode	String	Dialog identifier

// Open dialog with identifier dialogSubForm
this.dialogOpen("dialogSubForm")
  .then(function () {
    console.log("dialogOpen execute");
  })
  .catch(function (error) {
    console.log("dialogOpen execute error", error);
  });

dialogClose

Close dialog

this.dialogClose(dialogMode);

Parameter	Type	Description
dialogMode	String	Dialog identifier

// Close dialog with identifier dialogSubForm
this.dialogClose("dialogSubForm")
  .then(function () {
    console.log("dialogClose execute");
  })
  .catch(function (error) {
    console.log("dialogClose execute error", error);
  });

onEvent

Add event listener

this.onEvent(eventType, handler, field);

Parameter	Type	Description
eventType	String	The event type to listen for
handler	Function	The handling method to listen for
field	String	The field identifier that triggers the event. If not passed, it listens to all events of this type in the form

// Globally listen for page field data changes
this.onEvent("onChange", function (data) {
  console.log("onChange", data);
})
  .then(function () {
    console.log("onEvent execute");
  })
  .catch(function (error) {
    console.log("onEvent execute error", error);
  });

// Specify to listen for page field (name) data changes
this.onEvent(
  "onChange",
  function (data) {
    console.log("onNameChange", data);
  },
  "name"
)
  .then(function () {
    console.log("onEvent execute");
  })
  .catch(function (error) {
    console.log("onEvent execute error", error);
  });

onceEvent

Add single-time event listener

this.onceEvent(eventType, handler, field);

Parameter	Type	Description
eventType	String	The event type to listen for
handler	Function	The handling method to listen for
field	String	The field identifier that triggers the event. If not passed, it listens to all events of this type in the form

// Specify to listen for page all field data changes
this.onceEvent("onChange", function (data) {
  console.log("onNameChange", data);
})
  .then(function () {
    console.log("onceEvent execute");
  })
  .catch(function (error) {
    console.log("onceEvent execute error", error);
  });

// Specify to listen for page field (name) data changes
this.onceEvent(
  "onChange",
  function (data) {
    console.log("onNameChange", data);
  },
  "name"
)
  .then(function () {
    console.log("onceEvent execute");
  })
  .catch(function (error) {
    console.log("onceEvent execute error", error);
  });

offEvent

Remove event listener

this.offEvent(eventType, handler, field);

Parameter	Type	Description
eventType	String	The event type to listen for
handler	Function	The handling method to listen for. If not passed, all listeners under this event type are removed
field	String	The field identifier that triggers the event. If not passed, all listeners of this event type are removed

// Remove global listener for page field data changes
this.offEvent("onChange", function (data) {
  console.log("onChange", data);
}).then(function () {
  console.log("offEvent execute");
});

// Remove specific listener for page field (name) data changes
this.offEvent(
  "onChange",
  function (data) {
    console.log("onNameChange", data);
  },
  "name"
).then(function () {
  console.log("offEvent execute");
});

Complete Example

{
    props: {
        // Define page properties
        uname:{
            type:String;
        }
    },
    data: function () {
        return {
            // Define the optional data item list for the dropdown box
            sexList: [
                {
                    key: 'f',
                    label: 'Male'
                },
                {
                    key: 'm',
                    label: 'Female'
                }
            ]
        };
    },
    // When the page component creates an instance
    created: function () {

    },
    // Execute business logic after the page is mounted
    mounted: function () {
        var that = this;
        setTimeout(function () {
            that.setup();
        }, 0);
    },
    // Before the page component is destroyed
    beforeDestroy: function () {

    },
    methods: {
        // Execute custom processing after the page is mounted
        setup: function () {
            var that = this;
            // Output the properties of the context
            console.log(this.uname);
            // Set the data of the current form field (name)
            that.form.name = 'Zhang San';
            // Call the API function bound by the script
            informat.system.getToken().then(res => {
                console.log(res);
            });
            // Globally monitor page field data changes
            that.onEvent('onChange', function (data) {
                console.log('onChange', data);
            });
            // Monitor page button (buttonSubmit) click event
            that.onEvent('onClick', function (data) {
                that.getData(true).then((res) => {
                    informat.app.callAutomatic({
                        automaticId: 'formdesignerInvoker',
                        args: [res]
                    });
                    // console.log('onClick.getData',res);
                });
            }, 'buttonSubmit');
            // Monitor page button (buttonAdd) click event, then pop up a dialog box (dialog_e2duygzp)
            that.onEvent('onClick', function (data) {
                that.dialogOpen('dialog_e2duygzp');
            }, 'buttonAdd');
            // Monitor page button (buttonCancel) click event, then reset the form
            that.onEvent('onClick', function (data) {
                that.reset();
            }, 'buttonCancel');
            // Specify to monitor page field (name) data changes
            that.onceEvent('onChange', function (data) {
                console.log('onNameChange', data);
                // Get all current form data
                console.log('onNameChange.form', that.form);
            }, 'name');
            // Specify to monitor page dialog box (dialog_e2duygzp) click cancel time
            that.onceEvent('onDialogCancel', function (data) {
                console.log('onDialogCancel', data);
                that.dialogClose('dialog_e2duygzp');
            }, 'dialog_e2duygzp');
        }
    }
}