|
1 | | -# Orbyss.Components.JsonForms.Syncfusion |
2 | | -.NET class razor Library implementing Orbyss.Components.JsonForms for the Syncfusion Blazor UI Framework |
| 1 | +# 📦 Orbyss.Blazor.Syncfusion.JsonForms |
| 2 | + |
| 3 | +**A full-featured Syncfusion-based UI renderer for [Orbyss.Blazor.JsonForms](https://github.com/orbyss-io/Orbyss.Blazor.JsonForms).** |
| 4 | +This package brings the power of Syncfusion Blazor components to schema-driven forms using JSON Schema, UI Schema, and Translation Schema. |
| 5 | + |
| 6 | +--- |
| 7 | + |
| 8 | +## 🎯 What is this? |
| 9 | + |
| 10 | +This package implements the **`IFormComponentInstanceProvider`** interface for Syncfusion — plugging into the [Orbyss.Blazor.JsonForms](https://github.com/orbyss-io/Orbyss.Blazor.JsonForms) core form engine. |
| 11 | + |
| 12 | +✅ You don’t need to write your own component provider |
| 13 | +✅ Just install this NuGet package and use `<JsonForm ... />` as normal |
| 14 | +✅ Make sure to either inject `SyncfusionComponentInstanceProvider` in your DI container, or pass a fresh instance as parameter to |
| 15 | +`<JsonForm ComponentInstanceProvider=@provider ... >` |
| 16 | + |
| 17 | +--- |
| 18 | + |
| 19 | +## 🧱 Components Rendered with Syncfusion |
| 20 | + |
| 21 | +All form controls are implemented using Syncfusion Blazor components: |
| 22 | + |
| 23 | +- ✅ `SfTextBox`, `SfDropDownList`, `SfSwitch`, `SfDatePicker`, etc. |
| 24 | +- ✅ Supports layout controls like Grid, Columns, Lists, Buttons, and Stepper Navigation |
| 25 | +- ✅ Fully compatible with cascading properties: `Language`, `Disabled`, `ReadOnly` |
| 26 | +- ✅ Custom UI behavior via `options` in your UI schema |
| 27 | + |
| 28 | +--- |
| 29 | + |
| 30 | +## 🚀 Quickstart |
| 31 | + |
| 32 | +```bash |
| 33 | +dotnet add package Orbyss.Blazor.Syncfusion.JsonForms |
| 34 | +``` |
| 35 | + |
| 36 | +Then in Program.cs: |
| 37 | +``` csharp |
| 38 | +builder.AddSyncfusionJsonForms() |
| 39 | +``` |
| 40 | + |
| 41 | +Then finally you can define the JsonForm Blazor component as follows: |
| 42 | +```csharp |
| 43 | +<JsonForm InitOptions=@options ComponentInstanceProvider=... /> |
| 44 | + |
| 45 | +@code { |
| 46 | + JsonFormContextInitOptions options = new( |
| 47 | + jsonSchema, |
| 48 | + uiSchema, |
| 49 | + translationSchema |
| 50 | + ); |
| 51 | +} |
| 52 | +``` |
| 53 | +--- |
| 54 | + |
| 55 | +## ⚙️ Customization |
| 56 | + |
| 57 | +One way to override default behavior is by subclassing or replacing specific Syncfusion components. Example: |
| 58 | + |
| 59 | +```csharp |
| 60 | +public class CustomProvider : SyncfusionFormComponentInstanceProvider |
| 61 | +{ |
| 62 | + public override InputFormComponentInstanceBase GetInputField(IJsonFormContext context, FormControlContext control) |
| 63 | + { |
| 64 | + if (control.JsonPath == "#/properties/mySpecialField") |
| 65 | + return new MyCustomInputInstance(); |
| 66 | + |
| 67 | + return base.GetInputField(context, control); |
| 68 | + } |
| 69 | +} |
| 70 | +``` |
| 71 | + |
| 72 | +Another way is to configure specific delegates in the `SyncfusionFormComponentInstanceProviderOptions`. Example: |
| 73 | +```csharp |
| 74 | +var instanceProviderOptions = new SyncfusionFormComponentInstanceProviderOptions |
| 75 | +{ |
| 76 | + ConfigureButton = (defaultButton, type, form) => |
| 77 | + { |
| 78 | + defaultButton.CanToggle = true; |
| 79 | + return defaultButton; |
| 80 | + }, |
| 81 | + ConfigureBooleanInput = (defaultInstance, controlContext) => |
| 82 | + { |
| 83 | + var customOption = $"{controlContext.Interpretation.GetOption("custom-boolean")}"; |
| 84 | + if (customOption == "switch") |
| 85 | + { |
| 86 | + return new MyCustomSwitchInputInstance(); |
| 87 | + } |
| 88 | + |
| 89 | + return defaultInstance; |
| 90 | + } |
| 91 | +}; |
| 92 | +``` |
| 93 | + |
| 94 | +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](https://github.com/orbyss-io/Orbyss.Blazor.JsonForms)). |
| 95 | + |
| 96 | +--- |
| 97 | + |
| 98 | +## 🔄 Under the hood: Powered by 3 schemas |
| 99 | + |
| 100 | +Like all Orbyss JSON Forms integrations, this renderer works using: |
| 101 | + |
| 102 | +| Schema | Purpose | |
| 103 | +|---------------------|-----------------------------------------------------| |
| 104 | +| **JSON Schema** | Defines data structure (types, constraints, etc.) | |
| 105 | +| **UI Schema** | Controls layout and per-control options | |
| 106 | +| **Translation Schema** | Manages localization, labels, error messages | |
| 107 | + |
| 108 | +All schema interactions are fully supported. |
| 109 | + |
| 110 | +--- |
| 111 | + |
| 112 | +## 🧩 Other UI Options |
| 113 | + |
| 114 | +Prefer a different component library? Try: |
| 115 | + |
| 116 | +- 🎨 [Orbyss.Blazor.MudBlazor.JsonForms](https://www.nuget.org/packages/Orbyss.Blazor.MudBlazor.JsonForms) |
| 117 | +- Or implement your own renderer via `IFormComponentInstanceProvider` |
| 118 | + |
| 119 | +--- |
| 120 | + |
| 121 | +## 📄 License |
| 122 | +MIT License |
| 123 | +© Orbyss.io |
| 124 | + |
| 125 | +--- |
| 126 | + |
| 127 | +## 🔗 Links |
| 128 | + |
| 129 | +- 🌍 **Website**: [https://orbyss.io](https://orbyss.io) |
| 130 | +- 📦 **Core Engine**: [Orbyss.Blazor.JsonForms](https://www.nuget.org/packages/Orbyss.Blazor.JsonForms) |
| 131 | +- 📦 **This Package**: [Orbyss.Blazor.Syncfusion.JsonForms](https://www.nuget.org/packages/Orbyss.Blazor.Syncfusion.JsonForms) |
| 132 | +- 🧑💻 **GitHub**: [https://github.com/orbyss-io](https://github.com/orbyss-io) |
| 133 | +- 📚 **Syncfusion Docs**: [Syncfusion Blazor UI](https://blazor.syncfusion.com/) |
| 134 | +- 📝 **License**: [MIT](./LICENSE) |
| 135 | + |
| 136 | +--- |
| 137 | + |
| 138 | +## 🤝 Contributing |
| 139 | + |
| 140 | +We're happy to accept contributions, ideas, or improvements. |
| 141 | +Fork the repo, create a feature branch, and open a PR — no formal process required. |
| 142 | + |
| 143 | +--- |
| 144 | + |
| 145 | +⭐️ Found this useful? [Give us a star](https://github.com/orbyss-io/Orbyss.Blazor.Syncfusion.JsonForms) and help spread the word! |
0 commit comments