Esse componente é usado para listar dados estáticos ou dinâmicos, através do vínculo com uma fonte de dados.
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.
Exibir
ng-show
Propriedade AngularJS usada para exibir ou oculta o componente.
Identificador
id
Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente.
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.
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.
Configuração
Esse componente permite listar conteúdo estático e dinâmico, com o uso de fonte de dados. Arraste um componente Fonte de dados e selecione uma, no exemplo iremos usar a fonte de dados User (acesseFonte de Dadospara mais informações).
Figura 1 - Selecionando fonte de dados
Selecione o componente e acesse as propriedades;
Nas propriedades selecione a fonte de dados que você deseja utilizar;
Após selecionar uma fonte de dados, você agora poderá definir o conteúdo da lista, definimos no exemplo da figura 2 o campo User.active.name para sempre que um usuário seja cadastrado no sistema, a lista irá gerar o nome e o mesmo fizemos com o ID selecionando User.active.id.
Figura 2 - Selecionando conteúdo
Após selecionar o componente, clique no botão de cadeado para desbloquear o acesso aos subcomponentes;
Selecione o primeiro subcomponente para termos acesso as suas propriedades;
Clique em no símbolo "..." para acessarmos o conteúdo;
Na aba Campo da Tela Clique em Campo e selecione o campo que irá ser usado na lista, usamos o User.active.name como exemplo e clique em ok;
Repita o processo no outro campo colocando outra informação, no exemplo inserimos o ID selecionando User.active.id;
Caso você precise inserir ou remover mais campos da lista, selecione um campo e você terá os botões de balão onde poderá duplicar o elemento ou clicar no X para excluir.
Resultado
Após finalizarmos a configuração nos passos anteriores, execute o projeto e verifique o resultado, note que com base no nosso exemplo, conseguimos listar os usuários cadastrados no projeto.