Lançamento do App Builder 23.1

Com o lançamento de hoje, estamos muito entusiasmados em colocar o Infragistics App BuilderTM Ultimate 23.1 em suas mãos. Novos recursos e controles de UI, mais capacidades, melhores processos de design-desenvolvimento e experiência interativa de visualização de dados. Tudo está incluído.

Vamos examinar cada atualização em mais detalhe.

Ou, se preferir, você pode assistir a este breve resumo do lançamento do App Builder 23.1.

Templating de Colunas da Grade – cabeçalho, exibição e edição

Tenho o prazer de compartilhar que agora expostos uma maneira de criar seu próprio Template de Coluna para cada uma das Colunas da Grade. Imagine que você tenha uma fonte de dados que possui campos diferentes para Primeiro Nome e Sobrenome, e detalhes de Endereço como – rua, cidade e código postal. Agora você pode combinar todos eles em um valor de Exibição de Célula e reduzir as colunas visíveis. Alguns exemplos adicionais podem ser encontrados abaixo:

• Os campos de dados de URL agora podem ser associados a um componente de Imagem personalizado.
• Exiba um componente de Classificação e forneça uma pista visual sobre certos valores numéricos.
• Forneça uma forma mais visual de indicar que uma coluna contém números de telefone.

Os itens acima são apenas alguns exemplos do poder que o templating de Colunas oferece. A imagem abaixo mostra como os exemplos acima funcionam em ação.

Demonstração ao vivo do recurso de Templating de Coluna.

O Cabeçalho da Coluna da Grade, Célula e Edição de Célula são as opções de templating disponíveis.

Painel do Reveal

Agora você pode adicionar um Painel do Reveal diretamente da Caixa de Ferramentas do App Builder e especificar sua URL para o Reveal Server SDK que hospeda seus dados. Considere o App Builder como uma aplicação Cliente que recebe uma baseURL, que é o endpoint do seu servidor a partir do qual o WYSIWYG App Builder enviará/receberá as solicitações e respostas.

Quando o Painel do Reveal é carregado, você pode especificar um nome de Painel dentre as quatro opções disponíveis – Marketing, Vendas, Campanhas e Manufatura. Nós próprios hospedamos nosso próprio servidor apenas para fins de teste. Ao exportar, você receberá uma referência ao nosso Servidor de Teste “https://samples.revealbi.io/upmedia-backend/reveal-api/” (URL base), expondo apenas o painel de Marketing para fins de demonstração.

Confira esta aplicação ao vivo que demonstra o poder do Reveal.

Visão Geral do Reveal

Reveal é uma solução de inteligência de negócios criada especificamente para análises incorporadas. Com o Reveal, você pode:

• Fornecer painéis de autoatendimento completos e relatórios modernos.
• Usar em qualquer framework JavaScript (como React, Angular, Vue JS, Web Components ou Blazor), aplicação Windows Forms ou WPF.
• Personalizar a UX para corresponder à sua experiência de marca.
• Conectar a praticamente qualquer fonte de dados para popular seus painéis.
• Implantar em qualquer nuvem – pública ou privada – ou em seus próprios servidores locais em um backend Java, ASP.NET ou Node.js.

O Reveal possui 2 componentes principais que permitem a entrega de painéis para sua aplicação cliente

Auto-Layout do Figma

Com o Kit UI do Figma atualizado agora, se um designer usar Auto-Layout no Figma para criar um design, o parser do App Builder utilizará isso e considerará construir o layout do app. Se Auto-Layout não for usado, o parser usará o layout absoluto como padrão.

Aqui você pode encontrar mais sobre Usando auto-layout do Figma com App Builder para acelerar Design to Code

O Auto-Layout do Figma é uma implementação de layouts de Flexbox dentro do Figma. Embora seja exposto um pouco diferente aos designers, a intenção é conectar layouts projetados com Layouts da Web. Isso foi explicado neste artigo.

Quais são os benefícios?

