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.
Image Modified
Figura 1 .1 - Exemplo de Lista Simples rodando no Aplicativo
Principais 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. |
Repetidor
Conteúdo
content
Esse campo define o texto que é exibido.
Posição do texto
xattr-text-position
Define a posição do texto, alinhando à direita, esquerda ou centro.
Propriedade que seleciona uma fonte de dados contida na tela e repete o componente baseado no número de itens dessa fonte de dados.
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 AngularJS 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. |
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
Itens | - | Permite adicionar, ordenar, configurar e excluir itens estáticos na lista. |
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 mais informações).
Itens estáticos
Para alimentar a lista com conteúdo estático, 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 (item 2 da Figura 2.1) ou ordená-lo, clicando no item e arrastando para sua nova posição (item 3 da Figura 2.1).
Image Modified
Figura 2 .1 - A propriedade Itens permite adicionar, excluir e ordenar os 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 permitindo alterar a propriedade ConteúdoTítulo.
Quando uma lista é selecionada, o título Lista Simples é exibido exibido (item 1 da figura 2.1) e seu e seu contorno, na área de edição, fica em azul com os botões bolhasa barra de opções; já quando um item é selecionado, este ficará com o contorno tracejado em azul e o título Item da lista simples é exibido exibido (item 1 da figura 2.21) no lugar da "Lista Simples". Para selecionar a lista após a seleção de um item, clique em uma área fora da lista na tela de edição.
Itens dinâmicos
Para criar uma lista dinâmica, selecione o componente Lista simples e na propriedade Fonte de dados, escolha uma das fontes de dados que já devem estar no formulário. Após o vínculo entre a lista simples e fonte de dados, clique em um item da propriedade Itens, acesse a propriedade Conteúdo Título e na aba Campo da Tela, selecione um atributo da fonte de dados (Figura 2.21).
Image Modified
Figura 2.2 1 - Vinculando um item da lista à um campo da fonte de dados.
Após selecionar um campo da fonte de dados na propriedade ConteúdoTítulo, este aparecerá em uma notação AngularJSAngular. É possível mesclar o conteúdo com texto estático, exemplo: "O e-mail do usuário usuário {{
rowDataUser.active.name}
} é e {{
rowDataUser.active.email}}
".
Image Modified
Figura 2.3 2 - Exibindo login e e-mail do usuário em um mesmo item da lista
No exemplo da figura 2.3, a lista simples possui 2 itens na propriedade Itens, sendo que o primeiro é dinâmico e o segundo estático. Exibindo o termo "Item estático". Ao abrir essa tela no aplicativo, serão exibidos o login e nome de todos os registros da fonte de dados e abaixo de cada registro o termo "Item estático". (Figura 2.43)
Image Modified
Figura 2.4 3 - Execução do exemplo da figura 2.3
Nome em inglês
Simple List
Nesta página
Índice maxLevel 3 printable false
Compatibilidade
Formulário mobile
Equivalente web
Lista Simples
Botão do Componente
Image Modified
Imagem no Editor Visual
Image Modified