Button: click, submit and reset behavior
Choose whether a button runs a page action, submits a form or resets controls.
Choose whether a button runs a page action, submits a form or resets controls.
Before you begin
Section titled “Before you begin”- An App Connect page; a named form when the values will be submitted.
Set the button type explicitly
Section titled “Set the button type explicitly”A page-action button, a submit button and a reset button have different effects even when styled identically.
Configure ID and Type
Section titled “Configure ID and Type”ID identifies the button for bindings and actions. In the App Connect runtime the default type is button.
| Control or value | Meaning and use |
|---|---|
| button | Use with a Click Dynamic Event, for example products → Load. It does not submit the enclosing form by itself. |
| submit | Submits the enclosing form through its normal submit/validation behavior. Avoid also calling Submit from its Click event, which can create duplicate attempts. |
| reset | Restores the enclosing form’s initial control values. It does not remove a database record or roll back the last request. |
Read and change a form control
Section titled “Read and change a form control”Form-control data is directly under its component name, for example titleInput.value. It is not titleInput.data.value.
| Control or value | Meaning and use |
|---|---|
| Set Value | Changes the current control value. A later change to its bound Value can replace it and also change the form-reset default. Set Value emits Updated when the value changes; it does not simulate a user Changed event. |
| Disable | Pass true to disable and false to enable. Disabled controls are omitted from normal form submission. Read Only, where the input type supports it, prevents editing while leaving the value eligible for submission. |
| Focus | Moves keyboard focus to the control. Give the field a visible label and a useful place in the form’s focus order. |
| Validate | Invokes the App Connect validation helper. Load the validation extension for this action; client validation does not replace the endpoint’s validation. |
| value / disabled / focused | Current value and UI state. Text-based controls expose strings, including most number-input reads. Convert intentionally before arithmetic. |
| invalid / validationMessage | Client validation state/message. Render a useful field error when invalid, and handle server field errors on the form too. |
| Changed / Updated | Changed accompanies user input/change handling when the value changes. Updated also accompanies programmatic value updates. Do not make an Updated handler unconditionally write a different value back into the same field. |
Set Value is not a caption action
Section titled “Set Value is not a caption action”The inherited Set Value action changes the button’s value property, not its visible text content. Edit the button text or bind its text for a changing caption. Focus and Disable can help guide a user through a request; Validate is inherited and normally belongs on the relevant input/form.
Example: prevent repeated form submissions
Section titled “Example: prevent repeated form submissions”Put a button of Type submit inside saveForm. Bind Disabled to saveForm.state.executing and give it the caption Save. Check that it disables during the request and enables when the attempt ends. Show a success message from the form’s Success event, not from the button’s Click event.
Continue with a complete form workflow
Section titled “Continue with a complete form workflow”Use the related workflow to connect these controls to data and a verified submit result.
Check your result
Section titled “Check your result”You can configure the control, use its actual value shape and verify the example without confusing page state with a submitted or saved value.