SoftwareDriven.SurveyJs.Creator.Blazor 2.0.0

SoftwareDriven.SurveyJs.Creator.Blazor

A Blazor WebAssembly wrapper for the SurveyJS Survey Creator — an embeddable drag-and-drop form builder. Design a survey in the browser and get its JSON definition back. The SurveyJS JavaScript is shipped inside the package as a single minified bundle, loaded on demand; no script tag or npm install is required in your app.

Targets .NET 10 (net10.0) and wraps SurveyJS Survey Creator 3.0.

Commercial license: The SurveyJS Survey Creator is not free for commercial use. Without a license key, the creator shows an alert banner. Pass your key via the LicenseKey parameter.

Installation

dotnet add package SoftwareDriven.SurveyJs.Creator.Blazor

Add the namespace (e.g. in _Imports.razor):

@using SoftwareDriven.SurveyJs.Creator.Blazor

Usage

<SurveyCreatorHost @ref="creator"
                   Json="initialJson"
                   OnModified="OnModified"
                   LicenseKey="YOUR-SURVEYJS-LICENSE-KEY" />

<button @onclick="Save">Save</button>

@code {
    private SurveyCreatorHost? creator;
    private string? currentJson;

    private readonly object initialJson = new
    {
        elements = new object[]
        {
            new { type = "text", name = "firstName", title = "Your name" }
        }
    };

    // Fires on every edit with the current survey JSON.
    private void OnModified(string json) => currentJson = json;

    // Or pull the JSON on demand (e.g. on a Save click).
    private async Task Save()
    {
        var json = await creator!.GetJsonAsync();
        // persist json...
    }
}

Save workflow

Set OnSave to enable the Save button (and, with AutoSave, auto-saving). It receives the survey JSON and returns whether the save succeeded — wire it to your own storage; there is no built-in backend.

<SurveyCreatorHost OnSave="SaveAsync" AutoSave="true" LicenseKey="…" />

@code {
    private async Task<bool> SaveAsync(string surveyJson)
    {
        await Http.PutAsJsonAsync("api/surveys/1", surveyJson);
        return true;
    }
}

Set OnUploadFile to store images/logos the user adds in the designer. Files arrive as data URLs; return the URL to reference, or null on failure.

UI presets

SurveyJS 3.0 introduced UI presets: a JSON configuration that tailors the creator — which toolbox items and tabs are available, how the property grid is grouped, which languages can be edited. Pass the name of one of the presets that ship with Survey Creator:

<SurveyCreatorHost Json="initialJson" Preset="@("Basic")" />

"Basic", "Advanced" and "Expert" are available; they are fetched lazily, so they cost nothing unless used. To use your own configuration — for example the JSON exported from the UI Preset Editor — pass it as a POCO, a JsonElement, or a JSON string:

<SurveyCreatorHost Json="initialJson" Preset="preset" />

@code {
    private readonly object preset = new
    {
        toolbox = new
        {
            definition = new object[]
            {
                new { name = "text" },
                new { name = "radiogroup" },
                new { name = "slider" },
            }
        },
        tabs = new { items = new object[] { new { name = "designer" }, new { name = "preview" } } },
    };
}

Assigning a new Preset instance rebuilds the creator, since a preset shapes the UI the creator builds on construction. ApplyPresetAsync applies one to the running instance instead.

Component reference

SurveyCreatorHost

Parameters

Notification events

Server-side / veto callbacks (wire to your own storage; veto is synchronous, requires WebAssembly)

Methods

Context types

• CreatorElementAdded(ElementType, Name, Reason)
• CreatorSelectedElement(Name, ElementType)
• CreatorPropertyChange(ElementName, PropertyName, ValueJson)
• CreatorElementDeleting(ElementType, Name)
• CreatorNotification(Message, Type)
• CreatorFileUpload(ElementType, PropertyName, Files) with CreatorIncomingFile(Name, Type, ContentBase64)
• CreatorFileClear(ElementType, PropertyName)

License

Wrapper code: see repository. Bundled survey-creator: commercial SurveyJS license required — https://surveyjs.io/licensing.