What You'll Learn

This guide will teach you how to leverage the Knack object API to build powerful, responsive applications. You'll discover how to access your app's schema data, implement modern event-driven architecture, and tips on customizations using CSS-first approaches.

Key Concepts

Next-Gen Knack introduces a fundamentally different approach to customization:

Promise-based API - All data access methods return promises for modern async/await patterns
Event-driven architecture - Event system for business logic
CSS-first customization - All visual changes handled through CSS, not DOM manipulation
Official class names - Documented CSS classes for reliable styling
Separation of concerns - JavaScript handles logic, CSS handles presentation

Core Components

The Knack Object API consists of several main areas:

Schema Access Methods

Get information about your application's structure including pages, tables, fields, and views.

Event System

Listen for application events to trigger business logic at the right moments.

External Resource Loading

Load JavaScript libraries and CSS files with built-in duplicate prevention.

CSS-First Customization

Style your application using official Next-Gen CSS classes and selectors.

Getting Started

All Knack Object API code should be wrapped in the Knack.ready() promise to ensure the application is fully loaded:

Knack.ready().then(async () => {
  // Your code here
  const user = await Knack.getUser();
  console.log('Current user:', user);
});

Differences from Classic Knack

In Classic Knack, styling was often applied imperatively in the JS Builder using jQuery. In Next-Gen, styling should be defined in the CSS pane using selectors.

Classic (JS Pane): $('#view_123 button').css('color', 'red')
Next-Gen (CSS Pane): Use CSS selector #scene_123 #view_456 .kn-action-button { background-color: #e51010; }

📝
If you're coming from Classic Knack, the most important change is moving from jQuery-based DOM manipulation for styling to a CSS-first approach.