Função

A lista avançada é um componente que permite a exibição de dados de forma organizada, semelhante a grade utilizada nos formulários web, porém adaptada para os dispositivos móveis. A lista avançada permite excluir ou editar registros, exibir imagens e estilizar diversos subcomponentes internos.

Figura 1 - Exemplo do componente em sua configuração básica rodando no aplicativo

Principais propriedades

Na tabela abaixo estão descritas as principais propriedades para o funcionamento básico do componente.

Aba de Estilos

Na tabela abaixo estão descritos os tipos de estilos disponíveis para o componente Lista Avançada. Veja outros detalhes no tópico Estilo.

Configuração

A janela Configuração possui diversas propriedades para a personalização do componente. Selecione o componente no editor visual para exibir suas propriedades na aba lateral, clique no botão “...” da propriedade Configuração para abrir a janela.

Aba Geral

A aba Geral (Figura 2) define as configurações mais amplas da Lista avançada, como fonte de dados, tamanho e modo de edição da lista.

Figura 2 - Aba geral da janela Opções da lista

• Fonte de dados: seleciona ou cria uma fonte de dados para alimentar o componente. Para saber mais sobre como configurar uma fonte de dados, acesse o link ao lado: Fonte de Dados.

  • "+": adiciona uma fonte de dados.

  • "...": configura uma fonte de dados.

• Altura: define a altura do item da lista em px;

• Exibir campo imagem como: seleciona como a imagem da lista avançada poderá ser exibida:

  • Não exibir: não exibe a imagem nos itens da lista;

  • Thumbnail: exibe a imagem no formato quadrado com as bordas arredondadas;

  • Avatar: exibe a imagem no formato circular.

• Ícone: selecione um ícone que será mostrado no(s) item(ns) da lista. O botão bola … ao lado do campo abre a janela de ícones para sua seleção;

• Posição do ícone: seleciona a posição em que o ícone será mostrado no item, podendo ser esquerda ou direita.

• Modo de exibição da lista: seleciona um modelo de como a lista poderá ser renderizada:

  • Padrão: o modo default da lista, sem muita configuração no estilo - algo bem básico;

  • Lista em destaque: adiciona bordas finas ao redor de cada item;

  • Cartão: além de possuir bordas finas ao redor de cada item, ele possui um leve sombreamento ao redor da lista.

• Obter valor do campo como: define como serão obtidos os valores dos campos.
  • Chaves: retorna o id do item selecionado.
  • Objeto: retorna um array de objeto dos itens selecionados.
• Habilitar modo multisseleção: permite que mais de um item seja selecionado por vez. Após selecionar um item, o botão "limpar seleção" é exibido ao lado do campo de pesquisa.

Aba Coluna

A aba contém os campos que serão exibidos para cada item da lista e são obtidos através da fonte de dados associada na aba Geral (tópico acima). Se a coluna Visível não estiver marcada com um "X", o campo não será visualizado pelo usuário. Além disso, a ordem dos campos na aba Colunas influenciará na ordem dos campos exibidos para o usuário em cada item da lista. Por exemplo, na figura 2.1 existem os campos "Id", "email" e "name", porém a coluna Visível não está marcada para "Id", dessa forma, o usuário visualizará o e-mail como o título do item e os demais campos (do tipo Banco de dados) como subtítulo.

A Lista avançada também permite adicionar botões que são acessíveis quando o usuário deslizar um item da direita para esquerda. Na figura 2.2, o segundo item foi arrastado exibindo os botões "info", "edit" e "remove". Acesse o tópico Janela Coluna para mais detalhes sobre os botões do item.

Figura 2.1 - Aba de customização dos itens da lista avançada

Botões

1. Ordenadores: altera a posição da coluna selecionada na Lista;

2. Edição: abre a janela Coluna para personalizar a coluna ou botão selecionado;

3. Excluir: apaga a coluna selecionada.

