Framework component + Framework data (manual mount)

Framework component + Framework data (manual mount) - documentazione operativa e tecnica

pattern-sviluppostable

Overview

Pattern: Framework component + Framework data (manual mount)

You use the framework widgets (<wuic-list-grid>, <wuic-chart-list>, <wuic-map-list>, <wuic-spreadsheet-list>, <wuic-kanban-list>, <wuic-tree-list>, <wuic-scheduler-list>, <wuic-carousel-list>, <wuic-data-repeater>, <wuic-parametric-dialog>, ...) mounted by hand on a metadata-driven <wuic-data-source> with hardcodedRoute="...". Compared to Pattern 1 "Full autogeneration" — which scaffolds the whole page from metadata — here you compose the Angular template, choosing which widgets to use, how to lay them out, and which events to react to, while still drawing data and column configuration from WUIC metadata.

When to Use It

  • You need a single specific view on an existing entity (only grid, only chart, only map, etc.) without mounting the full autogen page.
  • You need a mixed layout with multiple WUIC widgets on the same page (e.g. grid + chart synced on the same datasource).
  • You want to intercept UI events of the list-grid (onPaging, onSorting, onBeforeRowRender, onPTableRowExpand, ...) or of the datasource (datasourceReady$, fetchInfo$, afterFirstLoad$, beforeSync$, afterSync$) for custom host-side logic.
  • You want to try an alternative archetype without modifying the route metadata (e.g. show cities as a carousel on a promo page, keeping the standard list-grid in the main menu).

Architecture

Three actors, the composition is yours:

  • Framework: exposes the Angular widgets (wuic-framework-lib) + the DataSourceComponent that resolves schema and data from _metadati__tabelle / _metadati__colonne.
  • Developer: writes an Angular component that instantiates the datasource with hardcodedRoute and mounts the WUIC widgets in its template.
  • End user: navigates the custom page but sees standard framework widgets and interactions (paging, filter-bar, export, state management, etc.).
Snippet 1text
<wuic-data-source #ds [hardcodedRoute]="'cities'"></wuic-data-source>
<wuic-list-grid [datasource]="ds.fetchInfo$" (onPaging)="log($event)"></wuic-list-grid>

What You Do

1. Create a standalone Angular component (@Component({ standalone: true, imports: [DataSourceComponent, ListGridComponent, ...] })).

2. Set in the template <wuic-data-source #ds [hardcodedRoute]="..."> with the metadata route name.

3. Mount one or more WUIC widgets bound to the datasource ([datasource]="ds.fetchInfo$" or [hardcodedDatasource]="ds" depending on the widget).

4. Optionally subscribe to widget @Outputs / datasource Subjects for your custom logic.

5. Add the route to app.routes.ts (loadComponent) and the component is immediately operational.

The route metadata (md_props_bag.archetypes.*) continues to drive most of the widget behavior (status-columns for kanban, fromField/toField for scheduler, etc.) — you only add the Angular composition and event handling.

Trade-offs

ProsCons
Full control over the page layout (you can place multiple widgets side by side, use Material/PrimeNG alongside, etc.)You have to write the component yourself (not autogen)
Explicit access to all widget @Outputs and datasource SubjectsIf the route metadata shape changes (columns, FKs, etc.) you must verify your layout still holds
100% reuse of data layer + permissions + filters + i18n of the frameworkYou duplicate widget mounting boilerplate (mitigable with component-loader / data-repeater)
You can use archetypes different from the route's standard without touching metadataCustom URL (must be added to routing / menu manually)

Difference vs Other Patterns

  • [Pattern 1 — Full autogeneration](./pattern-full-autogeneration.md): same data source and same widgets, but the page is generated by the framework (<wuic-crafter-route>). Zero code. Here YOU write the Angular component.
  • [Pattern 2 — Framework data + Custom component](./pattern-framework-data-custom-comp.md): framework data source but 100% custom UI (no WUIC widgets, only Angular/PrimeNG). Here instead you USE the WUIC widgets.
  • [Pattern 3 — Framework component + Custom data](./pattern-framework-comp-custom-data.md): same manual widget composition, but the data source does NOT start from WUIC metadata — it uses a custom REST/OData endpoint. Here instead the route is registered as metadata.
  • [Pattern 4 — Full custom](./pattern-full-custom.md): pure Angular without WUIC widgets or data source. Here you use both.

Live Examples in WuicTest

The 11 examples below individually explore each WUIC widget with hardcodedRoute="cities" (and variants like schedules, kanban-task, uploadsample). Source folder: wwwroot/src/app/component/examples/pattern-5/.

  • Cities list-grid → mounts <wuic-list-grid> and subscribes to all UI events (paging, sorting, filtering, row-expand, column-resize). Open demo.
  • Cities chart → mounts <wuic-chart-list> with subject-driven datasource and the afterSync/beforeSync Subjects. Open demo.
  • Cities map → mounts <wuic-map-list> (map archetype) with lat/long of the cities. Open demo.
  • Cities spreadsheet → mounts <wuic-spreadsheet-list> for Excel-like bulk edit. Open demo.
  • Cities edit → mounts <wuic-parametric-dialog> + <wuic-pager> for the record detail view only. Open demo.
  • Cities wizard → mounts <wuic-parametric-dialog [isWizard]=true> for multi-step wizard with dataTabs. Open demo.
  • Cities data-repeater events → mounts <wuic-data-repeater> with runtime archetype switcher (list/chart/spreadsheet/map). Open demo.
  • Kanban task → mounts <wuic-kanban-list> on route kanban-task with status columns + card drag & drop. Open demo.
  • Tree sample → mounts <wuic-tree-list> on hierarchical route (parentField). Open demo.
  • Schedules scheduler → mounts <wuic-scheduler-list> (from/to calendar view). Open demo.
  • Uploadsample carousel → mounts <wuic-carousel-list> with image field binding. Open demo.

See Also