- Criado por Deborah Melo de Carvalho, última alteração por Igor Andrade em 19/12/2019
Você está vendo a versão antiga da página. Ver a versão atual.
Comparar com o atual Ver Histórico da Página
« Anterior Versão 5 Próxima »
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.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 no formulário html. |
Repetidor | 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. |
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. |
Identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente. |
Exibir | ng-show | Propriedade AngularJS usada para exibir ou oculta o componente. |
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).
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 e exibindo suas propriedades e altere a propriedade Conteúdo.
Quando uma lista é selecionada, o título Lista Simples é exibido (item 1 da figura 2.1) e seu contorno fica em azul com os botões bolhas; já quando um item é selecionado, este ficará com o contorno tracejado em azul e o título Item é exibido (item 1 da figura 2.2). Para selecionar a lista após a seleção de um item, clique em um á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 e na aba Campo da Tela, selecione um atributo da fonte de dados (Figura 2.2).
Figura 2.2 - Vinculando um item da lista à um campo da fonte de dados.
Após selecionar um campo da fonte de dados na propriedade Conteúdo, este aparecerá em uma notação AngularJS. É possível mesclar o conteúdo com texto estático, exemplo: "O e-mail do usuário {{rowData.name}} é {{rowData.email}}".
Figura 2.3 - 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.4)
Figura 2.4 - Execução do exemplo da figura 2.3
Nome em inglês
Simple List
Nessa página
Compatibilidade
Formulário web
Equivalente web
Lista Simples
Botão do Componente
Imagem no Editor Visual
- Sem rótulos