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á vinculá-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 se tornar 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é Tudo > Estrutura do Now Experience > Construtor de IU.
2. Abra uma experiência para trabalhar ou crie uma experiência selecionando Criar > Experiência.
   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 Pesquisar dados de 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. Na gaveta de recursos de dados, selecione + Adicionar recurso de dados.
   2. No modal, pesquise o recurso Pesquisar dados de vários registros e selecione Adicionar.
   3. No campo Tabela, insira Incidente.
   4. No campo Máximo de resultados, insira 5.

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

      
   5. Feche o modal.
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 - Configure o componente manualmente.
8. Na guia Configurar, adicione uma matriz que define os dados para componentes repetidos.
   1. Aponte para Matriz de dados e selecione o ícone Vincular dados ( ).
   2. Em Tipos de dados, selecione Recurso de dados.
   3. Na próxima coluna, selecione a cápsula Pesquisar vários registros 1.
   4. Em Exibição de cápsula, 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 conteúdo.
   
10. Adicione um componente de título.
11. Na guia Configurar, selecione Nenhum - Configure o componente manualmente.
12. Configure o componente que você aninhado no repetidor.

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

    1. Mova o cursor para o campo Rótulo e selecione o ícone Vincular dados ( ).
    2. Em Tipos de dados, selecione Repetidor.
    3. Em Exibição de 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 de título.

       
13. Selecione Save (Salvar).

    O componente vinculado ao recurso de dados aparece na fase e é repetido cinco vezes, uma para cada resultado retornado da tabela Incidente.

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