• O designer ativa Auto-Layout ao criar designs no Figma, começando com a configuração de todo o Artboard como Auto-Layout.
• Faz uso de Frames aninhados, também com Auto-Layout ativado em cada Frame.

Vejamos o seguinte exemplo de design para ver como os frames podem ser mapeados para layouts no App Builder.

Ações CRUD da Grade

As funcionalidades da Grade do App Builder estão crescendo com mais uma – ações Criar, Ler, Atualizar e Deletar da Grade com chamadas de Web API. Agora você pode conectar essas ações aos botões de ação de edição da Grade e aproveitar as atualizações de Web API em tempo real. Após a geração de código, o App Builder criará os serviços necessários para manipular as chamadas da API para Criar, Obter, Atualizar e Deletar um recurso.

Se a Grade estiver vinculada a uma tabela de Clientes (caminho Swagger Imagem 1), a seção Data Interactions será carregada com os métodos disponíveis para clientes ao adicionar tal interação (Imagem 2).

Aqui você pode ler mais sobre Ações CRUD da Grade.

Suporte a Ligação de Iteradores Hierárquicos

Aplicável a componentes como Árvore, Cartões e Contêineres. O exemplo abaixo mostra como uma Árvore simples e Grade de Árvore podem se vincular a fontes de dados com uma estrutura hierárquica.

Aqui você pode ler mais sobre o suporte a ligação de iteradores hierárquicos.

Recurso de Agregações de Gráfico

Agora você pode agrupar e agregar dados em um gráfico de Categoria quando rótulos repetidos estão presentes. A ideia básica deste recurso é muito semelhante a uma grade. Digamos que você queria agrupar por Categoria (mercearia, lar, restaurantes) e então obter o valor máximo da coluna Valor. Você poderia atribuir esses dados ao gráfico de categoria e depois especificar o grupo para Categoria e resumos para valor máximo.

Leia mais sobre o novo recurso de agregações de gráfico.

Nova Versão On-Premises

O software App Builder On-Premises atende às necessidades únicas de Segurança de Dados, Manutenção, Armazenamento e Desenvolvimento de Software de cada organização. A versão on-premises do App Builder oferece uma forma fácil para as organizações acessarem plataformas como nuvem ao permitir que usem sua própria instância e a executem em sua própria infraestrutura e para ser acessível apenas por pessoal interno.

Novos Aplicativos de Exemplo

Abaixo você pode ver as aplicações que foram adicionadas, expondo uma UI para uma variedade de funcionalidades.

Portal de Aprendizagem

Aplicativo de gerenciamento de aprendizagem para rastrear progresso em cursos baseados em tópicos ou instrutores populares. Recursos de listas personalizadas vinculadas ao REST e layouts adaptativos.

Gerenciamento de Inventário

Um painel de relatórios para gerenciar níveis de inventário e revisar produtos em estoque. Usa navegação lateral personalizada para roteamento e gráficos de categoria para relatórios de desempenho.

Documentação do App Builder

A documentação é vital para cada produto, e investimos um tempo considerável em melhorar nossa documentação de ajuda. Adicionamos tópicos para cada um dos novos componentes:

