O que há de novo: App Builder com ações de dados condicionais, Grid Master-Detail e muito mais

Nosso lançamento App Builder em junho apresenta uma nova onda de recursos de produtividade projetados para acelerar o desenvolvimento de aplicativos e simplificar as interações do usuário. Tendo App Builder com as Ações de Dados Condicionais, agora você pode criar uma lógica mais inteligente em seus fluxos de trabalho com base no sucesso ou falha das chamadas de API, sem necessidade de código. O novo modelo de detalhes mestre de grade permite enriquecer visualmente os dados da linha com exibições expansíveis e sensíveis ao contexto. E para equipes globais, estamos introduzindo a localização em espanhol em toda a plataforma. Combinado com o novo recurso de roteamento no nível filho, aprimoramentos de tempo de design e variantes de interface do usuário expandidas, como botões de ícone contornados e contidos, esta versão coloca mais poder de design e controle lógico ao seu alcance.

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?

Aprimore sua grade com modelos mestre-detalhe

Os modelos de detalhes mestres em App Builder trazem interatividade poderosa para suas grades de dados. Ao habilitar linhas expansíveis, você pode permitir que os usuários revelem mais detalhes vinculados a cada registro, como pedidos recentes de um cliente, desempenho de um funcionário ou histórico de viagens de um veículo, diretamente na grade.

Com o suporte intuitivo de tempo de design do App Builder, você pode arrastar e soltar componentes como cartões ou blocos de texto na área de detalhes expandida e vinculá-los ao contexto de dados da linha atual. É uma maneira rápida e flexível de criar interfaces de usuário informativas que vão além das tabelas planas.

Para usá-lo, basta ativar a opção Grid-details no painel Propriedades, adicionar seus componentes e vinculá-los aos dados da linha.

Vejamos a demonstração a seguir.

A demonstração acima mostra um layout Master-Detail em ação, aplicado em um aplicativo de CRM. Ele demonstra como a seleção de um cliente revela seus pedidos associados e, além disso, como cada pedido carrega dinamicamente seus detalhes de pedidos relacionados.

Nesta configuração:

• A visualização principal exibe uma lista de clientes e, ao selecionar um cliente, você pode ver seus pedidos.
• Uma grade secundária de detalhes do pedido foi adicionada, que está vinculada ao contexto de linha do pedido selecionado.
• Essa associação orientada por contexto garante que, quando um usuário selecionar um pedido específico, a Grade de Detalhes do Pedido seja atualizada para mostrar apenas as informações relevantes.

Isso demonstra a facilidade com que você pode criar uma experiência de detalhamento usando a associação de dados contextual, permitindo que os usuários explorem relacionamentos de dados hierárquicos sem fiação manual ou código extra.

Visualize tudo ao vivo e exporte seu aplicativo com o código gerado. Lembre-se de que associações avançadas específicas, como fontes de dados parametrizadas por linha ou componentes de sobreposição, como caixas de diálogo, não têm suporte atualmente na geração de código. Dê uma olhada no tópico de ajuda completo aqui.

Fluxos de trabalho mais inteligentes: App Builder com ações de dados condicionais

Com esta versão, App Builder apresenta as Ações de Dados Condicionais, uma maneira poderosa de controlar o comportamento do aplicativo com base no resultado de uma solicitação de dados. Agora você pode definir ações de acompanhamento que são acionadas somente se a ação inicial for bem-sucedida ou falhar. Por exemplo, mostre um banner de sucesso após um envio de formulário bem-sucedido ou solicite uma mensagem de erro se ele falhar.

Esse recurso mantém as coisas limpas e focadas: as condições estão atualmente limitadas apenas a ações de dados e suportam uma avaliação simples de aprovação/reprovação sem a necessidade de verificar códigos HTTP específicos. Você também pode usar variáveis dentro de condições e se beneficiar de menus suspensos contextuais que ajudam a esclarecer se você está fazendo referência a uma entrada, a um resultado ou a uma variável definida pelo usuário. É um passo fundamental em direção a uma lógica de aplicativo mais inteligente e responsiva, sem necessidade de codificação.

