Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
Função
Esse componente é usado para listar dados estáticos ou dinâmicos, através do vínculo com uma fonte de dados.
Figura 1 - Exemplo de Lista Simples rodando no Aplicativo
Principais propriedades
Propriedades
Na tabela abaixo estão descritas as principais propriedades do componente.
Nome | Propriedade | Função |
---|---|---|
Fonte de dados | crn-datasource | Seleciona uma fonte de dados que estiver presente na área de edição do formulário. |
Identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente. |
Estilo | style | Altera o estilo do componente de forma inline. |
Exibir | ng-show | Propriedade Angular usada para exibir ou oculta o componente. |
Repetir | ng-repeat | Propriedade que seleciona uma fonte de dados contida na tela e repete o componente baseado no número de itens dessa fonte de dados. |
Segurança | cronapp-security | Propriedade do Cronapp que trata as permissões de segurança da aplicação. Usado para permitir ou não edição e visualização do componente com base nos perfis selecionados. |
Skin | crn-skin | Permite selecionar um skin que afetará apenas o componente selecionado. |
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
Itens | - | Permite adicionar, ordenar, configurar e excluir itens estáticos na lista. |
Eventos
Na tabela abaixo estão descritas as os principais propriedades eventos do subcomponente div
componente.
Nome | Propriedade | Função |
---|
Fonte de dados
crn-datasource
Seleciona uma fonte de dados que estiver presente na área de edição do formulário.
Repetir
ng-repeat
Propriedade que seleciona uma fonte de dados contida na tela e repete o componente baseado no número de itens dessa fonte de dados.
Ao Clicar | ng-click | Executa uma ação quando o componente receber um clique com o mouse ou um toque na tela. |
Ao Clique Rápido | on-tap | Executa uma ação sempre que o componente é clicado rapidamente. |
Ao Clique Duplo Rápido | on-double-tap | Executa uma ação sempre que o componente é clicado duas vezes. |
Ao Pressionar | on-hold | Executa uma ação sempre que o componente é pressionado sem soltar por alguns milissegundos. |
Ao Deslizar | on-swipe | Executa uma ação sempre que é feito uma ação de swipe no componente. |
Ao Arrastar | on-drag | Executa uma ação sempre que o componente é arrastado. |
Item da lista simples
Na tabela abaixo estão descritas as principais propriedades do subcomponente.
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. |
Título | content | Define o texto do Título. |
Cor do texto | xattr-theme | Define a cor do conteúdo que será exibido. |
Posição do texto | xattr-text-position | Define a posição do título e subtítulo do item, podendo ser na esquerda, no centro ou na direita. |
Estilo | style | Altera o estilo do componente de forma inline. |
Exibir | ng-show | Propriedade Angular usada para exibir ou oculta o componente. |
Repetir | ng-repeat | Propriedade que seleciona uma fonte de dados contida na tela e repete o componente baseado no número de itens dessa fonte de dados. |
Segurança | cronapp-security | Propriedade do Cronapp que trata as permissões de segurança da aplicação. Usado para permitir ou não edição e visualização do componente com base nos perfis selecionados. |
Skin | crn-skin | Permite selecionar um skin que afetará apenas o componente selecionado. |
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
Configuração
Esse componente permite listar conteúdo estático e dinâmico com o uso de fonte de dados (acesse Fonte de Dados para Componente visual fonte de dados para mais informações).
Âncora itens itens
Itens
Para adicionar um adicionar um novo item, basta arrastar o componente Lista simples para o formulário e na propriedade Itens, clicar no botão "+" (Adicionar). Também é possível apagar o item, clicando no ícone de Lixeira (destaque 2 da Figura 2) ou ordená-lo, clicando no item e arrastando para sua nova posição (destaque 3 da figura 2).
Quando o componente Lista Simples é selecionado, todo o componente fica selecionado em azul na área de edição e o nome do componente "Lista Simples" é exibido logo em cima na área de propriedades (Destaque destaque 1 da figura 2). Já quando um Item da lista simples é selecionado, apenas o subcomponente fica marcado na área de edição, e tanto o título quando as propriedades na área de propriedades mudam (Destaque destaque 1 da figura 2.1).
Image Modified
Figura 2 - A propriedade Itens permite adicionar, excluir e ordenar os itens
Itens estáticos
Para adicionar conteúdo estático a cada registro da lista, clique em um item da propriedade Itens, selecionando-o, para exibir suas propriedades e permitir alterar a propriedade Título (destaque 2 da figura 2.1).
Figura 2.1 - Editando o título de um item da lista
Itens dinâmicos
Para utilizar o componente Lista simples como uma lista dinâmica é necessário configurar inicialmente uma fonte de dados. Para isso, arraste e configure um componente Fonte de Dados Componente visual fonte de dados, no exemplo iremos usar a fonte de dados associada a entidade User. Nas configurações do componente Fonte Componente visual fonte de dados, é importante que a propriedade Postergar Carga esteja configurada como Não. Caso contrário, o conteúdo do componente não será exibido automaticamente na tela.
Para vincular a fonte de dados ao componente, precisamos selecionar o subcomponente div
. Para isso, selecione um item da Lista simples e clique na div
do breadcrumb (destaque 1 da figura 2.2).
Image Removed
Figura 2.2 - Selecionando o subcomponente div
Com o subcomponente div selecionado
primeiro selecione o componente e, em seguida, acesse a propriedade Fonte de dados e e escolha a fonte de dados configurada anteriormente (figura 2.32).
Image RemovedImage Added
Figura 2.3 2 - Vinculando uma fonte de dados ao componente
Após o vínculo entre a lista simples e fonte de dados, clique em um item da propriedade Itens, acesse a propriedade Título (destaque 1 da figura 2.43) e na aba Campo da Tela, selecione um atributo da fonte de dados (figura 2.43).
Image Modified
Figura 2.4 3 - Vinculando um item da lista a um campo da fonte de dados.
Após selecionar um campo da fonte de dados na propriedade Título, este aparecerá em uma notação Angular. É possível mesclar o conteúdo com texto estático, exemplo: "E-mail: {{User.active.email}}
". Neste exemplo, iremos inserir o conteúdo "{{User.active.name}
} - {{User.active.email}}
", como mostra a figura 2.54.
Figura 2.5 4 - Exibindo nome e e-mail do usuário em um mesmo item da lista
No exemplo da figura 2.54, a lista simples possui 2 itens na propriedade Itens, sendo que o primeiro é estático, exibindo o termo "Item estático", e o segundo dinâmico. Ao abrir essa tela no aplicativo serão exibidos o nome e e-mail de todos os registros da fonte de dados, e, acima de cada registro, o termo "Item estático". (Figura 2.65)
Image Modified
Figura 2.6 5 - Execução do exemplo da figura 2.54
Âncora corDoTexto corDoTexto
Cor do texto
Essa propriedade irá exibir 2 grupos de cores em sua lista, as primeiras são as cores definidas pelo tema e, em seguida, uma seleção fixa de cores pré-definidas.
As cores definidas pelo tema (Padrão do tema, Secundário, Sucesso, Informação, Aviso, Perigo, Claro, Editável, Real e Escuro) podem variar a partir das seguintes situações:
- Alteração do tema do projeto (menor prioridade);
- Adição da Skin do projeto através do campo "Skin do Tema Mobile" na janela de de Configurações do Projeto.
- Seleção da Skin na propriedade "Skin" do componente visual. (maior prioridade).
Nome em inglês
Simple List
Nesta página
Índice maxLevel 3 printable false
Compatibilidade
Formulário mobile
Equivalente web
Botão do Componente
Image Modified
Imagem no Editor Visual