• Acordeão – Os Acordeões geralmente são usados para gerenciar uma grande quantidade de informações em um espaço compacto e para permitir que os usuários se concentrem em peças específicas de informações de forma seletiva
• Gráfico de Pizza – Cada seção, ou fatia de pizza, tem um comprimento de arco proporcional ao seu valor de dados subjacente. As categorias são mostradas em proporção a outras categorias com base na porcentagem de seu valor do valor total sendo analisado como partes de 100 ou 100%. Os Gráficos de Pizza são apropriados para pequenos conjuntos de dados e são fáceis de ler e entender.
• Classificação – O componente permite que os usuários apliquem uma classificação a um item ou experiência, como um produto, serviço, página, outra entidade e muito mais. A Classificação pode exibir a classificação por estrelas de um único usuário ou agregada, e é usada para permitir que os usuários definam sua própria classificação por estrelas.
• Stepper – Um elemento de UI útil que pode ser usado para exibir um processo ou fluxo de trabalho de forma passo a passo, permitindo ao usuário entender facilmente onde ele está no processo e quais passos permanecem. Atualmente, apoiamos o componente Stepper apenas no Figma. No Sketch, será adicionado em breve.
• Árvore – Usada como uma representação visual da relação hierárquica entre categorias, apresentada em uma estrutura de lista. O componente Árvore suporta três densidades de exibição – Confortável, Aconchego e Compacto. Uma dica rápida: Certifique-se de alternar o estado do Ícone de Expandir para “Expandido” quando você tiver nós de Árvore expandidos. Se alguns dos filhos (mas não todos) de um Nó de Árvore forem selecionados, certifique-se de alternar o estado da Caixa de Seleção do nó pai para um estado indeterminado:

Também atualizamos tópicos relacionados a:

• Estilo – O App Builder fornece meios elaborados para estilizar todos os 60+ componentes de UI que também são mapeados para controles Ignite UI for Angular. O mecanismo de tema em nosso produto Angular permite criar temas de cores personalizados que podem restyler todo o produto em apenas algumas linhas de código. App Builder também implementa esses mecanismos de tema para permitir que os usuários alterem a aparência completa de seus apps com apenas alguns cliques.
• Padrões de UI – Existem 180+ Padrões de UI aprimorados com o mesmo comportamento de design responsivo da web e recursos de tema. Os Padrões de UI podem ser encontrados espalhados em páginas separadas da biblioteca no Figma e Sketch. Abaixo está um trecho de alguns dos padrões de lista, como uma lista de contatos, listas pesquisáveis e filtráveis e estados vazios de lista quando nenhum resultado correspondente é encontrado:

Outras Melhorias

• Adicionada propriedade Align-self para sobrescrever V.align e H.align definidos no layout pai (CSS Flex-box).
• Adicionada propriedade Border-radius para definir Arredondamento para componentes de layout Linha/Coluna/Absoluto
• Mostrar o nome do app como título da página no navegador
• Selecionar todos os campos de dados ao adicionar uma nova coleção de dados
• Adicionada opção para maximizar a caixa de diálogo Criar novo aplicativo
• Melhoradas heurísticas de layout para criar layouts CSS Flexbox a partir de designs do Figma que usam Auto-layout.
• Atualizado plugin Figma para criar apps usando paleta de tema e tema Escuro.
• Extrair automaticamente SVG e PNG como ativos de imagem ao criar apps a partir de arquivos de design do Figma.
• Menu unificado em App Builder para baixar recursos do sistema de design e entrar em nosso canal do Discord.
• Nova geração de código para componentes Combo, Select e Dialog (Blazor)
• Novo toggle para exportação de código sem licença
• Correções de bugs e melhorias gerais

Conclusão!

Como você pode ver, há muitos novos recursos e atualizações com o lançamento do Infragistics Ultimate 23.1 que melhorarão significativamente, simplificarão e modernizarão a forma como você constrói beleza e simplicidade, um app de cada vez.

Temos detalhes para cada peça deste lançamento e você pode verificá-los aqui:

• Angular – Changelog & Atualizações
• App Builder – Log de Alterações & Novidades

Se você precisar de mais detalhes, encorajamos você a verificar:

• Canal do Discord.
• Discussões do GitHub.
• Roteiro
• Canal do YouTube
• Twitter

Para experienciar tudo, visite seu portal de cliente e obtenha a versão mais recente. Como sempre, estamos sempre entusiasmados em receber seus comentários e ouvir o que você quer adicionar ou recomendar. Portanto, envie um e-mail para mim em zkolev@appbuilder.dev e deixe-me saber como podemos ajudá-lo a continuar fornecendo valor aos seus clientes com Infragistics.

Código baixo