Função
Esse componente é usado para renderizar os dados de uma coluna da tabelalistar dados estáticos ou vinculados a uma fonte de dados.
Figura 1.1 - Exemplo de imagem rodando no Aplicativo
Principais propriedades
Na tabela abaixo estão descritos descritas as principais propriedades para o funcionamento básico 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 |
Tema
xattr-theme
Escolhe um tema bootstrap (cor) para o o texto do componente.
Identificador
id
. | ||
Exibir | ng-show | Propriedade AngularJS usada para |
exibir ou oculta o componente. |
screen-params
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
A lista simples serve tanto para exibir dados provenientes de uma fonte de dados quanto dados estáticos. Para exibir os dados dinâmicos, primeiro é feito a adição do componente fonte de dados no formulário e sua configuração (caso não saiba, clique aqui para saber como faz a configuração de uma fonte de dados).
Dados provenientes de uma fonte de dados
Esse componente permite listar conteúdo estáticos e dinâmicos, com o uso de fonte de dados existente no formulário (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 uma nova posição (item 3 da Figura 2.1).
Figura 2.1 - A propriedade Itens permite adicionar, excluir e ordenar os itens estáticos
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.Após configurar a fonte e selecioná-la no campo fonte de dados (1), clique no menu … (2) do campo conteúdo para abrir a janela de configuração do mesmo. Então, selecione a aba campo de tela (3) e escolha qual das colunas dessa fonte (4) irá mostrar os dados na lista (Figura 2).
Figura 2 - Relacionado a coluna da tabela com o componente
Dados estáticos
No caso de dados estáticos, é preciso relacionar também com alguma fonte de dados para que eles sejam renderizados no formulário. Por padrão, o campo repetidor irá garantir a quantidade de dados existentes da fonte de dados sejam renderizados (Figura 3).
.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.3Figura 3 - Utilizando dado estático
Nome em inglês
Simple List
Nessa página
| Índice | ||||
|---|---|---|---|---|
|
Compatibilidade
Formulário web
Equivalente web / mobile
O link será adicionado no final, após todos os componentes criados.
Botão do Componente
Imagem no Editor Visual