Quais as novas? App Builder Lançamento com o Construtor de Formulários

Permitir que você crie aplicativos de alto desempenho e ricos em dados com pouco código é o objetivo do nosso compromisso com a melhoria contínua. É por isso que sempre garantimos que os recursos mais recentes do App Builder ofereçam uma experiência de desenvolvimento otimizada e sem interrupções. E agora adicionamos mais um ótimo recurso: o Form Builder.

Antes de mergulhar nos novos recursos e em todas as novas funcionalidades, se esta é a primeira vez que você aprende sobre App Builder, deixe-me compartilhar rapidamente por que você deve considerá-lo uma ferramenta essencial no processo de desenvolvimento de aplicativos para sua organização:

• Um App Builder visual – a plataforma unificada para gerentes de produtos, designers, desenvolvedores e partes interessadas.
• Ferramenta de arrastar e soltar WYSIWYG baseada em nuvem que ajuda as empresas a projetar e criar aplicativos de negócios completos 80% mais rápido do que nunca.
• Uma ferramenta low-code​ ​que gera código Blazor, código Angular, Web Components e código React pronto para produção a partir de seus designs Figma e Sketch.

O que é o Form Builder no App Builder?

A funcionalidade Form Builder do App Builder permite que os desenvolvedores criem formulários HTML por meio de uma experiência de arrastar e soltar. Ela enfatiza a geração automática de estruturas de formulário diretamente de endpoints de API, simplificando o processo de criação e permitindo conexões de dados contínuas com fontes de backend. Esse recurso oferece ampla flexibilidade no layout do formulário e na personalização de componentes e inclui opções para exibir notificações para envios, erros e validações do lado do servidor.

E se você quiser ver tudo isso em ação, você pode se inscrever para nosso webinar focado em demonstração que acontecerá em dezembro. Encontre os detalhes aqui e registre-se.

Geração automática de formulários a partir de pontos de extremidade de dados

Quando um desenvolvedor arrasta um ponto de extremidade de dados para a superfície de design, um conjunto de componentes de formulário é gerado automaticamente com base nas propriedades do ponto de extremidade.

• Os métodos POST e PUT criam campos de entrada para envio de dados.
• O tratamento básico de eventos, como interações OnSuccess e OnError, é configurado automaticamente.

Criação e mapeamento automático de controles de formulários

Os controles de formulário são criados com base no tipo de dados e metadados de cada campo, garantindo entradas e rótulos intuitivos (por exemplo, campos de data usam seletores de data, campos booleanos usam switches). Os desenvolvedores mantêm controle total para modificar componentes, adicionar validações ou ajustar rótulos diretamente no painel de propriedades.

Modificação de formulário

Uma vez gerado, o formulário pode ser editado para incluir ou excluir campos, personalizar rótulos e definir validações de entrada, oferecendo uma experiência de design intuitiva. App Builder permite que os desenvolvedores personalizem o layout e os componentes do formulário:

• Adicione ou remova facilmente elementos dentro do formulário.
• Ajuste propriedades de controle, como validações Obrigatórias e Desativadas, personalização de rótulos e mapeamento.

Criação de formulário manual

Os desenvolvedores podem criar formulários manualmente no App Builder arrastando e soltando elementos como campos de entrada, botões e componentes de formulário no contêiner Form. Essa abordagem permite controle completo sobre a estrutura e o layout sem exigir vinculações imediatas a fontes de dados.

Vinculação de fonte de dados

Uma vez que o formulário é projetado, os desenvolvedores podem vinculá-lo a um endpoint a partir de fontes de dados configuradas. Essa flexibilidade garante a capacidade de refinar elementos do formulário antes de definir interações de dados.

Comportamento de vinculação e validações

• Alternando entre pontos de extremidade: se você alternar entre pontos de extremidade depois que seu formulário for criado, entradas não correspondentes exibirão um aviso de associação inválida, e essas associações não serão geradas como associações quebradas na saída do código.
• Inicialização de variável: você pode inicializar uma nova variável na caixa de diálogo de vinculação de ponto de extremidade do formulário com o ponto de extremidade de dados da API, fornecendo o contexto necessário para a inicialização do formulário.
• Geração de código: ligações inválidas são excluídas do código gerado, garantindo que o aplicativo seja compilado sem erros.

Para minimizar interrupções ao alternar endpoints, App Builder fornece avisos sobre possíveis invalidações.

Interação ao vivo com o formulário

No modo de visualização do App Builder, os usuários podem interagir com o formulário para ver:

• Validação de entrada em tempo real.
• Envio de formulário, com notificações indicando sucesso ou erros de validação.

Observação: após o envio do formulário no modo de visualização, a ação Post/Put é executada, adicionando ou atualizando o registro por meio do ponto de extremidade especificado.

Botões de ação configuráveis

Os botões de ação (Submit, Reset) oferecem personalização completa, suportando posicionamentos internos e externos. Essa flexibilidade é essencial para desenvolvedores que precisam de controle preciso sobre o comportamento do formulário em layouts mais complexos.

