Skip to main content

Work on the frontend logic

Frontend logic is used to create a dynamic and responsive user experience directly within your browser. In KAIZEN, this is performed by writing JavaScript in the integrated Source Code Panel of the App Designer.

Most frontend logic is event-driven. The code executes in response to a user's action, such as clicking a button or changing a value in a form.

To implement frontend logic, perform the following:

  • Write a JavaScript function: In the Source Code Panel, write a function that contains the logic you want to execute.

    For example, a function to handle moving to the next step in form.JavaScript.

  • Select the UI component: On the canvas, click the component which will trigger the event (e.g., a Next button).

  • Bind the function to an event: In the Setter Plugin on the right, navigate to the Events tab. Click the Component native event” button and select the event type, such as onClick.

  • Select the function: In the dialog that appears, select the custom function (e.g., onClick_Next) from the list of available events and click Confirm.

When the user clicks the Next button, the JavaScript function will run.

Common use cases for frontend logic include:

  1. Custom form validation: Write functions to perform complex validation that goes beyond the built-in rules. For example, creating a checkDates function to ensure a selected start date is always before an end date.

  2. Dynamic UI control: Programmatically show or hide components based on application state. For instance, make a specific form section visible only when this.state.currentStep is equal to a certain value.

  3. Populating form fields: Use functions to set the values of form fields automatically. The this.formField.setValue("fieldName", "value") function is used to populate fields, for example, after a user clicks a Fill my details button.

  4. Programmatic navigation: Use built-in utility functions like this.utils.navigateTo('appId', 'pageId') to direct the user to a new page after an action is completed.

Last updated on 20 May 2026