KaaIoT, MikroTik & Teltonika Webinar. Build and Upgrade Equipment with IoT for Remote Access & Control
REGISTER NOW
NEW
Docs Webinars Get Support
Kaa Documentation

Forms System Overview

Forms System Overview

This document provides a high-level overview of the form system used within the IoT platform frontend. Our forms are built upon the react-jsonschema-form library (version 1.6) and extended with custom widgets and a powerful data transformation engine to handle dynamic behaviors and data dependencies common in IoT scenarios. These schemas are applied to the forms in the widgets like Configuration, Endpoint / Asset lists, Rules and rule actions forms and whnever the Json Schema and UI Schema are present in the widget configuration. Also it’s used for the Custom UI Widgets.

Core Concepts

The system relies on two key JSON structures to define and render forms:

  1. JSON Schema: Defines the data structure, data types, constraints, and validation rules for the form data. It dictates what data the form should capture and how it should be structured. See the JSON Schema Guide for more details.
  2. UI Schema: Controls the presentation and behavior of the form fields. It specifies how the form should look and interact, including widget selection, field order, layout hints, and custom behaviors. See the UI Schema Guide for more details.

Custom Extensions

Beyond the standard capabilities of react-jsonschema-form, our system incorporates several custom extensions:

  • Custom Widgets: A suite of bespoke UI components (ui:widget) tailored for specific data types or user interactions within the platform (e.g., service selection, file uploads, templating inputs).
  • Data Transformations: A sophisticated mechanism (ui:options.transformation) allows form fields (like dropdowns) to dynamically fetch and update their options or values based on changes in other parts of the form or external data sources. This is crucial for dependent fields, such as selecting an application version based on a chosen application. See the Transformations Guide for an in-depth explanation.

Further Reading

  • JSON Schema Guide: Learn how to define the data model for your forms.
  • UI Schema Guide: Understand how to control the look, feel, and behavior of your forms, including custom widgets.
  • Transformations Guide: Dive deep into the dynamic data loading and update mechanism.