Enviar notificações de ação

Mensagens de sucesso e erro são exibidas via Snackbars, oferecendo feedback não intrusivo sobre envios de formulários. Essas notificações são codificadas para a versão inicial, com planos para suportar manipulação de interação flexível em iterações futuras.

Suporte de controle de formulário

O Form Builder suporta uma variedade de controles de UI mapeados para tipos de dados específicos, garantindo que os desenvolvedores possam criar formulários acessíveis e responsivos de forma eficiente. Abaixo está um resumo dos controles suportados e limitações atuais. Todos os controles Form suportam vinculação bidirecional e são vinculados ao contexto do formulário.

Controle de formulário	Tipo padrão	Notas
Grupo de Rádio	Booleano	Não possui validação de campo obrigatória
Caixa de seleção	Booleano	Não possui validação de campo obrigatória
Trocar	Booleano	–
Controle deslizante	Número	–
Selecionar	Enumerar	–
Caixa de combinação	Enumerar	–
Selecionador de data	Data	–
Calendário	Data	Pode não atualizar a data selecionada com precisão
Campo de entrada	Sequência, Número	–

Observação: os controles de formulário atualmente oferecem suporte a propriedades básicas de validação (Required, Disabled).

Melhorias futuras

O roteiro para o Form Builder do App Builder inclui avanços nas opções de validação, suporte estendido a metadados e gerenciamento aprimorado de notificações e interações.

Os aprimoramentos futuros de validação incluirão:

• Validação de enumeração para controles de caixa de seleção e combinação.
• Validação de intervalo (min, max).
• Validação do comprimento da string (min length, max length).
• Validação de padrões (regex).

Problemas e limitações conhecidos

Os seguintes problemas e limitações conhecidos se aplicam à versão inicial do Form Builder:

• Discrepância no comportamento de redefinição de formulário entre a experiência de tempo de execução App Builder e o tempo de execução do aplicativo gerado:
  • No App Builder, o clique no botão Redefinir reverte os valores iniciais ao editar um registro e limpa o formulário ao adicionar um novo registro.
  • No aplicativo gerado, o clique no botão Redefinir limpa o formulário definindo todos os controles do formulário para valores vazios.

• Cópia e colagem de formulário: copiar e colar um formulário atualmente faz com que o formulário original perca suas vinculações de dados, que são transferidas para a instância do formulário recém-colada.
• Sinalizador Booleano Obrigatório: Há ambiguidade na implementação de um campo Booleano obrigatório, particularmente para casos como “aceitar termos de serviço”.
• Comportamento de Enviar/Redefinir: A funcionalidade Enviar/Redefinir foi adaptada para funcionar tanto no modelo quanto no formulário reativo, mas ainda pode apresentar inconsistências.
• Geração de código:
  • Problemas de digitação com modelos de formulário: podem surgir inconsistências de digitação, especialmente ao trabalhar com estruturas ou matrizes aninhadas, complicando a geração precisa do modelo de formulário no código de saída.
  • igx-hint na pré-visualizaçãoElemento : O elemento igx-hint está atualmente excluído da pré-visualização, pois não é gerado no código final. Atualizações futuras podem adicionar suporte para funcionalidade de exibição de mensagens.
  • O calendário não está sendo exibido no aplicativo gerado quando está em um formulário.
  • Redefinir comportamento de clique do botão– ele limpa o formulário para projetos gerados React. Em vez de reverter para valores iniciais, os controles do formulário recebem valores vazios.
  • A propriedade desabilitada não será renderizada para entrada em um formulário gerado pelo Angular.

Perguntas da enquete

Sinta-se à vontade para preencher a seguinte Enquete. Seu feedback é inestimável para moldar o futuro do nosso Form Builder e ferramentas de low-code. Estamos comprometidos em abordar seus desafios, como projetar formulários responsivos e gerenciar validações, ao mesmo tempo em que aprimoramos recursos como UX de arrastar e soltar e integrações de backend.

Conclusão

Concluindo, App Builder é um divisor de águas no processo de desenvolvimento de aplicativos. Seu construtor visual baseado em nuvem, recursos de low-code e novos recursos o tornam uma ferramenta essencial para qualquer organização. Experimente hoje mesmo! Se precisar de mais detalhes, recomendamos que você confira nosso:

• Discord canal.
• Discussões do GitHub.
• Roteiro.

To experience everything, head to appbuilder.dev and start using the App Builder. If you want an exclusive preview of our latest developments, check our App Builder Preview environment. As usual, we are always excited to get your feedback and hear what you want to add or recommend. So, please email me at zkolev@appbuilder.dev and let me know how we can help you continue delivering value to your customers with Infragistics.

---

React Geração de código: guia passo a passo

Maximizando a agilidade dos negócios com o desenvolvimento low-code

App Builder IA: como ela agiliza o desenvolvimento de aplicativos?

App Builder Versão: AI, CSS Grid Layout e muito mais

5 principais recursos a serem considerados ao escolher uma plataforma low-code