App Builder versão com grade dinâmica, suporte a dados hierárquicos de grade de árvore e muito mais

A atualização de dezembro do ​^{App Builder TM} está aqui e inclui atualizações significativas. Se esta é a primeira vez que você aprende sobre App Builder, deixe-me compartilhar rapidamente por que você deve considerá-lo como uma ferramenta fundamental no processo de desenvolvimento de aplicativos para sua organização:

• Um construtor de aplicativos visuais – a plataforma unificada para gerentes de produto, designers e desenvolvedores.
• 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 produz Angular brilhantes, Blazor ou código Web Components (React em breve) a partir de seus arquivos de design Sketch ou Figma.

Tudo o que há de novo e empolgante no low-code App Builder da Infragistics

Grade dinâmica

A família do App Builder Grid está crescendo com mais um - Pivot Grid. Mesmo que o Grid seja adicionado apenas como um elemento de espaço reservado, na exportação você pode configurá-lo para somar e representar grandes dados multidimensionais em um formato de tabela cruzada. O resumo de dados pode ser classificado, agrupado ou filtrado de forma fácil e rápida. Esses dados podem incluir somas, médias e outras estatísticas.

Suporte de dados hierárquicos para o componente Grade de árvore

A versão anterior do TreeGrid tinha permissão para usar apenas coleções no nível raiz. Agora você pode:

• Vincular à estrutura de dados hierárquica– A propriedade do campo de dados é compatível com as próprias matrizes.

Consulte o exemplo de Suporte a Dados Hierárquicos para Grade de Árvore abaixo.

[
    {
        "EmployeeID": 9,
        "LastName": "Dodsworth",
        "FirstName": "Anne",
        "Orders": [
            {
                "OrderID": 11058,
                "ShipAddress": "Forsterstr. 57",
                "ShipCity": "Mannheim"
            }
        ],
....
    }
]

• Vincular a uma fonte de dados hierárquica autorreferenciada– A estrutura do objeto (os campos de dados) dos registros na matriz aninhada é a mesma da matriz raiz.

Veja o trecho de código abaixo. Lembre-se de que, com base na fonte de dados fornecida, a Grade de Árvore escolherá automaticamente como vincular. Da associação com primaryKey e foreignKey à associação com ChildDataKey e vice-versa.

[
    {
      "ID": 1,
      "Age": 55,
      "Name": "Johnathan Winchester",
      "Employees": [
        {
          "ID": 2,
          "Age": 43,
          "Name": "Michael Burke"
        }
      ]
    }
]

Componente Combo: Geração de Código

Agora você pode gerar componentes Combo para Angular e Web Components. O componente Combo representa uma lista suspensa que fornece funcionalidades editáveis, permitindo que os usuários escolham uma opção em uma lista predefinida.

Kit e plug-in Figma Indigo.Design UI

Nossa história de design para código está ficando maior e melhor! O novíssimo Figma Indigo.Design UI Kit for Material mapeia nosso Ignite UI for Angular, Blazor e Web Components conjunto de ferramentas de interface do usuário para redefinir completamente os processos de desenvolvimento de design. Agora você obtém um conjunto robusto de componentes, padrões, estilos e opções de personalização, permitindo que você importe protótipos ou qualquer tipo de tela projetada em Figma e transforme-os em código limpo.

Agora você pode baixar o Figma UI Kit, Plugin ou Sample Apps.

Lembrar detalhes de autorização ao se conectar a pontos de extremidade da API REST

Agora você pode definir sua credencial para ser armazenada com segurança. Na caixa de diálogo Autenticação, ao configurar endpoints REST, perguntaremos se devemos "Lembrar detalhes de autorização". Isso também se aplica quando você está adicionando uma URL e fornece uma autenticação de cabeçalho.

• Se você não tiver 'verificado' a opção, ao abrir o aplicativo pela segunda vez, não teremos acesso para acessar a url/arquivo público, portanto, forneceremos dados fictícios com base no esquema de dados armazenado quando a fonte de dados foi configurada pela primeira vez.
• Se você concordar em "lembrar detalhes de autenticação", nós os armazenaremos criptografados em nossos servidores.

Especificidades de dados fictícios

Estamos armazenando os dados simulados no armazenamento local do navegador. Quando os dados fictícios forem gerados pela primeira vez, nós os armazenaremos na sessão localhost. LocalStorage não tem tempo de expiração. Portanto, para limpá-lo, etapas manuais devem ser tomadas.

Aplicativo de amostra de filme

Foi adicionado um novo aplicativo de exemplo que expõe uma interface do usuário para funcionalidade para reserva e estreias de filmes. O aplicativo também está mostrando o uso de componentes como Gaveta de Navegação, DropDown, Tab, Selecionar, Seletor de Data, Lista, Botões, Avatares e muitos layouts bonitos.

Artigos Interessantes

Confira a lista de artigos que temos trabalhado ultimamente:

• Reduza a complexidade do software corporativo de missão crítica com ferramentas de baixo código
• O que é desenvolvimento rápido de aplicativos
• Soluções de design para código explicadas
• Bibliotecas de componentes da interface do usuário – Build vs Buy

Embrulhar

Resumidamente, esses são todos os novos recursos e componentes que você verá na atualização de junho do App Builder. Se precisar de mais detalhes, recomendamos que você confira nosso:

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

Claro, se você acha que perdemos alguma coisa ou tem uma pergunta, basta nos enviar uma mensagem para zkolev@appbuilder.dev.

Por fim, se você quiser ver todos os novos ajustes e atualizações empolgantes em App Builder com o lançamento mais recente do produto Infragistics Ultimate 22.2, assista à rápida visão geral abaixo.