Customize Bundles and Override Fields

The Kinetic Runtime environment supports extensive customization through bundle configuration. By defining a global bundle.config object, you can override default behaviors, inject custom renderers, and modify how specific field types are displayed or interact with your users.

These overrides are especially useful when you need to fine-tune how errors are handled, fields are rendered, or workflows are visually represented in the browser.

Bundle Configuration Overview

Here’s what a typical bundle.config block looks like:

<script>
  bundle.config = {
    ready: function(form) {
      // Called when the form is fully loaded
    },
    renderers: {
      submitErrors: function(response) {
        // Custom logic for submission errors
      },
      resourceErrors: function(bridgedResource, response) {
        // Custom logic for bridged resource errors
      },
      fieldConstraintViolations: function(form, fieldConstraintViolations) {
        // Custom validation feedback
      }
    },
    fields: {
      text: {
        callback: function(field) { ... },
        render: function(field) { ... }
      }
    }
  };
</script>

 

Ready Function

The ready callback is triggered once a form is successfully loaded and rendered. It receives the form object and can be used to initialize UI behavior, inject JavaScript logic, or apply custom styles.

ready: function(form) {
  console.log('Form is ready:', form.name);
}

Renderer Callbacks

Renderer callbacks allow you to override system defaults for error display and validation handling.

Available Renderer Hooks

Field Constraint Violations

This function receives the current form and an object describing the fields that failed validation:

fieldConstraintViolations: function(form, fieldConstraintViolations) {
  console.warn('Field errors:', fieldConstraintViolations);
}

Example Structure:

{
  "Requested By": [
    "This field is required and must be populated."
  ]
}

Submit Errors

This is called when a submission fails due to a server-side issue:

submitErrors: function(response) {
  alert("There was a problem submitting your form.");
}

Resource Errors

This is triggered when a bridged resource call fails and no specific error handler is passed in the request:

resourceErrors: function(bridgedResource, response) {
  console.error('Bridge error:', bridgedResource.name, response);
}

Field Customizations

You can override how specific field types are rendered using the fields property. Each field type (e.g., text, checkbox, date) can define:

• render: a custom rendering function that replaces the default
• callback: a function executed after the field is rendered to apply enhancements

fields: {
  text: {
    render: function(field) {
      // Completely custom rendering
    },
    callback: function(field) {
      // Enhancements after rendering
    }
  }
}

Supported Field Types

These field types can be customized:

• text
• checkbox
• radio
• dropdown
• date
• datetime
• time
• attachment

🚧

Note: You cannot override section, content, or button fields with this method.

Each field automatically binds appropriate change events. Fields like date, datetime, time, and attachment come with enhanced rendering logic by default, making them ideal candidates for advanced customization (e.g., integrating a custom date picker or file uploader).

When to Use Bundle Overrides

Use bundle customizations when you need to:

• Implement consistent validation feedback
• Replace or extend how specific field types render
• Handle edge cares with bridged resource failures
• Control form behavior at a global level

Related Topics:

• Using Bridged Resources in Forms
• CoreForm Props Reference
• Querying and Displaying Submissions