App Builder Lançamento com ações CRUD de grade, suporte a vinculação de dados aninhados, agregações de gráficos de categorias e muito mais

A atualização de fevereiro do ​^{App Builder TM} está aqui e está repleta de novos recursos interessantes. Se você ainda não ouviu falar App Builder, deixe-me dizer por que é uma ferramenta obrigatória para o processo de desenvolvimento de aplicativos da 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

Aqui está um rápido resumo do que há de novo e empolgante em App Builder

Características

• Configure os métodos REST API POST/PUT/DELETE ao criar uma fonte de dados com base na definição do OpenAPI.
• Nova ação de dados para criar, atualizar e excluir registros no componente Grade.
• Use dados de tipo hierárquico em Tree-Grid e Tree​ ​component.
• Adicionado suporte para associação de dados aninhada ao repetir componentes com base em dados hierárquicos.
• Agrupe e agregue dados no gráfico de categoria quando rótulos repetidos estiverem presentes.
• Adicionados dois novos aplicativos de amostra– Portal de aprendizagem e Gerenciamento de inventário.

Melhorias

• Adicionada a propriedade Align-self para substituir V.align e H.align definidos no layout pai (CSS Flex-box).
• Adicionada a propriedade Border-radius para definir o arredondamento para componentes de layout de linha/coluna/absoluto​
• Mostrar o nome do aplicativo como título da página no navegador
• Selecione 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​
• Correções de bugs e melhorias gerais

Ações CRUD de grade

As funcionalidades do App Builder Grid estão crescendo com mais uma – ações de Criar, Ler, Atualizar e Excluir com chamadas de API Web. Agora você pode conectá-los aos botões de ação de edição de grade e aproveitar as atualizações da API Web em tempo real. Após a geração do código, o App Builder criará os serviços necessários para lidar com as chamadas de API para criar, obter, atualizar e excluir um recurso.

Se a Grid estiver vinculada a uma tabela de Clientes (caminho do Swagger, Imagem 1), a seção Interações de Dados será carregada com os métodos disponíveis para Clientes, ao adicionar tal interação (Figura 2).

Imagem 1

Imagem 2

No exemplo abaixo, você verá como usamos um serviço de API Web da Northwind para realmente obter todos os clientes, escolher um cliente específico com CustomerID "BERGS" e atualizar seu CompanyName para "Testando a atualização". O App Builder pode fazer uma solicitação de dados real para alterar os dados remotos se o usuário final permitir isso por meio da janela de prompt (Ativar edição ao vivo). Lembre-se de que há dois estados de acesso a dados na visualização do aplicativo. A parte do editor/usuário autenticado do espaço de trabalho será solicitada diretamente com os estados de alterações em tempo real (imagem abaixo). O usuário do visualizador/não parte do workspace será notificado de que não tem acesso à API Web real e, em vez disso, usará dados fictícios.

Uma barra de notificação será exibida na parte inferior da página avisando o usuário final de que qualquer alteração feita atualizará os dados remotos. Você pode desativar esse recurso usando o botão Desativar ação de edição ao vivo

Uma barra de notificação será exibida na parte inferior da página avisando o usuário final de que qualquer alteração feita atualizaria os dados remotos:

Este é todo o processo CRUD em ação:

É assim que o código gerado se pareceria:

export class SwaggerNWindService {
  constructor(private http: HttpClient) { }

  public postCustomer(data: any): Observable<any> {
    const options = {
      headers: {
        Authorization: 'Bearer <auth_value>',
      },
    };
    const body = data;
    return this.http.post(`${API_ENDPOINT}/Customer`, body, options);
  }
  public putCustomer(data: any): Observable<any> {
    const options = {
      headers: {
        Authorization: 'Bearer <auth_value>',
      },
    };
    const body = data;
    return this.http.put(`${API_ENDPOINT}/Customer`, body, options);
  }
  public deleteCustomer(id: string): Observable<any> {
    const options = {
      headers: {
        Authorization: 'Bearer <auth_value>',
      },
    };
    return this.http.delete(`${API_ENDPOINT}/Customer/${id}`, options);
  }
  public getCustomer(): Observable<any> {
    const options = {
      headers: {
        Authorization: 'Bearer <auth_value>',
      },
    };
    return this.http.get(`${API_ENDPOINT}/Customer`, options);
  }
}

