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.

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