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.1 - Exemplo de imagem Lista Simples rodando no Aplicativo

Principais propriedades

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

Configuração

Esse componente permite listar conteúdo estáticos estático e dinâmicosdinâmico, 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 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,

Para facilitar a identificação de qual dos elementos (lista ou item da lista) as propriedades exibidas na aba lateral pertencem, clique em uma lista na área de edição para que toda a lista seja contornada em azul e o nome do componente apareça no topo da aba propriedade (item 1 da Figura 2.1), já ao selecionar um dos itens, somente o item dentro da lista será contornado em azul tracejado e o nome “Item” será exibido na parte superior da aba propriedade (item 2 da Figura 2.2).

Para voltar a selecionar toda a lista, selecione outro componente na área de edição e clique novamente na lista simples.

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