What You'll Learn

You'll learn about the event-driven architecture that powers Next-Gen Knack applications. Learn how to listen for page renders, view updates, form submissions, and record changes to trigger business logic at precisely the right moments. This approach separates presentation from logic, creating more maintainable and powerful applications.

👍
Every JavaScript customization must begin with the Knack.ready() method. This ensures the Knack object is fully initialized and the React application has finished mounting before your custom code executes.

Event Categories

The Knack event system is organized into several main categories:

Page Events - Triggered when pages are rendered or navigated
View Events - Fired when specific views are displayed
Record Events - Occur during data operations (create, update, delete)
Form Events - Handle form interactions and submissions

Event Naming Conventions

Next-Gen events use a hierarchical naming system that allows both broad and specific event listening:

General Event Patterns

page:render - Any page renders
view:render - Any element renders
form:submit - Any form submits
record:create - Any record is created

Specific Event Patterns

page:render:scene_123 - Specific page renders
view:render:view_456 - Specific element renders
form:submit:view_789 - Specific form submits

Type-Specific Event Patterns

view:render:form - Any form view renders
view:render:table - Any table view render
view:render:details - Any details view renders
view:render:list - Any list view renders

Event Data Structures

Each event provides a consistent data object with relevant information:

Page Events

Knack.on('page:render', ({ pageKey }) => {
  console.log('Event data:', { pageKey });
  // pageKey: string (e.g., 'scene_123')
});

View Events

JavaScript
Knack.on('view:render', ({ viewKey }) => {
  console.log('View rendered:', {
    viewKey,   // e.g., 'view_456'
  });
});

Form Events

Knack.on('form:submit', ({ record, viewKey, isEdit }) => {
  console.log('Event data:', { record, viewKey, isEdit });
  // record: object (form field values after submission)
  // viewKey: string (e.g., 'view_456')
  // isEdit: boolean (true for edit forms)
});

Record Events

Knack.on('record:create', ({ record, viewKey }) => {
  console.log('Record created:', record);
});

Knack.on('record:update', ({ record, viewKey }) => {
  console.log('Record updated:', record);
});

Knack.on('record:delete', ({ recordId, viewKey }) => {
  console.log('Record deleted:', recordId);
});

Basic Event Syntax

All events follow the same pattern using Knack.on():

JavaScript
Knack.ready().then(async () => {
  // Listen for any event of this type
  Knack.on('event:type', (payload) => {
    console.log('Event triggered:', payload);
  });

  // Listen for a specific event
  Knack.on('event:type:specific_id', (payload) => {
    console.log('Specific event triggered:', payload);
  });
});

Event Data Structure

Each event provides structured data relevant to the event type:

JavaScript
Knack.on('view:render', ({ viewKey }) => {
  console.log('View rendered:', {
    viewKey,   // e.g., 'view_456'
  });
});

Best Practices

Use Events for Logic

Events should trigger business logic, data processing, and API calls

// ✅ Good - Business logic
Knack.on('record:create', ({ record, viewKey }) => {
  console.log('New record created:', record);
  
  if (record.field_priority === 'High') {
    console.log('High priority record, sending notifications');
    sendNotificationToManagers(record);
  }
});

// ⚠️ Use with caution - DOM manipulation
Knack.on('view:render', ({ viewKey }) => {
  document.querySelector('.kn-button').style.color = 'red';
});

Efficient Event Registration

Register events efficiently to avoid performance issues:

// ✅ Efficient - Single listener with conditional logic
Knack.on('view:render', ({ viewKey }) => {
  if (viewKey.includes('form')) {
    handleFormRender(viewKey);
  } else if (viewKey.includes('table')) {
    handleTableRender(viewKey);
  }
});

// ❌ Inefficient - Multiple similar listeners
for (let i = 1; i <= 50; i++) {
  Knack.on(`view:render:view_${i}`, () => {
    console.log(`View ${i} rendered`);
  });
}

Error Handling in Events

Handle potential errors in event listeners:

Knack.on('form:submit', async ({ record, viewKey }) => {
  try {
    await processFormSubmission(record);
    console.log('Form processed successfully');
  } catch (error) {
    console.error('Form processing failed:', error);
    // Handle error appropriately
  }
});

Event Lifecycle

Events follow a predictable lifecycle that you can leverage:

Application Load - Knack.ready() resolves
Page Navigation - Page events fire
View Rendering - View events fire in sequence
User Interaction - Form and record events fire
Data Changes - Record events fire with updated data

Understanding this lifecycle helps you place your business logic at the optimal points in your application's flow.