Form Builder Inputs - Help

JSON Based Form Builder

This Supports various Input and Components for easily build or construct forms in Blazor. Currenlty this uses MudBlazor. Below the list of supported Input/Components.

---

Component	Description
Alert
Title
Text
Select
Email
Password
Multiline
Numeric
DateTime
CheckBox
Radio
Switch
AutoComplete
FileUpload
Date
Time
Divider

---

Full Class - Form Builder Input

FormBuilderInputs.cs

public class FormBuilderInputs
{
    public string Id { get; set; } =  Guid.NewGuid().ToString();
    public string FieldName { get; set; }
    public string PatternMask { get; set; }
    public string Label { get; set; }
    [JsonConverter(typeof(InputFieldTypeConverter))]
    public InputFieldType InputType { get; set; }
    public SelectionItems[] SelectItemList { get; set; }
    public bool IsReadOnly { get; set; }
    public string DefaultValue { get; set; }
    [JsonConverter(typeof(VariantTypeConverter))]
    public Variant Variant { get; set; }
    public GridPosition GridPosition { get; set; }
    public bool IsMultiple { get; set; } = false;
    public string FileAllowed { get; set; } = string.Empty;

    public FormValidation Validation { get; set; } = new FormValidation()
    {
        IsRequired = false,
        RequiredError = ""
    };

    #region Text Box Releated Settings
    public int Line { get; set; } = 3;
    #endregion

    #region Title Sepecific Settings
    [JsonConverter(typeof(TypoTypeConverter))]
    public Typo TextStyle { get; set; }

    /// <summary>
    /// justify-start | justify-center | justify-end | justify-space-between | justify-space-around
    /// <see cref="https://mudblazor.com/utilities/justify-content#applying-conditionally"/>
    /// </summary>
    public string TileAlign { get; set; } = "justify-center";

    #endregion

    #region Alert Message
    [JsonConverter(typeof(SeverityTypeConverter))]
    public Severity Severity { get; set; } = Severity.Normal;

    #endregion
}

Text

Text field components allow users to enter and modify information.

Input Json

enrolment-header.json

[
  {
    "FieldName": "AdmissionNo",
    "Label": "Admission Number",
    "InputType": "Text",
    "IsReadOnly": true,
    "IsRequired": true,
    "DefaultValue": "ST-12-2024",
    "Variant": "Text",
    "GridPosition": {
      "xs": 12,
      "sm": 6,
      "md": 6,
      "lg": 6
    }
  },

  {
    "FieldName": "AdmissionDate",
    "Label": "Admission Date",
    "InputType": "Date",
    "IsReadOnly": true,
    "IsRequired": true,
    "DefaultValue": "",
    "Variant": "Text",
    "GridPosition": {
      "xs": 12,
      "sm": 6,
      "md": 6,
      "lg": 6
    }
  }

]

Sample Code

Razor Code

@* Blazor Form - Start  ValidationFuncList="_ValidationFuncList" HeaderProperty="_headerProperty" *@
@if (_headerProperty is not null && formsHeaderInputs is not null)
{
    <DynamicMudForm Title="Admission Header" HeaderProperty="_headerProperty"  FormBuilderInput="@formsHeaderInputs"/>
    Console.WriteLine("Customer Academy Title - Form");
}
else
{
    <MudCard>
        <MudCardHeader>
            <CardHeaderAvatar>
                <MudSkeleton SkeletonType="SkeletonType.Circle" Animation="Animation.Wave" Height="40px" Width="40px"/>
            </CardHeaderAvatar>
            <CardHeaderContent>
                <MudSkeleton Animation="Animation.Wave" Width="40%"/>
                <MudSkeleton Animation="Animation.Wave" Width="60%"/>
            </CardHeaderContent>
        </MudCardHeader>
        <MudSkeleton SkeletonType="SkeletonType.Rectangle" Animation="Animation.Wave" Height="250px"/>
        <MudCardContent>
            <MudSkeleton Animation="Animation.Wave"/>
        </MudCardContent>
        <MudCardActions>
            <MudSkeleton SkeletonType="SkeletonType.Circle" Animation="Animation.Wave" Height="30px" Width="30px" Class="ml-2 mb-2"/>
            <MudSkeleton SkeletonType="SkeletonType.Circle" Animation="Animation.Wave" Height="30px" Width="30px" Class="ml-3 mb-2"/>
        </MudCardActions>
    </MudCard>
}

C# Code

public FormProperty _headerProperty;
    private FormBuilderInputs[]? formsHeaderInputs;    
    public IDictionary<string, Func<string, IEnumerable<string>>> _ValidationFuncList = new Dictionary<string, Func<string, IEnumerable<string>>>();

    protected override async Task OnInitializedAsync()
    {
        formsHeaderInputs = await Http.GetFromJsonAsync<FormBuilderInputs[]>("forms/student/enrolment-header.json");
        Console.WriteLine($"Form Input: {formsHeaderInputs.Length} ");
        _headerProperty = new FormProperty()
        {
            EnableCard = false,
            Title = "Feedback",
            TitleDivider = false,
            SubTitle = "Get in touch with our expert.",
            CardHeaderAvatar = new CardAvatar()
            {
                Icons = @Icons.Material.Filled.DynamicFeed,
                Color = Color.Primary,
                Variant = Variant.Filled,
                IsEnable = true,
            },
            CardHeaderAction = new CardAction()
            {
                Icons = Icons.Material.Filled.Settings,
                Color = Color.Default,
                CardHeaderTrigger = CardHeaderTrigger
            },
            CardSettings = new CardSettings()
            {
                Elevation = 2,
                Outlined = false,
                FooterSettings = new FooterSettings()
                {
                    EnableFooter = false
                }
            }
            
        };        
    }

Output