useDocyrusAdaptiveCardItemDetail

Installation

pnpm dlx @docyrus/cli add @docyrus/hooks-use-docyrus-adaptive-card-item-detail

pnpm add react

Overview

useDocyrusAdaptiveCardItemDetail is the bridge between Docyrus field types (field-select, field-money, field-image, …) and the Adaptive Cards element vocabulary (TextBlock, FactSet, Image, Badge, CodeBlock, …).

You hand it a field list + one record and it generates an Adaptive Card JSON payload (card) — the primary output. The card is then drawn by the shared AdaptiveCard renderer; the hook also returns a ready-to-render view and the full useAdaptiveCard runtime (state / controls / cardProps) so you can wire actions.

It is backend-agnostic — no network I/O. Pass any Docyrus-shaped field list (IField[], DataSourceField[], or the loose DocyrusAdaptiveCardField[]) and a plain record object. When a DocyrusTenantProvider is mounted, date / number / currency values are formatted with the tenant's preferences automatically.

Usage

Generate + render a detail card

'use client';

import { useDocyrusAdaptiveCardItemDetail } from '@docyrus/ui/hooks/use-docyrus-adaptive-card-item-detail';

export function DealDetail({ fields, record }) {
  const { view } = useDocyrusAdaptiveCardItemDetail({ fields, record });

  return view;
}

Use the generated JSON directly

The card field is a plain Adaptive Card payload — persist it, post it to Teams, or render it yourself with <AdaptiveCard payload={card} />.

import { AdaptiveCard } from '@docyrus/ui/components/adaptive-card';
import { useDocyrusAdaptiveCardItemDetail } from '@docyrus/ui/hooks/use-docyrus-adaptive-card-item-detail';

const { card } = useDocyrusAdaptiveCardItemDetail({ fields, record });

// `card` === { type: 'AdaptiveCard', version: '1.5', body: [...] }
await fetch('/api/teams/notify', { method: 'POST', body: JSON.stringify(card) });

return <AdaptiveCard payload={card} />;

Pin slots, add actions, react to clicks

const { view } = useDocyrusAdaptiveCardItemDetail({
  fields,
  record,
  slots: {
    titleField: 'name',
    badgeField: 'status',
    coverImageField: 'cover',
    subtitleField: 'description'
  },
  actions: [
    { type: 'Action.OpenUrl', title: 'Open record', url: `/records/${record.id}` }
  ],
  onAction: (event) => {
    if (event.type === 'openUrl') router.push(event.url);
  }
});

Field-type → Adaptive Card element mapping

The card body is assembled from three regions: a header (cover / avatar / title / subtitle / status badge), a FactSet of scalar fields, and standalone blocks for rich fields. Slots are auto-detected from field type + slug (see Slot detection); everything else lands in the body.

Enum / status colors (Tailwind families or hex) are classified to the nearest Adaptive Card badge style: green → good, red → attention, amber → warning, blue/purple → accent, otherwise informative.

Slot detection

When you don't pin slots, bindings are auto-detected from the field list using the same heuristics as the data gallery (slug hints first, then type). Override any slot with a slug, or null to disable a detected binding:

API Reference

UseDocyrusAdaptiveCardItemDetailOptions

UseDocyrusAdaptiveCardItemDetailReturn

Extends UseAdaptiveCardReturn (state, controls, cardProps, hostConfig) with:

Type Exports

See also

• useDocyrusAdaptiveCardItemList — the same mapping, for a list of records.
• AdaptiveCard — the renderer.
• useAdaptiveCard — the underlying runtime.