Lista

1. Geral

O componente LISTA é uma ferramenta ideal para diversas aplicações, incluindo operações CRUD (Create, Read, Update, Delete) e exibição de dados analíticos. A lista permite a configuração de diferentes formatos de exibição através de templates e oferece uma ampla gama de opções de personalização para atender às necessidades específicas dos usuários.

2. Célula

Na LISTA, a célula é a primeira linha ou coluna da lista, que serve como um modelo para todas as outras linhas e colunas subsequentes. Essa célula inicial é onde os componentes são adicionados, configurados, e as variáveis da VIEW são atribuídas para exibir os dados.

Modelo para Linhas Subsequentes: A célula inicial define o layout e a estrutura que serão replicados em todas as outras linhas ou colunas da lista. Qualquer configuração de design ou componente feita nessa célula será automaticamente aplicada em toda a lista.

Componentes da Célula: Dentro da célula, você pode adicionar vários componentes, sendo eles, label, imagem, videoplayer ou botão. Esses componentes são configurados para exibir informações específicas para cada item na lista, utilizando as variáveis atribuídas.

3. Como Configurar

Arraste para a Tela: Arraste o componente LISTA para a tela onde deseja exibir os dados.

3.1. Escolha um Template

Você pode escolher entre vários templates predefinidos ou começar com uma lista em branco para personalização completa. Abaixo estão os templates disponíveis, lembrando que esses modelos, com o tempo podem sofrer algumas alterações:

• Lista Simples: Ideal para operações básicas de listagem e gerenciamento de dados, como um CRUD padrão. Este template é simples e direto, perfeito para aplicações que necessitam de uma abordagem minimalista.

• Lista Simples com Imagem: Além dos dados textuais, este template permite a inclusão de imagens para cada item, o que é ideal para catálogos de produtos, perfis de usuários, ou qualquer aplicação que necessite de uma representação visual.

• Lista Simples com Valor (Mobile): Exibe valores numéricos associados aos itens da lista, tornando-o ideal para relatórios financeiros ou listagens onde é importante destacar números ou valores.

• Lista Duas Métricas (Mobile): Este template é projetado para a comparação de duas métricas diferentes por item. Ele é particularmente útil em análises comparativas, como a avaliação de desempenho ano a ano.

• Lista Múltiplos Atributos (Mobile): Suporta a exibição de múltiplos atributos por item, permitindo uma visão detalhada e rica dos dados. Ideal para exibir informações detalhadas de itens complexos.

• Lista Tasks (Mobile): Focado no gerenciamento de tarefas, este template inclui funcionalidades para marcar itens como concluídos ou para editá-los. É ideal para listas de tarefas, projetos ou quaisquer atividades que requeiram acompanhamento de status.

3.2. Dados

Configurar a VIEW: Configure a VIEW através de SQL, VIEW Análise de Dados ou VIEW de Cadastro caso queira alimentar os dados da lista com informações provenientes do banco de dados.

Dados: Ao configurar a VIEW, os dados são estruturados para serem apresentados na lista, mas eles ainda não aparecerão automaticamente nos componentes internos da lista (como imagem, label, videoplayer ou botão). Após configurar a VIEW com os dados desejados, é necessário associar esses dados às variáveis específicas de cada componente interno da lista. Esse processo é feito na seção de “Personalizar” do menu de configurações da LISTA

3.3. Personalizar

3.3.1. Como entrar e sair na área de configuração da célula

Dê um duplo clique em qualquer lugar da lista para ativar o modo de edição. Quando ativado, a lista será destacada com uma borda roxa e receberá o foco. Para sair do modo de edição, basta clicar duas vezes em qualquer área fora da lista. Enquanto estiver no modo de edição, você pode arrastar componentes para dentro da célula da lista e configurar cada um individualmente.

3.3.2. Ordenação e Espaçamento

Essa funcionalidade permite organizar os itens da lista de acordo com a necessidade do usuário. As opções são divididas em três tipos principais:

• Livre: Organiza automaticamente os itens em um formato de grade, distribuindo-os em linhas e colunas.

