Função

Esse componente é usado para listar dados estáticos ou dinâmicos, através do vínculo com uma fonte de dados.

Image Added

Figura 1 - Componente Lista Simples executado no browser

Principais propriedades

Na tabela abaixo estão descritas as principais propriedades do componente.

Configuração

Aba de Estilos

Na tabela abaixo estão descritos os tipos de estilos disponíveis para o componente Lista Simples.

Configuração

Para utilizar o componente Lista simples como uma lista dinâmica vinculado a uma fonte de dados é necessário configurar inicialmente a fonte de dados. Por isso, arraste e configure um Componente visual fonte de dadosEsse 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 (acesse Fonte de Dados para mais informações).

Image Removed

Figura 1 - Selecionando fonte de dados

1. Selecione o componente e acesse as propriedades;
2. 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. 

Image Removed

associada a entidade User.

Nas configurações do componente 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.

Arraste o componente Lista simples para a área de edição (destaque 1 da figura 2) e na propriedade Fonte de dados, selecione a fonte de dados configurada anteriormente (2).

Image Added

Figura 2 - Selecionando fonte de dados

O componente Lista simples é composto por 2 subcomponentes títulos de tamanhos: 1 (maior) e 3 (intermediário). É possível adicionar outros componentes títulos ou excluir um, selecionando-o e clicando no botão "x" da barra de opções.

Para configurar os subcomponentes, basta seguir os passos da figura 3.

Image Added

Figura 3

- Selecionando conteúdo

1. Após selecionar o componente,
clique no
2. clique no botão de cadeado para desbloquear o acesso aos subcomponentes;
3. Selecione o primeiro subcomponente para termos acesso as suas propriedades;
4. Clique em no
símbolo
5. botão "..." da propriedade Conteúdo para acessarmos
o conteúdo
6. a janela de configurações;
7. Na aba Campo da Tela
Clique
8. , clique em Campo e selecione o
campo que irá
9. atributo a ser usado
na lista
10. ,
usamos o 
11. usaremos o User.active.name como exemplo e clique em
ok;
12. OK.

Repita o processo no

segundo subcomponente, colocando outra informação, no exemplo inserimos o

e-mail selecionando User.active.

1. 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.

email;

Após selecionar um campo da fonte de dados na propriedade Conteúdo, este aparecerá em uma notação AngularJS forma de expressão entre chaves duplas "{{ }}" (1 da figura 34). É possível mesclar o conteúdo com texto estático, no . No nosso exemplo inserimos nos exemplos exemplo "Nome: {{rowData.name}}" e no campo do id "ID: {{rowData.id}}".

Image Removed

Figura 3 - Inserindo conteúdo com texto estático

Resultado

o termo "e-mail:" antes da expressão: "e-mail: {{User.active.email}}". Após finalizarmos a configuração nos passos anteriores, salve, execute o projeto e verifique o resultado , note que com base no nosso exemplo, conseguimos listar na Figura 1 onde listamos os usuários cadastrados no projeto.

Image Added

Image Removed

Figura 4 -

Inserindo conteúdo estático junto a expressão