●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Dashboard composition UI with three-column layout: left component palette, central canvas, right dataset panel.
- Widget picker and selection state for adding widgets (example: KPI card).
- Widget settings form inputs: Title, Label, HideTitle checkbox, RefreshInterval (number), Appearance select.
- Dataset selector, column search/filter and a scrollable columns list.
- Simple widget rendering using a KpiCard component and a widgets collection.
## Key components
- Blazor input components: InputText, InputNumber, InputSelect, InputCheckbox with @bind-Value.
- Razor constructs: foreach loops, conditional rendering (if widgets.Count == 0), Parameter-bound KpiCard.
- Custom component: KpiCard.razor (Title, Label, Value parameters).
- Models: ComponentModel, WidgetModel, WidgetSettingsModel.
## How it works
- UI state is held in private fields and lists (components, widgets, widgetSettings, columns).
- Selection and settings use @bind-Value to update models directly; SelectComponent, SaveDraft, Cancel, Publish are event handlers wired to buttons.
- Widgets render by iterating widgets and conditionally mapping widget.Type to a component (example: card -> KpiCard).
- Column search uses a computed filteredColumns property that filters the columns list with StringComparison.OrdinalIgnoreCase.
## Styling
- Uses Bootstrap classes (navbar, container-fluid, btn, form-control, form-select, badge) for layout and controls.
- Component-scoped CSS (DashboardBuilder.razor.css and KpiCard.razor.css) provides grid layout, responsive media queries, and a styled KPI card with gradient and shadow.
- Responsive behavior handled via CSS media queries: left/right panels collapse to full-width under 992px.
- Font Awesome icons are used in markup (project should include the FA CSS for icons to appear).
## Reuse steps
1. Add the Razor files (DashboardBuilder.razor, KpiCard.razor) and models to the project; include their .razor.css files for scoped styles.
2. Ensure Bootstrap CSS is available (add via _Host.cshtml / index.html) and include Font Awesome for icons.
3. Import namespaces where needed and register any dataset services or state containers in Program.cs to provide datasets and persistence.
4. Replace the sample lists with backend services or APIs; wire SaveDraft/Publish to save layout and widgets to server storage.
5. Optionally add drag-and-drop library (e.g., SortableJS) or Blazor DnD helpers to enable moving/resizing widgets.
## Limitations & next steps
- No EditForm or DataAnnotations validation is implemented for widgetSettings (validation must be added where required).
- Persistence, authentication, authorization and server-side datasets are not wired; SaveDraft/Publish are placeholders.
- Drag-and-drop placement, grid snapping and widget resizing are not implemented; add a DnD/grid library to enable layout editing.
- Consider extracting a widget registry, serializing layout models, and adding unit tests for state manipulation.
This component is a single-page scaffold generated by Instruct UI and intended as an editable starting point for integration into a .NET Blazor application.