[Contexts](https://oods-foundry.com/contexts) / detail # detail An object as a full detail page. Generated from @oods/foundry 0.10.1 ## The same context across several objects Each is its object's generated screen in this context, in React and Vue, with the calls that made it. Open an object for its other contexts. [User detail screen generated by OODS Foundry in React](https://oods-foundry.com/objects/user/screens/detail-react) React app · sample records Maturity: stable `sha256:970963e87082…` [Open full size: User detail screen generated by OODS Foundry in React](https://oods-foundry.com/objects/user/screens/detail-react) Vue app · sample records Maturity: stable `sha256:974708009995…` [Open full size: User detail screen generated by OODS Foundry in Vue](https://oods-foundry.com/objects/user/screens/detail-vue) React app · sample records Maturity: beta `sha256:cf7934100633…` [Open full size: Invoice detail screen generated by OODS Foundry in React](https://oods-foundry.com/objects/invoice/screens/detail-react) Vue app · sample records Maturity: beta `sha256:f824c0c1f74b…` [Open full size: Invoice detail screen generated by OODS Foundry in Vue](https://oods-foundry.com/objects/invoice/screens/detail-vue) React app · sample records Maturity: beta `sha256:f4f2cc8d1be5…` [Open full size: Plan detail screen generated by OODS Foundry in React](https://oods-foundry.com/objects/plan/screens/detail-react) Vue app · sample records Maturity: beta `sha256:2d09ebfe461e…` [Open full size: Plan detail screen generated by OODS Foundry in Vue](https://oods-foundry.com/objects/plan/screens/detail-vue) React app · sample records Maturity: beta `sha256:dde1d1ded91c…` [Open full size: Subscription detail screen generated by OODS Foundry in React](https://oods-foundry.com/objects/subscription/screens/detail-react) Vue app · sample records Maturity: beta `sha256:5f818219f92b…` [Open full size: Subscription detail screen generated by OODS Foundry in Vue](https://oods-foundry.com/objects/subscription/screens/detail-vue) The calls that made the User detail apps, in React and Vue 3 calls, as the pipeline sent them ``` design_compose { "object": "User", "context": "detail", "preferences": { "brand": "Aquex", "theme": "light" } } code_generate { "schemaRef": "compose-8f0872d4", "framework": "react", "profile": "build", "options": { "output": "application", "brand": "Aquex", "theme": "light", "payloadMode": "file" } } code_generate { "schemaRef": "compose-8f0872d4", "framework": "vue", "profile": "build", "options": { "output": "application", "brand": "Aquex", "theme": "light", "payloadMode": "file" } } ``` The React app's content hash: `sha256:970963e8708275d29072ebffbca94cfb65da09b493e2a68fb47224ae0c125448`. Its `src/` folder: App.tsx, GeneratedUI.tsx, app.css, main.tsx, oods-brand-aquex.css The Vue app's content hash: `sha256:974708009995bab63e5deb3593ab7b7f88fdcf6f20884d0e49a5edc05ca30ca0`. Its `src/` folder: App.vue, GeneratedUI.vue, app.css, main.ts, oods-brand-aquex.css What `design_compose` reported: - `OODS-V121` Object 'Invoice' has maturity 'beta' — composed output may change. The calls that made the Invoice detail apps, in React and Vue 3 calls, as the pipeline sent them ``` design_compose { "object": "Invoice", "context": "detail", "preferences": { "brand": "Aquex", "theme": "light" } } code_generate { "schemaRef": "compose-98b33491", "framework": "react", "profile": "build", "options": { "output": "application", "brand": "Aquex", "theme": "light", "payloadMode": "file" } } code_generate { "schemaRef": "compose-98b33491", "framework": "vue", "profile": "build", "options": { "output": "application", "brand": "Aquex", "theme": "light", "payloadMode": "file" } } ``` The React app's content hash: `sha256:cf79341006331fe509c72fcfdd33524098062f0a029c6664c4c4875f824e6a81`. Its `src/` folder: App.tsx, GeneratedUI.tsx, app.css, charts/, main.tsx, oods-brand-aquex.css The Vue app's content hash: `sha256:f824c0c1f74b29f6dec3f284ecf9df32af8dbd04ede28fe38db2061ef135a5cf`. Its `src/` folder: App.vue, GeneratedUI.vue, app.css, charts/, main.ts, oods-brand-aquex.css What `design_compose` reported: - `OODS-V121` Object 'Plan' has maturity 'beta' — composed output may change. - `OODS-V122` Object "Plan" has a single trait category group for context "detail". Consider using a single-section layout instead of tabs. The calls that made the Plan detail apps, in React and Vue 3 calls, as the pipeline sent them ``` design_compose { "object": "Plan", "context": "detail", "preferences": { "brand": "Aquex", "theme": "light" } } code_generate { "schemaRef": "compose-c0aaeb96", "framework": "react", "profile": "build", "options": { "output": "application", "brand": "Aquex", "theme": "light", "payloadMode": "file" } } code_generate { "schemaRef": "compose-c0aaeb96", "framework": "vue", "profile": "build", "options": { "output": "application", "brand": "Aquex", "theme": "light", "payloadMode": "file" } } ``` The React app's content hash: `sha256:f4f2cc8d1be59cb335282752a07ca695c5182d16f760cd07c59d988f983701e6`. Its `src/` folder: App.tsx, GeneratedUI.tsx, app.css, main.tsx, oods-brand-aquex.css The Vue app's content hash: `sha256:2d09ebfe461e4d4532f5ed92901bcf13189ff24ac49197bee2fc946b38a29541`. Its `src/` folder: App.vue, GeneratedUI.vue, app.css, main.ts, oods-brand-aquex.css What `design_compose` reported: - `OODS-V121` Object 'Subscription' has maturity 'beta' — composed output may change. - `OODS-V117` Subscription refines 11 fields its traits define, and its own definitions are used: lifecycle/Stateful (status); lifecycle/Cancellable (cancel_at_period_end, cancellation_reason, cancellation_requested_at); financial/Billable (amount, currency, billing_interval, current_period_start, current_period_end, current_period_progress, next_payment_due_at). The calls that made the Subscription detail apps, in React and Vue 3 calls, as the pipeline sent them ``` design_compose { "object": "Subscription", "context": "detail", "preferences": { "brand": "Aquex", "theme": "light" } } code_generate { "schemaRef": "compose-1ab339c8", "framework": "react", "profile": "build", "options": { "output": "application", "brand": "Aquex", "theme": "light", "payloadMode": "file" } } code_generate { "schemaRef": "compose-1ab339c8", "framework": "vue", "profile": "build", "options": { "output": "application", "brand": "Aquex", "theme": "light", "payloadMode": "file" } } ``` The React app's content hash: `sha256:dde1d1ded91c3a9f489ea363826a798de88c849366ffc8cdc0c9ec38dbcabf21`. Its `src/` folder: App.tsx, GeneratedUI.tsx, app.css, charts/, main.tsx, oods-brand-aquex.css The Vue app's content hash: `sha256:5f818219f92bbe3a0267ea4a82d419b7b7ffc0e71f4940004d165adc3b77b33f`. Its `src/` folder: App.vue, GeneratedUI.vue, app.css, charts/, main.ts, oods-brand-aquex.css ## What traits place here - [Addressable](https://oods-foundry.com/traits/addressable) `AddressCollectionPanel` - [Archivable](https://oods-foundry.com/traits/archivable) `ArchiveSummary` - [Assessable](https://oods-foundry.com/traits/assessable) `StatusBadge` - [Auditable](https://oods-foundry.com/traits/auditable) `AuditSummaryCard` - [Authable](https://oods-foundry.com/traits/authable) `MembershipPanel` - [Billable](https://oods-foundry.com/traits/billable) `CycleProgressCard`, `PaymentTimeline` - [Cancellable](https://oods-foundry.com/traits/cancellable) `CancellationSummary` - [Classifiable](https://oods-foundry.com/traits/classifiable) `ClassificationPanel` - [Colorized](https://oods-foundry.com/traits/colorized) `StatusColorLegend` - [Communicable](https://oods-foundry.com/traits/communicable) `CommunicationDetailPanel` - [EncodingColor](https://oods-foundry.com/traits/encoding-color) `VizEncodingBadge` - [EncodingOpacity](https://oods-foundry.com/traits/encoding-opacity) `VizOpacitySummary` - [EncodingPositionX](https://oods-foundry.com/traits/encoding-position-x) `VizAxisSummary` - [EncodingPositionY](https://oods-foundry.com/traits/encoding-position-y) `VizAxisSummary` - [EncodingSize](https://oods-foundry.com/traits/encoding-size) `VizSizeSummary` - [Filterable](https://oods-foundry.com/traits/filterable) `FilterPanel` - [Geocodable](https://oods-foundry.com/traits/geocodable) `GeocodablePreview` - [Labelled](https://oods-foundry.com/traits/labelled) `DetailHeader` - [MarkArea](https://oods-foundry.com/traits/mark-area) `VizAreaPreview` - [MarkBar](https://oods-foundry.com/traits/mark-bar) `VizMarkPreview` - [MarkGraph](https://oods-foundry.com/traits/mark-graph) `VizGraphPreview` - [MarkLine](https://oods-foundry.com/traits/mark-line) `VizLinePreview` - [MarkPoint](https://oods-foundry.com/traits/mark-point) `VizPointPreview` - [MarkRect](https://oods-foundry.com/traits/mark-rect) `VizHeatmapPreview` - [Ownerable](https://oods-foundry.com/traits/ownerable) `OwnershipSummary` - [Preferenceable](https://oods-foundry.com/traits/preferenceable) `PreferencePanel` - [Priceable](https://oods-foundry.com/traits/priceable) `PriceSummary` - [Provenanced](https://oods-foundry.com/traits/provenanced) `Text` - [ScaleLinear](https://oods-foundry.com/traits/scale-linear) `VizScaleSummary` - [ScaleTemporal](https://oods-foundry.com/traits/scale-temporal) `VizScaleSummary` - [ScatterPlot](https://oods-foundry.com/traits/scatter-plot) `VizScatterPreview` - [Searchable](https://oods-foundry.com/traits/searchable) `SearchInput` - [Stateful](https://oods-foundry.com/traits/stateful) `StatusTimeline` - [Statusable](https://oods-foundry.com/traits/statusable) `StatusBadge`, `Banner` - [Supersedable](https://oods-foundry.com/traits/supersedable) `StatusBadge`, `Text` - [Taggable](https://oods-foundry.com/traits/taggable) `TagSummary` - [Timestampable](https://oods-foundry.com/traits/timestampable) `AuditTimeline` ## Objects that compose in it - [Article](https://oods-foundry.com/objects/article#screen-detail) - [Invoice](https://oods-foundry.com/objects/invoice#screen-detail) - [Media](https://oods-foundry.com/objects/media#screen-detail) - [Organization](https://oods-foundry.com/objects/organization#screen-detail) - [Plan](https://oods-foundry.com/objects/plan#screen-detail) - [Product](https://oods-foundry.com/objects/product#screen-detail) - [Relationship](https://oods-foundry.com/objects/relationship#screen-detail) - [Subscription](https://oods-foundry.com/objects/subscription#screen-detail) - [Transaction](https://oods-foundry.com/objects/transaction#screen-detail) - [Usage](https://oods-foundry.com/objects/usage#screen-detail) - [User](https://oods-foundry.com/objects/user#screen-detail)