Try it free

Elements overview

  • Latest Dynatrace
  • Explanation
  • 4-min read
  • Published Jul 13, 2026

A document's content is built from a tree of elements — layouts that arrange children, and cards/components that render data. This page gives a short tour of what's available. Full property-by-property references for individual card types are in the Element reference.

Every element shares a base shape

All generated element types extend CoreElement<T>, the document-safe subset of a component's UI schema (runtime-only fields like React nodes or callbacks are stripped out):

PropertyTypeDescription

type

T

Element type discriminant (for example, 'dql-table', 'message').

id

string

Unique identifier for the element within the document.

cardTitle

string (optional)

Override for the card's title.

cardDescription

string (optional)

Override for the card's description.

conditions

Condition[] (optional)

Visibility conditions — see Conditional rendering.

Layouts

Layouts arrange other elements. They're the glue that turns a flat list of cards into a page.

LayouttypeDescription

Vertical layout

'vertical-layout'

Stacks child elements top to bottom.

Horizontal layout

'horizontal-layout'

Arranges child elements side by side; supports a minWidth constraint.

Tabs layout

'tabs'

A set of Tabs, each with its own content array. Tabs support conditional visibility.

Which elements are allowed inside which container is controlled by a set of layout-element unions (LayoutElement, TabsLayoutElement, InjectableDetailsLayoutElement, ExpandableContentLayoutElement) — not every element is valid everywhere. For example, a Tab can only appear where InjectableDetailsLayoutElement is expected (an Entity Details injection), not as a general layout child.

TabsLayout

PropertyTypeDescription

type

'tabs'

Discriminant.

items

Tab[]

Ordered list of tabs.

Tab

Supports the Conditional mixin (see Conditional rendering).

PropertyTypeDescription

type

'tab'

Discriminant.

id

string

Unique tab identifier. Used as tabId in injection targets — see Targeting.

title

string

Tab label shown in the tab bar.

longTitle

string (optional)

Extended label shown in overflow menus or tooltips when the tab bar is too narrow to display the full title.

content

TabsLayoutElement[]

Cards and layouts rendered inside the tab. Nested tabs are not supported here.

conditions

Condition[] (optional)

Tab is hidden when conditions aren't satisfied. See Conditional rendering.

Compositions

Compositions are the top-level content shape for "Definition" documents — they own an entire page, not just one card.

CompositionUsed byDescription

DetailsComposition

EntityDetailsDefinitionDocument

A full Entity Details page: optional header, health alert group definitions, and a TabsLayout of content. See Entity Details composition.

InvExType

InvExDefinitionDocument

An Inventory Explorer type/subtype: display name, icon, a VerticalLayout of content, and optional filtering configuration. See Inventory Explorer type.

Built-in cards

These are the data-rendering elements that typically appear as leaves in a layout. Each links to a full property-by-property reference:

  • DQL Table (dql-table) — tabular data driven by a DQL query, with columns, filters, grouping, perspectives, and row/cell/column actions.
  • Chart Group (chart-group) — one or more charts (timeseries, single value, categorical, donut, meter bar, etc.) driven by DQL/metrics.
  • Filtering (filtering) — a filter bar of text, numeric, or predefined-value filters.
  • Metadata (metadata) — grouped key/value property display.
  • Message (message) — a card built from markdown-like content blocks, buttons, and slots.
  • Logs, Events, Alerts table, Ownership — domain-specific built-in cards with a fixed, minimal shape.
  • Custom card (custom) — a placeholder that resolves to app-provided content at runtime. (limited access)

Health indicator configuration (alertGroups) is shared across DetailsComposition, DqlTable, and ChartGroup — see Health indicators.

Built-in references

Instead of duplicating configuration, several document fields accept a reference to a pre-configured runtime object by name, alongside a fully custom inline definition:

ReferenceAppears inExample

BuiltInAction

any action array

{ "builtInAction": "COLUMN_VISIBILITY" }

BuiltInColumn

DQL table columns

{ "builtInColumn": "HEALTH_ALERTS_COLUMN" }

BuiltInFilter

filtering filters

{ "builtInFilter": "ALERT_STATUS_FILTER" }

AlertLookup

DQL table query lookups

{ "builtInLookup": "ALERTS_LOOKUP", "lookupField": "custom_entity_ids" }

Action arrays (toolbar, row, cell, column, chart, header actions) accept a mix of these built-in references and fully custom IntentAction objects, which invoke another Dynatrace App via an intent:

{ "displayName": "Open in App", "appId": "my-app", "intentId": "view" }

IntentAction

PropertyTypeDescription

displayName

string

Label shown on the action button.

appId

string (optional)

Target Dynatrace App ID to open.

intentId

string (optional)

Intent ID to invoke on the target app.

intentPayload

Record<string, string> (optional)

Key-value pairs sent as the intent payload.

conditions

Condition[] (optional)

Visibility conditions — see Conditional rendering.

See also

  • Element reference — full per-element property tables
  • Document types
  • Targeting
  • Conditional rendering
Related tags
ExtensionsExtensionsInfrastructure Observability