• Horizontal: Alinha os itens lado a lado em uma única linha. Essa opção é útil para exibir informações sequenciais ou quando o espaço horizontal é privilegiado, como em menus de navegação ou listagens horizontais.

• Vertical: Alinha os itens em uma única coluna, verticalmente. É a escolha padrão para listas que priorizam a leitura linear, como relatórios, tabelas de dados ou listas de tarefas.

Além disso, pode ser configurado a direção da organização dos itens:

• Padrão: Os itens são alinhados de cima para baixo.

• Baixo para cima: Os itens são organizados a partir da parte inferior para a superior. Essa orientação é comumente utilizada em contextos como chats, onde as mensagens mais recentes aparecem na parte inferior, e novas mensagens "sobem" à medida que são adicionadas.

Por fim, o campo “Espaço entre células” permite definir a distância entre os itens em pixels, possibilitando uma apresentação mais espaçada ou mais compacta, dependendo do layout desejado.

3.3.3. Variáveis da Lista

Dentro dos componentes da lista, você pode incluir variáveis para que ele receba um valor dinâmico da VIEW. Para isso, escreva dentro do componente desejado o nome da variável desejada no formato $nomevariável.

As variáveis da lista conectam os dados da VIEW aos componentes visuais do template escolhido. Em cada variável, é possível relacionar uma coluna da VIEW que será exibida na lista, como o título, imagem, valor, etc.

3.3.4. Célula Dinâmica

A funcionalidade de “Célula Dinâmica” permite personalizar a exibição de itens em uma lista com base em valores retornados pela VIEW, possibilitando a criação de células distintas para diferentes condições ou categorias. Essa flexibilidade é ideal para listas que requerem uma exibição personalizada para cada item, dependendo de atributos específicos.

Como Funciona: Ao ativar a Célula Dinâmica, é necessário selecionar uma coluna da VIEW que servirá como base para diferenciar os itens. Essa coluna deve retornar valores numéricos, como IDs ou números, que serão usados para determinar automaticamente qual célula será aplicada a cada item na lista. Em seguida, é possível criar e personalizar células distintas, adaptando cada uma delas de forma independente.

Configuração de Células Dinâmicas: 

• Ativação: Na aba de personalização da lista, habilite a opção Célula Dinâmica. Em seguida, selecione a coluna da VIEW que servirá de referência para decidir o tipo de célula de cada item.

• Criação de Células: Para cada valor numérico da coluna da VIEW selecionada, crie uma célula distinta clicando em “Adicionar”. Cada célula funciona como uma lista em branco, permitindo personalização total.

• Layout: Arraste componentes (como labels, botões, videoplayer ou imagens) para dentro de cada célula e configure-os individualmente. Ajuste também atributos visuais, como cor de fundo, bordas, e sombras, para destacar cada célula de acordo com o contexto.

• Variáveis: As variáveis utilizadas em cada célula são únicas, sendo configuradas exclusivamente para aquela célula, garantindo que os dados da VIEW sejam exibidos corretamente para cada condição.

• Comportamento Dinâmico: Durante a exibição da lista, cada item será associado automaticamente à célula correspondente, com base no valor retornado pela VIEW. Dessa forma, itens com valores diferentes terão células personalizadas, mas coexistindo na mesma lista.

4. Componentes permitidos na Lista

O componente LISTA suporta quatro tipos principais de componentes: Imagem, Label, Videoplayer e Botão. Cada um desses componentes pode ser configurado e personalizado de acordo com as necessidades da aplicação.

4.1. Configurar Componentes e interações na Lista

No modo edição, é possível arrastar vários componentes para dentro da célula da lista. Cada componente possui uma seção específica de personalização e interações, permitindo que você configure cada item individualmente. Apesar da flexibilidade em personalizar componentes e adicionar interações distintas para cada um, a lista opera com uma única VIEW associada a todos os componentes. Isso significa que, embora cada componente possa ter sua própria lógica de interação e personalização, todos eles seguem os dados provenientes da VIEW principal da lista.