DetailView

Overview

Renders a full detail page for a single model instance, including a page title, a sticky action bar with available object actions and workflow transitions, and a FormModel that displays or edits the object's fields. Fetches the object from the API automatically using the provided app, model, and pk props.

Theme entry: DetailView

Props

Name	Type	Required	Default	Description
themeOverride	Object		null	A partial ThemeObject keyed by component name, merged over this component's theme and provided to descendants.
app	string	yes		Django app label that owns the model.
model	string	yes		Django model name identifying which object type to fetch and display.
viewName	string	yes		View identifier used to load the model config and construct the form ID.
pk	string	yes		Primary key of the object instance to fetch and render.
objectForm	object		undefined	Form state object returned by useObjectForm, used to track submission state and trigger submit.
variant	string		"default"	Theme variant applied to the root element.
formModelVariant	string		undefined	Theme variant that the inner FormModel component receives as variant. Wins over a variant in the model config's formProps when passed.
class	string|array|object		() => []	CSS class(es) applied to the outermost root element.
fields	array		undefined	Field names to render in the form; overrides the model config default.
fieldDetails	object		undefined	Map of field paths to field detail overrides.
expand	array		undefined	Field names to render in expanded (inline) mode.
expandDetails	object		undefined	Map of expand field paths to detail overrides.
fieldComponents	object		undefined	Map of field paths to async functions returning an override field component.
widgetComponents	object		undefined	Map of field paths to async functions returning an override widget component.
formProps	object		undefined	Extra props for the inner FormModel component. They win over the model config's formProps and lose to this view's own form props. The app, model, and view keys are ignored, because the view sets them.
fieldProps	object		undefined	Map of field paths to additional props passed to the field component. Replaces a fieldProps map in the model config's formProps when passed.
widgetProps	object		undefined	Map of field paths to additional props passed to the widget component. Replaces a widgetProps map in the model config's formProps when passed.
relatedObjectRules	object		{}	Rules mapping related object keys to fetch data alongside the main object.
calculatedObjectRules	object		{}	Rules mapping calculated object keys to derive computed data alongside the main object.
fetchFields	array		undefined	Field names to request from the API when fetching the object; overrides the model config default.
submitFields	array		undefined	Field names to include when submitting the form; overrides the model config default.
primaryActions	array		undefined	Action names promoted to the filled hero CTA in the action bar; defaults to the update action.

Slots

Name	Scoped	Description
targetless-action-button	yes
extra-buttons		Additional action buttons appended in the page title action area.
submit-button	yes	Override the submit button shown in the sticky action bar for update views.
action-button	yes	Override an individual action link button in the sticky bar.
transition-button	yes	Override an individual workflow transition button in the sticky bar.
record-name	yes	Override the heading that names the record above the form; receives recordName (the fetched object's formatted name, empty when there is none) and pending (true while the name is loading).

Full slot reference

Events

Name	Description
object
loading
related-object
calculated-object
form-object
form-context

Full event reference

Source

client/lib/views/DetailView.vue