useDocyrusAdaptiveCardItemDetail

Installation

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

pnpm add react

Installing the hook also installs AdaptiveCard and the pure mapper helpers (_internal/docyrus-adaptive-card*.ts). The signature is identical to web @docyrus/ui, so the same field list and record produce the same card JSON on both platforms.

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

import { ScrollView } from 'react-native';

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

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

  return <ScrollView contentContainerClassName="p-4">{view}</ScrollView>;
}

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 '@/components/docyrus-native/adaptive-card';
import { useDocyrusAdaptiveCardItemDetail } from '@/hooks/docyrus-native/use-docyrus-adaptive-card-item-detail';

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

// `card` === { type: 'AdaptiveCard', version: '1.5', body: [...] }
await client.post('/teams/notify', 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: `myapp://records/${record.id}` }
  ],
  onAction: (event) => {
    // Action.OpenUrl also opens the URL via Linking; route in-app links yourself.
    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 web data gallery (slug hints first, then type; system audit columns such as id, created_by and record_owner are never picked). 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.