Form Builder

Visão geral

O Form Builder é um compilador declarativo para construir interfaces web baseadas em formulários (UIs) de forma eficiente. Essas UIs são voltadas para inserir, modificar e visualizar dados e, normalmente, são incorporadas em Functions usadas em Applications e Firewalls.

Como funciona

O Form Builder é construído sobre o JsonForms e usa uma abordagem orientada por schema: a UI é gerada a partir de JSON Schemas.

Data/JSON Schema: define a estrutura de dados subjacente a ser exibida na UI, incluindo objetos, propriedades e seus tipos.

Exemplo de schema

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

Por que usar o Form Builder

Interface visual para os argumentos de Azion Functions por meio de um modo baseado em formulário.
Amigável para usuários não técnicos que precisam editar valores de argumentos.
Gestão flexível para adicionar, editar ou remover elementos do formulário conforme necessário.
Renderização automática com base na configuração do JSON Schema.

Primeiros passos

Criar uma Function com Form Builder

Acesse Functions → + Function.
Abra a aba Arguments e selecione as opções JSON/Form Builder.
Clique em + Form Builder para carregar um exemplo de configuração e ver como o formulário visual é gerado.

Usar Instâncias de Função com Form Builder

As Functions Instances de Applications e Firewalls renderizam usando o Form Builder configurado na função criada.

Quando um Form Builder é configurado durante a criação/edição da função, o formulário visual é carregado com um seletor Form/JSON ao carregar instâncias em Applications ou Firewalls.

Preencha os argumentos da função inserindo valores nos campos de entrada.

Editando o schema do Form Builder

Você pode modificar o schema do formulário diretamente:

Abaixo do formulário, selecione a opção para editar o schema a fim de adicionar ou ajustar entradas.
Volte para o formulário visual para renderizar o schema atualizado.

Suporte de recursos

Compatibilidade do renderizador de JSON Schema

Recurso	Tipo de entrada	Suporte
Boolean	Checkbox	✅
Integer	Number	✅
String	Text	✅
String	Textarea	🔄
String	Enum Combo	🔄
oneOf (const/title)	Combo	✅
Date format	Date field	🔄
Time format	Time field	🔄
Datetime format	Datetime field	🔄
Array of primitives	List	✅
Array of objects	List	✅

Legenda:

✅ Verdadeiro: totalmente suportado
🔄 Verdadeiro / TODO: parcialmente implementado, em revisão/implementação

Exemplo avançado

O exemplo a seguir demonstra várias possibilidades de configuração. Ele inclui restrições de validação, valores padrão, padrões (regex) e arrays de objetos.

{
  "type": "object",
  "properties": {
    "checkboxInput": {
      "type": "boolean",
      "title": "Boolean",
      "description": "Nome do cookie usado para armazenar a variação do teste A/B"
    },
    "cookie_name": {
      "type": "string",
      "title": "Cookie Name",
      "description": "Nome do cookie usado para armazenar a variação do teste A/B",
      "minLength": 1,
      "maxLength": 64,
      "pattern": "^[a-zA-Z0-9_+-]+$"
    },
    "domain": {
      "type": "string",
      "title": "Domain",
      "description": "Domínio onde o cookie será válido (use '.' no início para subdomínios)",
      "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": "Tempo de vida do cookie em segundos",
      "default": 180,
      "minimum": 1,
      "maximum": 31536000
    },
    "path": {
      "type": "string",
      "title": "Path",
      "description": "Caminho no qual o cookie será válido"
    },
    "values": {
      "type": "array",
      "title": "Test Variations",
      "description": "Lista de variações do teste A/B com seus respectivos pesos",
      "minItems": 2,
      "maxItems": 10,
      "items": {
        "type": "object",
        "properties": {
          "value": {
            "type": "string",
            "title": "Variation Value",
            "description": "Identificador único da variação",
            "minLength": 1,
            "maxLength": 50,
            "pattern": "^[a-zA-Z0-9_-]+$"
          },
          "weight": {
            "type": "integer",
            "title": "Weight",
            "description": "Peso da variação (peso maior = maior probabilidade)",
            "minimum": 1,
            "maximum": 100
          }
        },
        "required": ["value", "weight"]
      }
    }
  },
  "required": ["cookie_name", "domain", "max_age", "values"]
}

Propriedades de schema suportadas

As seguintes propriedades do JSON Schema são suportadas:

type: especificação do tipo de dado
title: rótulo exibido para o campo
description: texto de ajuda para o campo
default: valor padrão
minimum / maximum: restrições numéricas
minLength / maxLength: restrições de tamanho de string
minItems / maxItems: quantidade mínima/máxima de itens
pattern: validação por expressão regular
required: especificação de campos obrigatórios

Considerações futuras

Renderizadores customizados para elementos de formulário especializados.
Cobertura completa de tipos de entrada.
Componentes aprimorados:
- Componentes de seleção avançados
- Entradas de rich text
- Estilos personalizados de checkbox
- Blocos de entrada especializados
Seleção dinâmica baseada em resposta: opções de seleção com base em respostas de API.

Considerações futuras

Renderizadores customizados para elementos de formulário especializados.
Cobertura completa de tipos de entrada.
Componentes aprimorados:
- Componentes de seleção avançados
- Entradas de rich text
- Estilos personalizados de checkbox
- Blocos de entrada especializados
Seleção dinâmica baseada em resposta: opções de seleção com base em respostas de API.

Boas práticas

Mantenha os schemas simples e bem estruturados para melhor experiência do usuário.
Utilize restrições de validação (min/max, padrões) para garantir a integridade dos dados.
Forneça títulos e descrições claros para todos os campos.

Solução de problemas

Problemas comuns

Formulário não renderiza: verifique a sintaxe e a estrutura do JSON Schema.
Erros de validação: confira se os campos obrigatórios foram definidos corretamente.
Problemas de exibição: confirme se os tipos de campo são suportados (consulte a tabela de compatibilidade).

Para suporte técnico, consulte a documentação da Azion ou entre em contato com a equipe de suporte.