This content is currently WIP. Diagrams, content, and structure are subject to change.
This section explores the data binding and state management capabilities of the C3 Agentic AI Platform. These features enable you to connect your UI components to data from the Type System and manage application state effectively.

​
Data Binding Overview

Data binding connects your UI components to data from the Type System, ensuring that your interface stays in sync with the underlying data model. This creates a seamless connection between what users see and the actual data in your application.

​
Key Data Binding Capabilities

Declarative data fetching

Specify what data you need, not how to get it, using a simple, declarative syntax.

Automatic updates

UI components automatically update when the underlying data changes.

Relationship traversal

Access related entities through the Type System’s relationship model.

Form binding

Connect forms directly to Type instances for simplified data entry and validation.

​
Data Binding Patterns

The C3 Agentic AI Platform supports several data binding patterns to address different use cases:

​
Fetching Data

You can fetch data from the Type System using a declarative approach that specifies what data you need without worrying about how to retrieve it: This approach:
  • Declaratively specifies what data you need
  • Automatically handles loading states
  • Manages error conditions
  • Provides the data to child components

​
Real-time Updates

For data that changes frequently, you can use real-time data binding to ensure your UI always reflects the latest information: Real-time updates are particularly useful for:
  • Monitoring dashboards
  • Alerting systems
  • Collaborative applications
  • Any scenario where data changes frequently

​
Form Binding

Form components can be bound directly to Type instances, creating a two-way connection between the form and the data: Form binding provides:
  • Automatic validation based on Type constraints
  • Two-way data binding between form fields and Type properties
  • Simplified form submission and error handling
  • Consistent user experience across forms

​
Data Binding Best Practices

Follow these best practices to optimize your data binding implementation:
  1. Fetch only what you need: Request specific fields rather than entire objects
  2. Use pagination for large datasets: Limit the amount of data loaded at once
  3. Implement caching: Reduce redundant requests for frequently accessed data
  4. Debounce user input: Prevent excessive requests during user interaction

​
State Management Overview

State management handles the data that controls UI behavior and user interactions. The C3 Agentic AI Platform provides tools for managing both component-level and application-wide state.

​
Component State

Individual components can manage their own internal state for UI-specific concerns: Component state is ideal for:
  • UI-specific state (like open/closed panels)
  • Form input values
  • Temporary data that doesn’t need to be shared
  • Component-specific settings

​
Application State

For data that needs to be shared across components, you can use application-wide state management: Application state is useful for:
  • Data that needs to be shared across components
  • User preferences and settings
  • Authentication state
  • Application-wide configuration

​
State Management Best Practices

Follow these best practices for effective state management:
  1. Keep state minimal: Only store what you need
  2. Use appropriate state location: Choose the right level for your state
  3. Normalize complex state: Avoid deeply nested state structures
  4. Derive data when possible: Calculate derived values on-demand rather than storing them

​
Practical Application: Asset Monitoring Dashboard

Let’s explore how data binding and state management work together in an asset monitoring dashboard: This example demonstrates:
  • Component state for UI-specific concerns (filters, selected tabs)
  • Application state for shared data (selected asset, time range)
  • Data binding to fetch asset data from the Type System
  • Real-time updates for sensor readings
  • Coordination between components through shared state

​
Key Implementation Patterns

  1. Master-Detail Pattern: Asset list (master) and asset details (detail)
  2. Dashboard Pattern: Multiple visualizations sharing common state
  3. Filter Pattern: User-controlled filters affecting multiple components

UI Architecture

Learn more about the architecture of the UI framework.

UI Component Library

Explore the pre-built components available in the platform.

UI Development Workflow

Discover the workflow for developing UI applications.