4. Segurança: abre a janela de seleção dos permissionáveis com acesso de visualização ou edição para a coluna selecionada na Lista Avançada.

• Remover colunas: exclui todas as colunas listadas;

• Obter colunas da fonte de dados: recupera todas as colunas excluídas e que fazem parte da fonte de dados;

• Adiciona coluna: abre a janela Coluna para adicionar uma nova coluna personalizada.

Colunas

• Tipo de coluna: informa se a coluna é do tipo Banco de dados, Botão de comando ou Botão customizado.

• Campo: informa o nome do campo na fonte de dados ou o comando do evento, no caso de botão.

• Cabeçalho: título do campo (permite internacionalização).

• Visível: define os campos que serão exibidos na lista.

• Pesquisável: define os campos que podem ser pesquisados pelo usuário.

A figura 2.2 mostra o componente com o modo multi seleção habilitado, ícone definido e o botão personalizado "info" adicionado. O segundo item foi arrastado para esquerda, exibindo os botões: Info, Edit e Remove.

Figura 2.2 - Componente lista avançada personalizada

Janela Coluna

Para adicionar ou editar uma coluna ou botão customizado, basta clicar no botão Adicionar coluna ou Edição (item 2 da figura 2.1) na aba Colunas da edição da lista avançada. Os botões customizados são visualizados quando o usuário desliza um registro para esquerda (Figura 2.2).

Figura 2.3 - Janela de adição e/ou edição de colunas com os campos de Banco de Dados

As opções presentes em tipos de coluna são botão de comando, botão customizado e banco de dados.

• Botão de comando, são botões pré-configurados de exclusão e/ou edição do registro na lista avançada e possui os seguintes campos:
  • Selecione o tipo: define quais os botões que aparecerão na coluna, a forma como ocorrerá a edição (linha ou pop-up) é definido na aba Geral no campo Editável. As opções são: Editar, Excluir e Editar/Excluir;
  • Cabeçalho: título do campo (permite internacionalização);
• Botão customizado: adiciona botões com rótulo, ícone e evento customizados (Figura 2.4):
  • Rótulo:  define o rótulo do tipo da coluna;
  • Ícone: insere o ícone selecionado ao lado do rótulo (label) do botão;
  • Executar: abre a janela de configuração de evento que permite adicionar uma expressão, bloco de programação, relatório ou formulário view;
• Banco de dados: (Figura 2.3) seleciona os campos da fonte de dados integrado com o banco. 
  • Campo: seleção do campo da fonte de dados usado;
  • Campo exibição: seleciona o campo que será exibido na listagem ou deixe vazio para exibir o conteúdo do próprio campo;
  • Tipo: informa o tipo do campo que vem da fonte de dados;
  • Máscara ({0:d}): define uma máscara ao valor;
  • Pesquisável: define as colunas que terão consulta na pesquisa do usuário;
  • Visível na listagem: só serão listados na lista os campos que possuem essa opção marcada.

Figura 2.4 -  Janela de adição e/ou edição de botões customizados

Aba Template Principal

Essa aba exibe o template principal da lista avançada em formato high code e permite que o usuário realize alterações diretamente no código fonte do componente.

Para mais detalhes, acesse o tópico Configurações High-code.

Figura 2.5 - Aba template principal das opções da lista

Aba Barra de Pesquisa

Essa aba exibe o código referente a barra de pesquisa da lista avançada em formato high code, e permite que o usuário realize alterações diretamente no código fonte.

Para mais detalhes, acesse o tópico Configurações High-code.

Figura 2.6 - Aba barra de pesquisa das opções da lista

Estilo

A subaba Estilos, no menu lateral, permite alterar o CSS dos principais subelementos da Lista avançada utilizando o menu de estilo. Em todos os campos, com exceção do campo Em linha, é possível definir uma estilização diferente ao focar a área ou passar o mouse por cima da área.

Figura 3 - Opções de estilo da Lista avançada

