"Taming Complex Settings with Schema-Driven Forms: A Developer's Deep Dive"

Thrown Into the Deep End: My Dive Into Schema-Driven Forms

I got thrown into the deep end again. It’s been a while since I was truly in over my head. After coasting through a few breezy projects, I finally hit one of those high-pressure ones: clear objective, vague implementation, and a tight deadline.

Thank God for mentors.

The task? Build a highly configurable, user-friendly settings interface. Sounds simple, right?

Not really.

You see, these settings were powered by complex JSON Logic—those weird, infinitely nested objects with conditional madness sprinkled all over. Before this revamp, our app just dumped the raw JSON into a JSON editor and left users to figure it out.

Not exactly user-friendly.

So how do you convert a deeply nested, complex object into an intuitive interface? That’s when my mentor introduced me to form schemas.

What’s a Schema, Anyway?

In this context:

• A form schema is a JSON object that defines the structure and behavior of a form.

Example form schema:

{
  "fields": [
    {
      "key": "required",
      "type": "checkbox",
      "defaultValue": false,
      "properties": {
        "type": "boolean",
        "label": "Required",
        "labelStatus": false
      }
    }
  ]
}

You might be asking, “Why not just build the UI with HTML and CSS?”

Because hardcoding the form logic means you have to touch your frontend code every time the structure changes—not ideal for scalability.

By defining this structure in a JSON schema stored in your DB, you make your form and UI behavior dynamic and configurable—without needing to redeploy your frontend every time.

Tools That Help with Schema-Driven UIs

I started exploring tools that support this approach. Here are a few:

• ngx-formly (Angular)

• SurveyJS

• JSONForms

• React JSON Schem**a Fo[rm**](https://surveyjs.io/)

• Angular JSON Schema Form (less maintained)

I went with ngx-formly because my project was built in Angular, and Formly has a solid API and flexibility.

Example Walkthrough

Let’s say I have a setting that defines a minimum and maximum value. I’d define the field like this:

field = {
  key: 'amount',
  wrappers: ['formlyLabelWrapper'],
  templateOptions: { label: 'Amount Range' },
  fieldGroupClassName: 'd-flex align-items-top',
  fieldGroup: [
    {
      className: 'w-100',
      key: 'minimum',
      type: 'input',
      defaultValue: setting?.minimum,
      templateOptions: {
        type: 'number',
        label: '',
        min: 0,
        max: 9999999999,
      },
    },
    {
      template: '<div class="mx-2 mt-3"><span>to</span></div>',
    },
    {
      className: 'w-100',
      key: 'maximum',
      type: 'input',
      defaultValue: setting?.maximum,
      templateOptions: {
        type: 'number',
        label: '',
        min: 0,
        max: 9999999999,
      },
    },
  ],
};

Then in the component:

form = new FormGroup({});

And in the template:

<formly-form [form]="form" [fields]="field" [model]="result"></formly-form>

This renders a label with two input fields: minimum and maximum. The submitted result would look like this:

{
  "amount": {
    "minimum": 0,
    "maximum": 100
  }
}

All the magic—rendering, state management, validation—is handled by Formly. You just focus on the schema.

Conclusion

This experience taught me that abstracting your forms with schemas might feel like a leap at first, but it makes your app incredibly flexible and maintainable down the road. I’ll be exploring more tools like SurveyJS and JSONForms next—maybe even building my own schema visualizer. Who knows?

Thanks to the mentors who helped me swim when I was dropped in the JSON ocean.

Note that I used a custom wrapper in the example used.