Record Events

Record events fire during data operations - when records are created, updated, or deleted:

Knack.ready().then(async () => {
  // Listen for record creation
  Knack.on('record:create', ({ record, viewKey }) => {
    console.log('Record created:', record);
    console.log('In view:', viewKey);
    
    // Trigger business logic based on new record
    if (record.field_priority === 'High') {
      console.log('High priority record created, sending notifications');
      sendNotificationToManagers(record);
    }
  });
  
  // Listen for record updates
  Knack.on('record:update', ({ record, viewKey }) => {
    console.log('Record updated:', record);
    processRecordUpdate(record, viewKey);
  });
  
  // Listen for record deletion
Knack.on('record:delete', ({ record, viewKey }) => {
  console.log('Record deleted:', record);
  });
});

Supported Record Events

Event: record:create

Event: record:create:view_key

Event: record:delete

Event: record:delete:view_key

Event: record:update

Event: record:update:view_key

Event: record:update-inline

Event: record:update-inline:view_key

Record Event Use Cases

Record events are perfect for:

Triggering workflows based on data changes
Sending notifications when important records are created
Updating related data in other systems
Logging data operations for audit trails
Implementing business rules and validations

// Example: Customer onboarding workflow
Knack.on('record:create', ({ record, viewKey }) => {
  if (viewKey === 'view_customer_form' && record.field_customer_type === 'Enterprise') {
    console.log('New enterprise customer created:', record.field_company_name);
    
    // Trigger enterprise onboarding workflow
    triggerEnterpriseOnboarding(record);
    
    // Assign to enterprise account manager
    assignEnterpriseAccountManager(record);
    
    // Send welcome email with enterprise features
    sendEnterpriseWelcomeEmail(record.field_email);
  }
});

Form Events

Supported Form Events:

form:submit

form:submit:view_key

Form events provide comprehensive coverage of form interactions:

Knack.ready().then(async () => {
  // Listen for form submissions
  Knack.on('form:submit', ({ record, viewKey, isEdit }) => {
    console.log('Form submitted:', record);
    console.log('Is edit form:', isEdit);
    
    // Process form data
    if (record.field_email && !record.field_email.includes('@company.com')) {
      console.log('External email detected:', record.field_email);
      triggerExternalUserWorkflow(record);
    }
  });

Form-Specific Events

Listen for events on specific forms:

// Contact form specific events
Knack.on('form:submit:view_456', ({ record, isEdit }) => {
  console.log('Contact form submitted');
  
  if (!isEdit) {
    // New contact logic
    console.log('New contact created:', record.field_name);
    triggerNewContactWorkflow(record);
  } else {
    // Contact update logic
    console.log('Contact updated:', record.field_name);
    triggerContactUpdateWorkflow(record);
  }
});

// Order form specific events
Knack.on('form:submit:view_789', ({ record }) => {
  console.log('Order form submitted');
  
  const orderTotal = Number(record.field_total) || 0;
  
  if (orderTotal > 1000) {
    console.log('Large order detected:', orderTotal);
    triggerLargeOrderApproval(record);
  }
  
  // Check inventory
  checkInventoryLevels(record.field_items);
});

👍
Replace field_name, field_total, and field_items with your actual field keys (e.g., field_123) from your app

Best Practices

Separate Business Logic from Presentation

// ✅ Good - Business logic only
Knack.on('form:submit', ({ record, viewKey }) => {
  // Process the business logic
  if (record.field_priority === 'High') {
    sendUrgentNotification(record);
  }
  
  // If you need visual feedback, use CSS targeting the view or native states.
  // Example CSS (not JS):
  // .scene_123_view_456 [data-field="field_status"][data-value="Complete"] { ... }
});

// ⚠️ Caution - Direct DOM manipulation
Knack.on('form:submit', ({ data }) => {
  document.querySelector('.status').innerHTML = 'Processing...';
  document.querySelector('.button').style.backgroundColor = 'green';
});