Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
Função
Este A lista avançada é um componente que permite a criação de uma listagem avançada que apresentará os campos selecionados e permitido também que o usuário faça a busca pelo mesmo.
Image Removed
Figura 1 - Lista Avançada
Configuração
A configuração do componente é a mais importante das propriedades, como a fonte de dados da mesma, as colunas do banco de dados que serão exibidos na mesma e sua ordem de exibição.
Ao selecionar o componente na área de trabalho da IDE, será apresentado a aba de propriedades no campo direito. O menu de ... que aparece ao lado do campo de configuração permite que você faça as configurações e nela contém as abas geral e colunas.
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.
Image Added
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.
Nome | Propriedade | Função |
---|---|---|
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 AngularJS que pode ser usada para obter e alimentar o conteúdo pelo bloco de programação. |
Exibir | ng-show | Propriedade usada para mostrar ou oculta o componente. |
Segurança | cronapp-security | Abre a janela de seleção dos grupos com permissões para visualização ou edição. |
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
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.
GeralImage Modified
Figura 2.1 - Aba Geral do menu de configuraçãogeral da janela Opções da lista
Fonte de dados:
seleciona
a fonte que será mostrada na lista, ou seja, a entidade que fornecerá os atributos a serem exibidos, podendo ser uma que já se encontra no formulário da view ou uma novaou 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
nova fonte de dados.
"...": configura uma
nova fonte de dados
- Altura: define o tamanho da lista.
Informações | ||
---|---|---|
| ||
Para saber mais sobre como configura uma fonte de dados, acesse o link ao lado: 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.
Image Modified
Figura 2.2 - Aba Colunas do menu de configuração
- Ícones de setas
- Move a linha selecionada em uma posição
- Move a linha selecionada para a primeira posição
- Desce a linha selecionada em uma posição
- Desce a linha selecionada para a última posição
- Botão de comandos
- Remover colunas: remove a coluna da fonte de dados que não será exibida na lista.
- Obter coluna: obtêm todas as colunas disponíveis para aquela fonte de dados.
- Adicionar coluna: adiciona outra coluna a fonte de dados, podendo ser apenas um botão de comando ou relacionado ao banco de dados.
- Tipo de coluna: mostra o tipo da coluna será apresentada, podendo ser um botão de comando, um link.
- Campo: aparece quando a escolha do tipo de coluna é banco de dados
- Cabeçalho: define o título da coluna
- Pesquisável: seleciona se o campo vai ser pesquisável ou não. Na hora de adicionar a coluna, por default, é pesquisável - aparece um x. Caso deseje que o campo não seja pesquisável, basta clicar em cima desse x para declinar essa opção..
de customização dos itens da lista avançada
Botões
Ordenadores: altera a posição da coluna selecionada na grade;
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 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.
Image Added
Figura 2.3 - Componente lista avançada personalizada
Âncora | ||||
---|---|---|---|---|
|
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).
Image Added
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.
Image Added
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.
Image Added
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.
Image Added
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.
Image Added
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.
Image Added
Figura 3.2 - Áreas influenciadas por cada campo do menu Estilo
- Caixa de pesquisa: área que envolve a barra de pesquisa, entrada de texto da pesquisa e botão "Limpar seleção".
- Barra de pesquisa: área antes e após da entrada de texto da pesquisa.
- Input de pesquisa: entrada de texto da pesquisa.
- Botão limpar: Botão limpar seleção, esse botão só é exibido quando pelo menos um item é exibido.
- Checkbox: caixa de seleção dos itens.
- Ícone: ícone exibido nos itens.
- Título: área que exibe o primeiro campo da aba colunas (figura 2.2).
- Subtítulo: área que exibe os outros campos da aba colunas (figura 2.2).
- Item selecionado: área dos itens selecionados.
- Lista: área dos itens não selecionados.
- Em linha: área em torno dos itens da lista.
- Estilo do componente: engloba todo o componente.
Nome em inglês
Advanced List
Nessa página
Índice | ||||
---|---|---|---|---|
|
Compatibilidade
Formulário mobile
Equivalente web
Botão do Componente
Image Added
Imagem no Editor Visual
Image Added
Painel | ||
---|---|---|
| ||
|
Painel | ||
---|---|---|
| ||
Formulário mobile |
Painel | ||
---|---|---|
| ||
Image Removed |
Painel | ||
---|---|---|
| ||
Image Removed |
Próximas atualizações desta página