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
Na tabela abaixo estão descritas as principais propriedades para o funcionamento básico do componente.
Nome | Propriedade | Função |
---|---|---|
Identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente. |
Configuração | options | Abre uma janela para personalização do componente. |
Posição do texto | xattr-text-position | Define a posição do conteúdo através dos botões de seleção: esquerda, centro ou direita. |
Valor | ng-model | Propriedade Angular que pode ser usada para obter e alimentar o conteúdo pelo bloco de programação. |
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
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.
Nome em português | Nome em inglês | Descrição |
---|---|---|
Título | Title | Estiliza o título do componente. |
Subtítulo | Subtitle | Estiliza o subtítulo do componente. |
Ícone | Icon | Estiliza o ícone do componente. |
Lista | List | Estiliza a lista do componente. |
Plano de fundo da pesquisa | Search Box | Estiliza o plano de fundo do campo de pesquisa do componente. |
Barra de Pesquisar | Research Background | Estiliza a barra de pesquisa do componente. |
Entrada de texto da pesquisa | Search text entry | Estiliza a entrada de texto do campo de pesquisa do componente. |
Sugestão da entrada de texto | Text input suggestion | Estiliza a sugestão da entrada de texto do componente. |
Caixa de checagem | Checkbox | Estiliza a caixa de checagem do componente. |
Cor da caixa de seleção selecionada | Selected checkbox color | Estiliza a cor da caixa de seleção quando está selecionada no componente. |
Item Selecionado | Selected Item | Estiliza o item selecionado no componente. |
Botão de Limpar | Clean Button | Estiliza o botão de limpar do componente. |
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.
Não é possível utilizar a mesma fonte de dados para dois componentes na mesma tela. |
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 como configura uma fonte de dados, acesse Componente visual 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.
É possível obter o valor dos itens selecionados na lista utilizando o bloco de programação Obter valor do campo. Para utilizá-lo, configure o campo da Lista avançada como Chave para obter os IDs dos registros, ou Objeto, para obter os objeto dos registros. |
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
Ordenadores: altera a posição da coluna selecionada na Lista;
Edição: abre a janela Coluna para personalizar a coluna ou botão selecionado;
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 do campo (permite internacionalização).
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
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.
Figura 2.4 - Janela de adição e/ou edição de botões customizados
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.
Para ter acesso aos códigos, é necessário que o botão Modo Avançado esteja Ativado. |
Figura 2.5 - Aba template principal das opções da lista
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
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
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
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
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:
Classes CSS Utilitárias para <ion-item>:
Algumas observações:
<img>
como o primeiro item dentro da tag <ion-item></ion-item>
.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
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 de dados quanto com uma Fonte de dados. Selecione um dos dois itens da árvore de arquivos/recursos e arraste-o para a área de edição. Para mais detalhes sobre essa funcionalidade, acesse o tópico "Drag and Drop da árvore de arquivos" na documentação Editor de views.
Para o exemplo a seguir, arrastamos a classe User do Diagrama de dados e um menu de contexto é exibido.
Figura 5 - Drag and drop da classe User para o editor de view
Após clicar na opção Lista Avançada, a tela de opções da lista será exibida, permitindo que o usuário configure uma fonte de dados. Na figura abaixo podemos conferir o resultado final da criação da Lista avançada através do drag and drop da árvore de recursos.
Figura 5.1 - Lista avançada gerada a partir do drag and drop da árvore de arquivos
Nome em inglês
Advanced List
Nesta página
Compatibilidade
Formulário mobile
Equivalente web
Botão do Componente
Imagem no Editor Visual