Event Handling & Button Actions in Qödiak

Learn how to make your Qödiak apps respond to user interactions with events and button actions. This guide walks you through built‑in events, predefined button actions, custom JavaScript scripts, conditional logic, and the full form‑submission flow.

Understanding Events in Qödiak

Events are the triggers that tell Qödiak when something has happened on the screen. By attaching an event to a component—such as a button, input field, or form—you can decide what should occur next, whether it’s navigating to another page, showing a message, or running a custom script.

Supported Events

• onClick: Fires when a button or any clickable element is clicked.
• onChange: Fires when the value of an input field changes (e.g., typing in a text box or selecting a dropdown option).
• onFocus: Fires when an input receives focus.
• onBlur: Fires when an input loses focus.
• onSubmit: Fires when a form is submitted.

Button Action Types

Buttons are the most common way to trigger actions in Qödiak. You can choose between two broad categories: predefined actions that require no code, and custom scripts written in JavaScript for more complex scenarios.

Predefined Actions (No Code Required)

These actions are ready‑to‑use and are ideal for simple, repeatable tasks.

1. Navigate to Page – Direct the user to another page within the same app.
2. Submit Form – Send the current form’s data to Qödiak’s built‑in storage.
3. Open URL – Open an external website in a new browser tab.
4. Reset Form – Clear all fields in the current form.
5. Show Message – Display a temporary notification (toast) to the user.

Custom Scripts (JavaScript)

When you need logic that goes beyond the predefined set, you can write a custom script. Scripts run in the user’s browser, giving you full DOM access and the ability to interact with Qödiak’s helper functions.

• Write any JavaScript expression or function block.
• Access form data with getField('fieldId') and update it with setField('fieldId', value).
• Show or hide components using showComponent('componentId') and hideComponent('componentId').
• Navigate programmatically with navigateToPage('pageId').

Conditional Logic & Dynamic UI

Conditional logic lets you tailor the user experience based on what the user does or who they are. In Qödiak, you typically implement this with custom scripts that call the visibility helpers.

Show/Hide Components

Use the following functions inside an onChange or onClick script to control component visibility:

if (getField('hasDiscount').value === true) {
    showComponent('discountCodeInput');
} else {
    hideComponent('discountCodeInput');
}

Role‑Based Visibility

Qödiak provides a RoleGate component that automatically shows or hides its children based on the logged‑in user’s role. Combine RoleGate with custom scripts for even finer‑grained control.

Form Submission Flow in Qödiak

Understanding the built‑in submission pipeline helps you decide where to hook custom logic.

1. User fills in form fields – All visible inputs collect data.
2. Client‑side validation runs – Qödiak checks required fields, patterns, and custom validators.
3. onSubmit event fires – If you have attached a script, it runs now.
4. Data is saved to built‑in storage – The record is persisted automatically.
5. Webhooks fire – Any external integrations you configured receive the payload.
6. Email notifications sent – If you set up email alerts, they are dispatched.
7. User sees success/thank‑you message – Typically a predefined Show Message action or a custom success screen.

Practical Examples & Use Cases

Example 1: Simple Navigation Button

Goal: After a user completes a survey, they click “Next” to go to the “Results” page.

1. Add a button component to the survey page.
2. In the button’s Action dropdown, select Navigate to Page.
3. Choose the target page “Results”.
4. Save and preview – clicking the button now takes the user to the Results page without any code.

Example 2: Conditional Discount Field

Goal: Show a “Discount Code” input only when the user selects “Yes” for “Do you have a discount?”.

1. Place a radio button group with options “Yes” and “No”. Give it the ID hasDiscount.
2. Add a text input for the discount code and set its ID to discountCodeInput. Initially hide it using the component’s visibility settings.
3. On the radio group, attach an onChange event and add the following custom script:

   if (getField('hasDiscount').value === 'Yes') {
       showComponent('discountCodeInput');
   } else {
       hideComponent('discountCodeInput');
   }
   

4. Test the form – selecting “Yes” reveals the discount field, while “No” keeps it hidden.

Example 3: Custom Form Submission with Email Notification

Goal: After a contact form is submitted, send a custom email using a third‑party API.

1. Set the button’s action to Submit Form (predefined).
2. Attach an onSubmit script to the form:

   const data = {
       name: getField('name').value,
       email: getField('email').value,
       message: getField('message').value
   };
   fetch('https://api.example.com/send-email', {
   method: 'POST',
   headers: { 'Content-Type': 'application/json' },
   body: JSON.stringify(data)
   })
   .then(response => response.json())
   .then(result => {
   showMessage('Your message has been sent!');
   })
   .catch(err => {
   showMessage('Oops! Something went wrong.');
   });
   

3. Because this uses a custom script, ensure your app is on the Starter tier or higher.
4. Publish and test – the form now saves data, calls the external API, and shows a success toast.

Tips & Best Practices

Start simple. Use predefined actions whenever they meet the requirement—they’re faster to configure and less prone to errors.

Reserve custom scripts for advanced logic. Complex calculations, third‑party API calls, or dynamic UI changes that aren’t covered by predefined actions should be handled with JavaScript.

Mind the tier. Custom scripts are only available on the Starter tier or higher, so plan your subscription accordingly.

Test in preview mode. Always verify event triggers and script outcomes in Qödiak’s preview before publishing to production.

Tier Requirements for Event Handling

All predefined actions are available on any plan, including the free tier. To write and run custom JavaScript scripts (including showComponent, hideComponent, navigateToPage, etc.), your app must be on the Starter tier or above.

Conclusion

Qödiak’s event system and button actions give you a powerful yet approachable way to make your apps interactive. By leveraging the built‑in events, choosing the right predefined action, and adding custom scripts only when necessary, you can create smooth user experiences without writing extensive code. Remember to test each event in preview, keep an eye on tier limitations, and use conditional logic to keep your UI clean and responsive.