App Builder Release: Grades hierárquicas de carga sob demanda, integração de DevOps, validação de entrada e muito mais!

A atualização mais recente do App Builder, lançada em maio, oferece novos recursos poderosos projetados para simplificar o desenvolvimento, melhorar o desempenho e dar aos desenvolvedores e designers mais controle sobre o comportamento do aplicativo e a experiência do usuário. Desde o carregamento de dados mais inteligente em Grades Hierárquicas até a integração nativa do Azure DevOps e regras de validação avançadas entre componentes, esta versão está repleta de recursos de aprimoramento de produtividade.

Antes de mergulhar nessas 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 fundamental no processo de desenvolvimento de aplicativos para sua organização:

• Um construtor de aplicativos visuais – a plataforma unificada para executivos de nível C, arquitetos corporativos, líderes de equipe de desenvolvimento, 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 gera código pronto para produção para Angular, React, Web Components e Blazor e converte Figma designs em código.

O que há de novo nesta versão App Builder?

Grade hierárquica com carga sob demanda

Agora você pode configurar o Load-on-Demand na Grade Hierárquica por meio de RowIslands, permitindo que os dados filho sejam carregados somente quando necessário. Isso torna o trabalho com grandes conjuntos de dados aninhados significativamente mais rápido e eficiente.

Principais destaques:

• Gera automaticamente RowIslands aninhadas (até 5 níveis) quando associadas a dados hierárquicos.
• Cada RowIsland é configurável individualmente — suporta filtragem, classificação, paginação e edição.
• Os dados filho são carregados somente quando a linha pai é expandida, usando solicitações de dados separadas.
• A hierarquia visual aparece no Painel de Estrutura de Tópicos, auxiliando na navegação e no design intuitivos.

Exemplo de caso de uso:

Defina fontes de dados separadas para Customers, Orders e OrderDetails. A grade carrega apenas o necessário quando você expande uma linha, resultando em uma experiência de interface do usuário mais rápida e limpa.

Existem algumas limitações conhecidas das quais se deve estar ciente -> copiar e colar entre níveis filho está desabilitado, a reassociação não é suportada, a reordenação só é permitida dentro do mesmo pai e CRUD, vinculação remota de dados e operações em grades filho fazem parte do roteiro para versões futuras.

Integração do Azure DevOps

Agora você pode se conectar App Builder diretamente ao Azure DevOps, permitindo pipelines contínuos de CI/CD e entregas de código com apenas alguns cliques. Leia os documentos de ajuda completos sobre o assunto.

O que você pode fazer:

• Conectar-se a um projeto existente do Azure DevOps
• Criar e publicar código-fonte (Angular, React, Blazor ou Web Components) diretamente em um repositório de DevOps
• Disparar builds automáticos de CI
• Enviar alterações de acompanhamento por meio de solicitações de pull
• Prepare-se para implantações ao vivo (em breve)

Authentication Tip: Only Work or School Microsoft accounts (Azure AD) are supported for authentication. Personal Microsoft accounts (e.g., @outlook.com) are not compatible without converting to a work account or adding them as a guest to your Azure AD tenant.

Validação de entrada para formulários, grades e entradas

A validação acaba de receber uma atualização significativa! App Builder agora oferece suporte a regras de validação de entrada em formulários, componentes de grade e entradas independentes.

Regras suportadas:

• min, max (entradas numéricas/data)
• minLength, maxLength
• pattern (por exemplo, formato de e-mail, máscaras de telefone)
• required

Essas validações se aplicam:

• Automaticamente ao ler de um esquema do Swagger
• Manualmente por meio de definições de regras personalizadas (que substituem as regras de esquema)
• Durante várias interações de entrada (desfoque, envio, edição, etc.)

Estados de validação de acordo como padrão HTML5

Tipo de entrada	min / max	minLength / maxLength	pattern	Notas
Email	❌	✅	✅	Usar padrão para formatos personalizados
Procurar	❌	✅	✅	Funciona como texto livre
Telefone (tel)	❌	✅	✅	Ideal para formatos numéricos personalizados
Texto	❌	✅	✅	Tipo de entrada mais flexível
Senha	❌	✅	✅	Use para regras de força
Número	✅	❌	❌	O HTML5 limita o suporte a padrões
Data	✅	❌	❌	Usos estrito YYYY-MM-DD

Cabeçalhos de várias colunas e grupos de colunas recolhíveis

Esta versão App Builder apresenta cabeçalhos de várias colunas e grupos de colunas recolhíveis, permitindo que você crie layouts de grade mais organizados e responsivos.

Destaques do recurso:

• Agrupe várias colunas em um único cabeçalho pai.
• Os grupos recolhíveis podem ser expandidos/recolhidos para controlar as colunas visíveis.
• Configure a visibilidade, a fixação e o estado (expandido/recolhido) por meio do Painel de Propriedades ou do Painel de Estrutura de Tópicos.
• Apoiado pelo igx-column-group componente e propriedades como collapsible e visibleWhenCollapsed.

Limitações técnicas:

• Atualmente, apenas um nível de agrupamento é suportado devido às limitações da interface do usuário do Angular e do Ignite com renderização recursiva e atualizações de estrutura dinâmica.
• Fixação: Ao fixar uma coluna filho, seu grupo pai também deve ser fixado.

Principais recursos:

• Adicione RouterOutlet contêineres nas exibições mestre e filho.
• Ative a navegação profunda de 2 níveis (por exemplo, Customers → Orders → Order Details).
• Prepare-se para até 5 níveis de roteamento, que serão introduzidos em uma versão futura.
• Ideal para cenários de detalhes mestres, painéis ou interfaces de usuário de divulgação progressiva.

Conclusão

O lançamento de maio reflete nosso compromisso contínuo em fornecer experiências de aplicativos escaláveis e modernas em App Builder. Esteja você projetando grades de dados complexas, aplicando regras de validação robustas ou simplificando fluxos de trabalho de DevOps, esta atualização oferece as ferramentas para avançar mais rapidamente e criar melhor.

Experimente os novos recursos hoje mesmo no appbuilder.dev

Em conclusão, App Builder é um divisor de águas no processo de desenvolvimento de aplicativos. Com seu construtor visual baseado em nuvem, recursos de baixo código e novos recursos, é uma ferramenta obrigatória para qualquer organização. Experimente hoje! Se precisar de mais detalhes, recomendamos que você confira nosso:

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

Para experimentar tudo nas últimas atualizações do App Builder, visite o portal do cliente e obtenha a versão mais recente. Como de costume, estamos sempre ansiosos para receber seus comentários e ouvir o que você deseja adicionar ou recomendar. Então, por favor, envie-me um e-mail para zkolev@appbuilder.dev e deixe-me saber como podemos ajudá-lo a continuar agregando valor aos seus clientes com a Infragistics.