A demonstração abaixo mostra a saída de Ações Condicionais em ação em um aplicativo HR Dashboard. Ele demonstra como você pode aprimorar o fluxo do seu aplicativo manipulando dinamicamente o processo de adição de um novo funcionário e oferecendo navegação contextual com base no resultado.

Aqui está o que acontece:

1. Quando uma nova linha é adicionada à Grade de Funcionários, uma Ação Condicional dispara uma solicitação PUT para o back-end.
2. Se a solicitação for bem-sucedida, duas coisas acontecerão:
3. Uma variável é definida para armazenar o objeto de funcionário recém-criado.
4. Uma notificação de barra de lanches é exibida, confirmando o sucesso e oferecendo um botão de navegação para uma visualização detalhada do formulário pré-preenchida com os dados do novo funcionário.
5. Se a solicitação falhar, uma janela de diálogo será exibida para notificar o usuário sobre o problema.
6. Após editar o funcionário na Visualização do Formulário e enviar atualizações, uma segunda lanchonete aparece, guiando o usuário para a Visualização da Equipe, onde ele pode ver a lista completa de funcionários, agora incluindo o recém-adicionado ou atualizado.

Esse fluxo ilustra como as Ações Condicionais podem orquestrar uma experiência do usuário (UX) perfeita e em várias etapas, desde a criação de dados até a fácil navegação no aplicativo, sem exigir uma única linha de código.

Hola! App Builder agora suporta espanhol

App Builder agora oferece localização em espanhol, tornando mais fácil para os usuários que falam espanhol navegar na superfície de design, caixa de ferramentas, painéis de propriedades e muito mais. Esta atualização garante uma experiência mais acessível e inclusiva, adaptando automaticamente a interface com base nas configurações ou preferências de idioma do seu navegador.

Introdução ao roteamento no nível filho com parâmetros de caminho e consulta

Temos o prazer de anunciar um grande aprimoramento no roteamento no App Builder— suporte total para roteamento no nível filho com parâmetros de caminho e consulta. Esse recurso apresenta a capacidade de configurar contêineres de exibições aninhados (saídas de roteador) dentro da hierarquia de aplicativos, permitindo que os desenvolvedores projetem estruturas de navegação de vários níveis sem esforço. Esteja você criando uma experiência de detalhes mestre (por exemplo) Customers → Orders → OrderDetails ou uma interface do usuário profundamente aninhada, App Builder agora oferece suporte a hierarquias de roteamento de até cinco níveis de profundidade, completas com aprimoramentos de interface do usuário para os Seletores de Navegação e Destino para uma configuração mais intuitiva.

Parâmetros de consulta, lógica de navegação e comportamento de tempo de execução
Além dos parâmetros de caminho, App Builder agora inclui suporte robusto a parâmetros de consulta para todas as plataformas, incluindo estratégias para lidar com vários parâmetros com o mesmo nome. A lógica de geração de código foi atualizada para refletir o uso correto do parâmetro de consulta e se integra perfeitamente às ações de roteamento. Além disso, o comportamento de navegação foi aprimorado: navegar até a raiz (/) agora detalha automaticamente a rota válida mais profunda, parando apenas quando um parâmetro necessário é indefinido. Esse comportamento de roteamento inteligente aprimora a experiência de visualização do aplicativo e define a base para a criação de fluxos de navegação complexos e controlados por dados com confiança.

Novas variantes de botão de ícone: contido e delineado

App Builder agora oferece suporte às variantes Contido e Contornado para o componente Botão de ícone, alinhando-o com as opções disponíveis em nossos sistemas de design e kits de interface do usuário Figma. Esses novos estilos oferecem maior flexibilidade para combinar com o tom visual do seu aplicativo, quer você esteja buscando uma aparência ousada e preenchida ou um contorno minimalista. A atualização fornece suporte total em toda a plataforma, incluindo configuração de tempo de design na interface do usuário do App Builder, geração de código precisa com definições de componentes atualizadas e importação contínua de Figma para manter um fluxo consistente de design para código.

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

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.