Form Builder

Overview

Form Builder is a declarative compiler for efficiently building form-based web user interfaces (UIs). These UIs are targeted at entering, modifying, and viewing data and are typically embedded within Functions used in Applications and Firewalls.

How it works

Form Builder is built on top of JsonForms and uses a schema-driven approach: the UI is generated from JSON Schemas.

• Data/JSON Schema: Defines the underlying data structure to be displayed in the UI, including objects, properties, and their types.

Example schema

{
  "type": "object",
  "properties": {
    "name": { "type": "string" },
    "description": { "type": "string" },
    "done": { "type": "boolean" },
    "rating": { "type": "integer" }
  },
  "required": ["name"]
}

Why use Form Builder

• Visual interface for Azion Functions arguments through a form-based mode.
• User-friendly for non-technical users who need to edit argument values.
• Flexible management to add, edit, or remove visual form elements as needed.
• Automatic rendering based on the JSON Schema configuration.

Getting started

Create a Function with Form Builder

1. Go to Functions → + Function.
2. Open the Arguments tab and select the JSON/Form Builder options.
3. Click + Form Builder to load an example configuration and see how the visual form is generated.

Use Function Instances with Form Builder

Application and Firewall Functions Instances render using the configured Form Builder from the created function.

When a Form Builder is configured during function creation/editing, the visual form loads with a Form/JSON selector panel when loading instances in Applications or Firewalls.

• Fill function arguments by entering values in the input fields.

Editing Form Builder schema

You can modify the form schema directly:

1. Below the form, select the option to edit the schema to add or adjust inputs.
2. Switch back to the visual form to render the updated schema.

Feature support

JSON Schema renderer compatibility

Legend:

• ✅ True: Fully supported
• 🔄 True / TODO: Partially implemented, under review/implementation

Advanced example

The following example demonstrates a variety of configuration possibilities. It includes validation constraints, defaults, patterns, and arrays of objects.

{
  "type": "object",
  "properties": {
    "checkboxInput": {
      "type": "boolean",
      "title": "Boolean",
      "description": "Name of the cookie used to store the A/B test variation"
    },
    "cookie_name": {
      "type": "string",
      "title": "Cookie Name",
      "description": "Name of the cookie used to store the A/B test variation",
      "minLength": 1,
      "maxLength": 64,
      "pattern": "^[a-zA-Z0-9_+-]+$"
    },
    "domain": {
      "type": "string",
      "title": "Domain",
      "description": "Domain where the cookie will be valid (use '.' at the beginning for subdomains)",
      "default": ".azion.com",
      "pattern": "^[.]?[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]*\\.[a-zA-Z]{2,}$"
    },
    "max_age": {
      "type": "integer",
      "title": "Max Age (seconds)",
      "description": "Lifetime of the cookie in seconds",
      "default": 180,
      "minimum": 1,
      "maximum": 31536000
    },
    "path": {
      "type": "string",
      "title": "Path",
      "description": "Path where the cookie will be valid"
    },
    "values": {
      "type": "array",
      "title": "Test Variations",
      "description": "List of A/B test variations with their respective weights",
      "minItems": 2,
      "maxItems": 10,
      "items": {
        "type": "object",
        "properties": {
          "value": {
            "type": "string",
            "title": "Variation Value",
            "description": "Unique identifier of the variation",
            "minLength": 1,
            "maxLength": 50,
            "pattern": "^[a-zA-Z0-9_-]+$"
          },
          "weight": {
            "type": "integer",
            "title": "Weight",
            "description": "Variation weight (higher weight = higher probability)",
            "minimum": 1,
            "maximum": 100
          }
        },
        "required": ["value", "weight"]
      }
    }
  },
  "required": ["cookie_name", "domain", "max_age", "values"]
}

Supported schema properties

The following JSON Schema properties are supported:

• type: Data type specification
• title: Display label for the field
• description: Help text for the field
• default: Default value
• minimum / maximum: Numeric constraints
• minLength / maxLength: String length constraints
• minItems / maxItems: Number of min/max items
• pattern: Regular expression validation
• required: Required field specifications

Future considerations

• Custom renderers for specialized form elements.
• Complete input type coverage.
• Enhanced components:
  • Advanced select components
  • Rich text inputs
  • Custom checkbox styles
  • Specialized input blocks
• Dynamic response-based selection: select options based on API responses.

Best practices

1. Keep schemas simple and well-structured for better user experience.
2. Use validation constraints (min/max, patterns) to ensure data integrity.
3. Provide clear titles and descriptions for all fields.

Troubleshooting

Common issues

• Form not rendering: verify JSON Schema syntax and structure.
• Validation errors: check that required fields are properly defined.
• Display issues: ensure field types are supported (see the compatibility table).

For technical support, consult Azion documentation or contact the support team.