Confirm?

Are you sure you want to proceed?
M
Mikael Hultkvist

Segment Filter Builder Design

Clone & Customize via AI

MudBlazor Segment Builder provides a UI for composing contact segments with removable and duplicable filter rows. Uses MudSelect filters and MudTextField inputs with @bind data binding.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Segment/filter builder page with a top-level audience selector. - Repeatable filter rows rendered by a SegmentFilterRow component. - Row-level actions: duplicate and remove via MudIconButton. - Logical operator toggles (And/Or) between filter rows. - Add-new-row control and initial sample filters on initialization. ## Key components - MudPaper, MudStack, MudText, MudButton, MudIconButton - MudSelect (Field, Operator), MudTextField (Value) - Custom component: SegmentFilterRow.razor - Model: SegmentFilterModel (Field, Operator, Value) - EventCallback usage for OnRemove and OnDuplicate ## How it works - Each filter is a SegmentFilterModel instance held in the page's Filters list. - SegmentFilterRow binds to a model via @bind-Value on MudSelect and @bind-Value on MudTextField and forwards actions using EventCallback<SegmentFilterModel>. - Row duplication inserts a shallow copy next to the original and updates the LogicalOperators list to keep gap operators aligned. - Removing a row removes the model and adjusts the LogicalOperators list (removes the corresponding gap operator based on index). - LogicalOperators is a List<string> where each entry represents the operator between Filters[i] and Filters[i+1]; SetLogicalOperator updates that list. ## Styling - UI uses MudBlazor components and spacing utilities (classes like pa-4, mr-2, ml-1) and MudBlazor theme tokens (Color, Variant, Size, Typo). - Layout relies on MudStack for responsive row/column behavior and flex-grow for fluid width; rows wrap via flex-wrap to accommodate smaller widths. ## Reuse steps 1. Add the MudBlazor NuGet package and register services in Program.cs: builder.Services.AddMudServices(); 2. Import MudBlazor namespace in _Imports.razor and the page: @using MudBlazor. 3. Add SegmentFilterModel, SegmentFilterRow.razor and the page file to the Blazor project. 4. Ensure the app includes MudBlazor CSS/theme (per MudBlazor setup) so components render correctly. 5. Replace sample initialization with application data and wire save/preview actions to backend services. ## Limitations & next steps - This example is a single UI page generated by Instruct UI; it does not include backend services, persistence, or authorization wiring. - No EditForm/DataAnnotationsValidator is used here; client-side validation is not implemented and should be added if field validation is required. - Consider adding a model binding layer, server-side filtering, debounced search for large data sets, and unit tests for duplication/removal logic. - Add integration with application state (Flux/Scoped services) and confirmation dialogs for destructive actions where needed.