Campos de estilo

Cada campo no menu estilo é responsável por definir o CSS de uma parte da lista avançada, abaixo descrevemos onde cada campo atua.

Figura 3.1 - Áreas influenciadas por cada campo do menu Estilo

1. Caixa de pesquisa: área que envolve a barra de pesquisa, entrada de texto da pesquisa e botão "Limpar seleção".
2. Barra de pesquisa: área antes e após da entrada de texto da pesquisa.
3. Input de pesquisa: entrada de texto da pesquisa.
4. Botão limpar: Botão limpar seleção, esse botão só é exibido quando pelo menos um item é exibido.
5. Checkbox: caixa de seleção dos itens.
6. Ícone: ícone exibido nos itens.
7. Título: área que exibe o primeiro campo da aba colunas (figura 2.1).
8. Subtítulo: área que exibe os outros campos da aba colunas (figura 2.1).
9. Item selecionado: área dos itens selecionados.
10. Lista: área dos itens não selecionados.
11. Em linha: área em torno dos itens da lista.

• Estilo do componente: engloba todo o componente.

Configurações high-code

Caso queira realizar alguma alteração no template da Lista Avançada, acesse a aba Template Principal ou Barra de Pesquisa da janela de Opções da Lista, como informado acima.

Figura 4 - Resultado das alterações feitas nas Figuras 4.1 e 4.2

Template da Lista

No exemplo da figura 4.1 alteramos o template do componente para exibir apenas conteúdo estático, facilitando a visualização dos seletores e elementos.

Figura 4.1 - Personalização do template principal da Lista Avançada

Abaixo temos informações sobre os seletores e elementos usados no template.

Seletores:

• <ion-list>: contêiner principal da lista avançada.
• <ion-item>: itens que irão compor a lista avançada.
  • Para exibir itens repetidos baseados em um datasource deve-se colocar o atributo ng-repeat="rowData in datasource"
• <ion-infinite-scroll>: gera o scroll infinito da lista avançada.

Classes CSS Utilitárias para <ion-item>:

• item: classe principal para o componente.
• item-avatar-left e item-avatar-right:  classes que permitem customizar itens com avatar e sua posição na tela (esquerda/direita).
• item-thumbnail-left e item-thumbnail-right:  classes que permitem customizar itens com thumbnail e sua posição na tela (esquerda/direita).
• item-icon-left e item-icon-right:  classes que permitem customizar itens com ícone e sua posição na tela (esquerda/direita).
• item-complex e item-right-editable:  classes que permitem customizar botões em uma lista com Swipe e sua posição na tela (esquerda/direita).

Algumas observações:

1. O template terá sempre máxima prioridade em relação aos parâmetros da lista avançada.
2. Para as imagens ficarem com o estilo correto, coloque o elemento <img> como o primeiro item dentro da tag <ion-item></ion-item>.
3. Os botões de comando (Editar/Excluir) não são gerados via template. Eles são personalizáveis através da aba Colunas na janela de Opções da Lista.

Barra de pesquisa

Essa aba permite total personalização da barra de pesquisa localizada no topo da Lista Avançada, inclusive é possível retirar totalmente a barra, como na figura abaixo.

Figura 4.2 - Substituição da barra de pesquisa por um título

Drag and Drop da árvore de

arquivos

Outra forma de adicionar uma Lista avançada é a partir do recurso de Drag and Drop (arrastar e soltar), este componente pode ser gerado tanto com uma classe do diagrama Diagrama de dadosquanto com uma fonte Fonte de dados, selecione . Selecione um dos dois itens da árvore de arquivos/recursos e arraste-o para a área de edição. Para entender um pouco mais detalhes sobre o recursoessa funcionalidade, acesse o tópico "Drag and Drop da estrutura árvore de arquivos" na documentação Editor de views.

Para o exemplo a seguir, utilizamos arrastamos a classe User do diagrama de dados.