Orbyss.Blazor.Syncfusion.JsonForms 1.0.1

📦 Orbyss.Blazor.Syncfusion.JsonForms

A full-featured Syncfusion-based UI renderer for Orbyss.Blazor.JsonForms.
This package brings the power of Syncfusion Blazor components to schema-driven forms using JSON Schema, UI Schema, and Translation Schema.

🎯 What is this?

This package implements the IFormComponentInstanceProvider interface for Syncfusion — plugging into the Orbyss.Blazor.JsonForms core form engine.

✅ You don’t need to write your own component provider
✅ Just install this NuGet package and use <JsonForm ... /> as normal ✅ Make sure to either inject SyncfusionComponentInstanceProvider in your DI container, or pass a fresh instance as parameter to <JsonForm ComponentInstanceProvider=@provider ... >

🧱 Components Rendered with Syncfusion

All form controls are implemented using Syncfusion Blazor components:

• ✅ SfTextBox, SfDropDownList, SfSwitch, SfDatePicker, etc.
• ✅ Supports layout controls like Grid, Columns, Lists, Buttons, and Stepper Navigation
• ✅ Fully compatible with cascading properties: Language, Disabled, ReadOnly
• ✅ Custom UI behavior via options in your UI schema

🚀 Quickstart

dotnet add package Orbyss.Blazor.Syncfusion.JsonForms

Then in Program.cs:

builder.AddSyncfusionJsonForms()

Then finally you can define the JsonForm Blazor component as follows:

<JsonForm InitOptions=@options ComponentInstanceProvider=... />

@code {
    JsonFormContextInitOptions options = new(
        jsonSchema,
        uiSchema,
        translationSchema
    );
}

⚙️ Customization

One way to override default behavior is by subclassing or replacing specific Syncfusion components. Example:

public class CustomProvider : SyncfusionFormComponentInstanceProvider
{
    public override InputFormComponentInstanceBase GetInputField(IJsonFormContext context, FormControlContext control)
    {
        if (control.JsonPath == "#/properties/mySpecialField")
            return new MyCustomInputInstance();

        return base.GetInputField(context, control);
    }
}

Another way is to configure specific delegates in the SyncfusionFormComponentInstanceProviderOptions. Example:

var instanceProviderOptions = new SyncfusionFormComponentInstanceProviderOptions
{
    ConfigureButton = (defaultButton, type, form) =>
    {
        defaultButton.CanToggle = true;
        return defaultButton;
    },
    ConfigureBooleanInput = (defaultInstance, controlContext) =>
    {
        var customOption = $"{controlContext.Interpretation.GetOption("custom-boolean")}";
        if (customOption == "switch")
        {
            return new MyCustomSwitchInputInstance();
        }

        return defaultInstance;
    }
};

Or of course, you can provide and completely override your own components entirely, injecting the parameters and controlling the behavior as you wish (see the full example in Orbyss.Blazor.JsonForms README).

🔄 Under the hood: Powered by 3 schemas

Like all Orbyss JSON Forms integrations, this renderer works using:

All schema interactions are fully supported.

🧩 Other UI Options

Prefer a different component library? Try:

• 🎨 Orbyss.Blazor.MudBlazor.JsonForms
• Or implement your own renderer via IFormComponentInstanceProvider

📄 License

MIT License
© Orbyss.io

🔗 Links

• 🌍 Website: https://orbyss.io
• 📦 Core Engine: Orbyss.Blazor.JsonForms
• 📦 This Package: Orbyss.Blazor.Syncfusion.JsonForms
• 🧑‍💻 GitHub: https://github.com/orbyss-io
• 📚 Syncfusion Docs: Syncfusion Blazor UI
• 📝 License: MIT

🤝 Contributing

This project is open source and contributions are welcome!

Whether it's bug fixes, improvements, documentation, or ideas — we encourage developers to get involved.
Just fork the repo, create a branch, and open a pull request.

We follow standard .NET open-source conventions:

• Write clean, readable code
• Keep PRs focused and descriptive
• Open issues for larger features or discussions

No formal contribution guidelines — just be constructive and respectful.

⭐️ Found this useful? Give us a star and help spread the word!