DineshKumar.UIRenderer.Blazor 1.0.0

DineshKumar.UIRenderer.Blazor

Blazor adapter for the schema-driven Universal UI Renderer.
Pass ONE JSON schema — get a complete, production-ready Blazor component.

Install

dotnet add package DineshKumar.UIRenderer.Blazor

Setup

Add to _Imports.razor:

@using DineshKumar.UIRenderer.Blazor.Components
@using DineshKumar.UIRenderer.Blazor.Schema
@using DineshKumar.UIRenderer.Blazor.State

Add to wwwroot/index.html (Blazor WASM) or _Host.cshtml (Blazor Server):

<link rel="stylesheet" href="_content/DineshKumar.UIRenderer.Blazor/uir.css" />

Usage

From a typed C# object

<UIRenderer Schema="@_schema" OnSubmit="HandleSubmit" />

@code {
    private readonly FormSchema _schema = new()
    {
        Id      = "contact",
        Version = "1.0.0",
        Title   = "Contact Us",
        Columns = 2,
        Fields  =
        [
            new() { Id = "name",    Type = "text",  Label = "Name",  Required = true },
            new() { Id = "email",   Type = "email", Label = "Email", Required = true,
                    Validation = [new() { Type = "email" }] },
            new() { Id = "message", Type = "textarea", Label = "Message", ColSpan = 2 },
        ],
    };

    private async Task HandleSubmit(FormStateSnapshot snapshot)
    {
        // snapshot.Values  → Dictionary<string, object?>
        // snapshot.Valid   → bool
        // snapshot.Touched → HashSet<string>
        await MyApi.PostAsync("/contact", snapshot.Values);
    }
}

From a JSON string

<UIRenderer SchemaJson="@_json" OnSubmit="HandleSubmit" />

@code {
    private string _json = """
        {
          "id": "contact", "version": "1.0.0", "type": "form",
          "title": "Contact Us",
          "fields": [
            { "id": "name",  "type": "text",  "label": "Name",  "required": true },
            { "id": "email", "type": "email", "label": "Email", "required": true }
          ]
        }
        """;
}

Parameters

Schema types

@* Form *@
<UIRenderer Schema="@formSchema" OnSubmit="HandleSubmit" />

@* Table *@
<UIRenderer Schema="@tableSchema" Data="@rows" OnSelectionChange="HandleSelection" />

@* Dashboard *@
<UIRenderer Schema="@dashSchema" />

@* Wizard *@
<UIRenderer Schema="@wizardSchema" OnSubmit="HandleSubmit" />

@* Detail (read-only) *@
<UIRenderer Schema="@detailSchema" InitialValues="@record" OnDetailAction="HandleAction" />

@* List *@
<UIRenderer Schema="@listSchema" Data="@items" OnItemClick="HandleClick" />

Plugin registration

// Program.cs or startup
UIRenderer.Register<SignaturePadComponent>("signature-pad");
UIRenderer.Register<RichTextEditorComponent>("rich-text-editor");

// Or on the default singleton registry directly:
UIPluginRegistry.Default.Register("signature-pad", typeof(SignaturePadComponent));

Custom plugin components must accept these parameters:

@* MyPluginComponent.razor *@
@code {
    [Parameter] public FieldSchema  Field     { get; set; } = default!;
    [Parameter] public object?      Value     { get; set; }
    [Parameter] public EventCallback<object?> OnChange { get; set; }
    [Parameter] public EventCallback OnBlur   { get; set; }
    [Parameter] public bool         HasError  { get; set; }
}

Services

Use services directly for server-side logic:

using DineshKumar.UIRenderer.Blazor.State;

// Validate fields
var errors = ValidationService.ValidateField(field, value);
var result = ValidationService.ValidateForm(fields, values, visibleIds);

// Evaluate conditions
bool visible = ConditionalService.IsFieldVisible(field, values);
var visibleIds = ConditionalService.GetVisibleFieldIds(fields, values);

// Observable form state (inject as scoped service)
var state = new FormStateService();
state.Init(fields, initialValues);
state.Changed += StateHasChanged;
state.SetValue("email", "user@example.com");
var snapshot = state.Snapshot();

Links

• Full documentation
• Schema specification
• React adapter
• Angular adapter
• GitHub

License

MIT © Dinesh Kumar Sridharan