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.

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.1) define as configurações mais amplas da grade, como fonte de dados, tamanho e modo de edição da lista.

Figura 2.1 - 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 multiseleçã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.2 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.3, 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.2 - Aba de customização dos itens da lista avançada

Botões

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

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

3. Excluir: apaga a coluna selecionada.

• 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 apresentado no cabeçalho da coluna na grade (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.3 mostra o componente com o modo multiseleçã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.3 - 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.2) 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.3).

Figura 2.4 - Janela de adição e/ou edição de colunas com os campos de 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 apresentado no cabeçalho da coluna na grade (permite internacionalização);
• Botão customizado: adiciona botões com rótulo, ícone e evento customizados (Figura 2.5):
  • 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.4) 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 mascara 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 grade os campos que possuem essa opção marcada.

Figura 2.5 -  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.

Figura 2.6 - 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 do componente.

Figura 2.7 - 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.1 - 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.2 - Á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.2).
8. Subtítulo: área que exibe os outros campos da aba colunas (figura 2.2).
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.