Suporte à associaçã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 uma Grade de Árvore podem se associar a fontes de dados com estrutura hierárquica.

Vamos revisar o componente Árvore, você notará como usamos a opção Repetir dados para vincular os elementos raiz e filho a um nível de hierarquia específico. Como a árvore é um componente declarativo e não possui vinculação de entrada de dados (no nível raiz da árvore), nós a declaramos especificando a hierarquia do nó e iterando por meio do conjunto de dados hierárquico. Os nós devem ser vinculáveis a um modelo de dados para que seus estados expandidos e selecionados também sejam refletidos nos dados subjacentes.

Recurso de agregações de gráficos

Agora você pode agrupar e agregar dados no gráfico de categoria quando rótulos repetidos estiverem presentes. A ideia básica para esse recurso é muito semelhante a uma grade. Digamos que você queira agrupar por Categoria (mantimentos, casa, restaurantes) e, em seguida, obter o valor máximo da coluna Valor. Você pode atribuir esses dados ao gráfico de categorias e, em seguida, especificar o grupo como Categoria e resumos para o valor máximo.

Outros recursos:

• Permitir que os usuários definam agrupamento (agregado) para valores de campo de categoria, de modo que apenas rótulos de categoria exclusivos sejam mostrados no eixo horizontal
• Selecionar a opção Agregar aplicará automaticamente uma agregação para todos os campos de valor selecionados. O padrão é "SUM". A remoção da agregação para rótulos de categoria removerá a agregação de todos os campos de valor.
• Os usuários podem modificar individualmente a função de agregação para campos de valor. Por exemplo,SOMA da Quantidade -> AVG da Quantidade, mas não pode ser removido individualmente
• Enquanto a agregação estiver habilitada para o campo de categoria, qualquer novo campo de valor adicionado, que não foi incluído anteriormente, será adicionado com uma função de agregação padrão.
• Os campos de cadeia de caracteres também podem ser adicionados como valor, mas isso ativará automaticamente a agregação e definirá a função de agregação como COUNT para este campo
• Habilite SORT para qualquer campo (categoria ou valor). Pode subir / descer / nenhum. Apenas um dos campos pode ser classificado. Se um campo de valor for classificado asc. e o usuário habilitar a classificação em um campo de valor ou rótulo de categoria diferente, a classificação anterior será removida e SORT será aplicado no campo selecionado mais recentemente. A classificação segue a ordem SORT ASC -> SORT DESC. -> NENHUM.
• Limitação: o mesmo campo não pode ser adicionado mais de uma vez. Portanto, os usuários não poderão adicionar a SOMA de ProductSales e a AVG de Product Sales juntas.

Novos aplicativos de amostra

Um novo aplicativo de exemplo foi adicionado que expõe uma interface do usuário para uma variedade de funcionalidades.

Portal de Aprendizagem

Aplicativo de gerenciamento de aprendizado para acompanhar o progresso dos cursos com base em tópicos ou instrutores populares. Apresenta listas personalizadas vinculadas a REST e layouts adaptáveis.

Gerenciamento de estoque

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

Nova versão local

App Builder servidores de software On-Prem que cada organização precisa de necessidades exclusivas em relação à segurança de dados, manutenção, armazenamento e desenvolvimento de software. A versão local do App Builder fornece uma maneira fácil para as organizações acessarem essa plataforma baseada em nuvem com facilidade, permitindo que usem sua própria instância e a executem em sua própria infraestrutura e sejam acessíveis apenas por pessoal interno.

Pré-requisitos e instalação no local.

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

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
• Canal do YouTube

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