Adicionar repetidores a componentes

Em Construtor de IU, use repetidores para repetir um ou mais componentes com resultados de um recurso de dados.

Antes de Iniciar

Função necessária: ui_builder_admin

Por Que e Quando Desempenhar Esta Tarefa

O componente do repetidor atua como um loop básico que repete os dados fornecidos em vários componentes em Construtor de IU. Os repetidores usam uma matriz ou uma matriz de objetos. Por exemplo, a matriz [{"task": "A"},{"task": "B"}] repete o conteúdo dentro dela duas vezes. Os repetidores permitem vincular valores a uma propriedade de matriz de dados. @item.value.{property_name} vincula os valores ao componente dentro dos repetidores. Se você quiser vincular uma tarefa, poderá associá-la como @item.value.taske o repetidor exibirá o valor correto.

Os componentes dentro de um repetidor repetem o número de itens na fonte de dados, independentemente de a saída do componente ser dinâmica ou não. Por exemplo, digamos que você coloque um componente de cabeçalho dentro de um repetidor com três elementos de dados, mas não altere o campo Rótulo. Em seguida, você verá três instâncias do Cabeçalho com o mesmo Rótulo de saída.

Procedimento

1. Navegar até Todos > Estrutura do Now Experience > Construtor de IU.
2. Abra uma experiência ou crie uma experiência selecionando + Criar.
   Consulte Configure como os usuários interagem com suas aplicações no Construtor de IU para obter mais informações sobre como criar experiências.
3. Abra o editor da página à qual você deseja adicionar o repetidor.
   Se você não criou uma página para sua experiência, consulte Criar uma página no Construtor de IU para obter mais informações sobre como criar uma página.
4. Conecte um recurso de dados à sua página.

   Por exemplo, adicione o recurso de dados Pesquisar vários registros à sua página. Consulte Adicionar e configurar recursos de dados a uma página para obter mais informações sobre como conectar um recurso de dados.

   1. Selecione o recurso de dados Pesquisar vários registros.
   2. Configure o recurso de dados para usar a tabela Incidente.
   3. No campo Máximo de resultados, insira 5.

      O recurso de dados Pesquisar vários registros está configurado.

      
5. Selecione um contêiner existente ou crie um layout de coluna.
   Para obter mais informações, consulte Organizar componentes nas páginas do Construtor de IU.
6. Adicione o componente do repetidor à sua página.
   

   Para obter informações sobre como adicionar componentes, consulte Adicionar e configurar componentes.

7. Na guia Configurar, selecione Nenhum para configurar o componente manualmente.
8. Na guia Configurar, adicione uma matriz que defina os dados para componentes repetidos.
   1. Aponte para Matriz de dados e selecione o ícone Vincular dados (ícone ).
   2. Em Tipos de dados, selecione Recurso de dados.
   3. Em Exibiçãode cápsula, selecione a cápsula look_up_multiple_records_1.
   4. Na próxima coluna, clique duas vezes ou arraste os resultados para adicionar a saída @data.look_up_multiple_records_1.results.
   5. Selecione Aplicar.

      Os resultados do recurso de dados são vinculados ao componente do repetidor. No repetidor, um componente representa cada resultado.

      
9. No repetidor que você adicionou na etapa anterior, selecione Adicionar componente.
   

   Por exemplo, adicione um componente de Título.

10. Na guia Configurar, selecione Nenhum para configurar o componente Título manualmente.
11. Configure o componente que você aninhado no repetidor.

    Por exemplo, vincule o displayValue ao componente. Para obter mais informações, consulte Conecte dados aos seus componentes.

    1. Mova o cursor para o campo Rótulo e selecione o ícone Vincular dados (ícone ).
    2. Em Tipos de dados, selecione Repetidor.
    3. Em Exibiçãode cápsula, selecione a cápsula de valor.
    4. Na próxima coluna, selecione a cápsula numérica.
    5. Na próxima coluna, clique duas vezes ou arraste displayValue para adicionar a saída @item.value.number.displayValue.
    6. Selecione Aplicar.

       O displayValue está vinculado ao componente Cabeçalho.

       
12. Selecione Salvar.

    Somente o primeiro valor de um conjunto de dados é exibido na fase.

    
13. Exiba e teste sua página selecionando o botão Visualizar.
    Uma guia é aberta para exibir a visualização da página com dados repetidos.