ContentResolver

ContentResolver dynamically resolves content at runtime based on data. Use it when the content to display is unknown at build time, depends on data values, or needs to be lazy loaded.

<div className="flex items-center gap-4">
  <LookupField value={m.fieldType} options={fieldTypes} label="Field Type" />
  <ContentResolver
    params={m.fieldType}
    onResolve={(type) => {
      switch (type) {
        case "textfield":
          return <TextField value={m.text} />
        case "datefield":
          return <DateField value={m.date} />
        case "checkbox":
          return <Checkbox value={m.checked}>Checked</Checkbox>
        case "switch":
          return <Switch value={m.checked} />
        default:
          return null
      }
    }}
  />
</div>

interface Model {
  fieldType: string;
  text: string;
  date: string;
  checked: boolean;
}

const m = createModel<Model>();

const fieldTypes = [
  { id: "textfield", text: "TextField" },
  { id: "datefield", text: "DateField" },
  { id: "checkbox", text: "Checkbox" },
  { id: "switch", text: "Switch" },
];

import { createModel } from "cx/data";
import {
  Checkbox,
  ContentResolver,
  DateField,
  LookupField,
  Switch,
  TextField,
} from "cx/widgets";

How It Works

1. The params prop binds to a value in the store
2. When params changes, onResolve is called with the new value
3. onResolve returns the widget configuration to render
4. For async loading, onResolve can return a Promise
5. Children are displayed as default content while loading

Structured Params

The params prop can be a structured object with multiple bindings:

<ContentResolver
  params={{
    type: m.fieldType,
    required: m.isRequired,
  }}
  onResolve={({ type, required }) => {
    // resolve based on multiple parameters
  }}
/>

When any of the bound values change, onResolve is called with the updated object.

Configuration