Buscar dados de várias origens

  • Versão de lançamento: Xanadu
  • Atualizado 1 de ago. de 2024
  • 5 min. de leitura

    • Aprenda a obter dados de diferentes fontes para usar em um único componente.

    Antes de Iniciar

    Função necessária: ui_builder_admin

    Por Que e Quando Desempenhar Esta Tarefa

    Coloque o componente do contêiner de base do cartão em um repetidor e use a configuração de dados de várias tabelas para apresentar todos os incidentes e problemas ativos criados nos últimos dois anos.

    Procedimento

    1. Navegar até Todos > 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. Crie uma página do zero.
      Para obter mais informações sobre como criar uma página, consulte Criação de uma página no Construtor de IU.
    4. Adicione um recurso de dados de várias tabelas.
      1. Na prateleira de dados, selecione + Adicionar recurso de dados.
        Prateleira de dados com a opção de seta preta apontando para adicionar recurso de dados.
      2. Em Pesquisar, insira várias tabelas.
      3. Selecione Dados de várias tabelas.
        Pop-up de recursos de dados com seta preta apontando para o campo de pesquisa e seta preta apontando para o recurso de dados de várias tabelas.
      4. Selecione Adicionar.
    5. Configure a primeira fonte de dados.
      1. Em Fontes de dados, selecione + Adicionar.
        Opções de recursos de dados de várias tabelas com seta preta apontando para adicionar opção ao lado do campo de fontes de dados.
      2. Em Tabela, insira incidente e selecione a tabela Incidente.
      3. No campo Classificar, insira o número e selecione Número.
      4. Em Nome, insira Incidente.
      5. Em Campos de retorno, adicione Número, Estado, Descriçãoe Ativo.
        Adicionar pop-up de fontes de dados com todos os campos preenchidos.
      6. Selecione Editar condições.
      7. Crie a condição Ativo é verdadeiro.
      8. Selecione e.
      9. Crie a condição Criado em Últimos 2 anos.
        Pop-up de condições com duas condições exibidas.
      10. Selecione Aplicar.
      11. Selecione Aplicar.
    6. Configure a segunda fonte de dados.
      1. Em Fontes de dados, selecione + Adicionar.
      2. Em Tabela, insira problema e selecione a tabela Problema.
      3. No campo Classificar, insira o número e selecione Número.
      4. Em Nome, insira Problema.
      5. Em Campos de retorno, adicione Número, Estado, Descriçãoe Ativo.
        Ao criar um recurso de dados de várias tabelas, cada fonte de dados deve ter os mesmos campos de retorno especificados e na mesma ordem. Isso ajuda a garantir que os dados exibidos na página sejam consistentes e precisos.

        Adicionar pop-up de fontes de dados com todos os campos preenchidos.

      6. Selecione Editar condições.
      7. Crie a condição Ativo é verdadeiro.
      8. Selecione e.
      9. Crie a condição Criado em Últimos 2 anos.
      10. Selecione Aplicar.
      11. Selecione Aplicar.
      12. Selecione o X para fechar o pop-up Editar dados de várias tabelas.
    7. Selecione Salvar.
    8. Adicione o componente de título.
      1. Na árvore de conteúdo, selecione + Adicionar conteúdo em Corpo.
      2. Em Pesquisar, insira o título.
      3. Selecione o componente Título.
      4. No painel de configuração, na guia Configurar, selecione Nenhum - Configure o componente manualmente.
      5. Em Rótulo, exclua o texto padrão e insira Incidentes e problemas ativos criados nos últimos dois anos.
        Configure a guia do componente de título com a seta preta apontando para o campo de rótulo concluído.
      6. Selecione Salvar.
    9. Adicione um contêiner.
      1. Na árvore de conteúdo, selecione + Adicionar conteúdo no Título 1.
      2. Na guia Layouts, na seção Avançado, selecione Flexbox.
        Caixa de ferramentas com a guia de layout exibida e a seta preta apontando para a opção flexbox.
      3. No painel de configuração, na guia Configurar, selecione Nenhum - Configure o componente manualmente.
      4. Em Dimensionamento, defina a Largura inserindo 300.
        Guia Estilos do componente de contêiner com seta preta apontando para o campo de largura concluída.
      5. Selecione Salvar.
    10. Adicione o componente do repetidor.
      1. Na árvore de conteúdo, selecione + Adicionar conteúdo no Contêiner 1.
      2. Em Pesquisar, insira repetidor.
      3. Selecione o componente Repetidor.
      4. No painel de configuração, na guia Configurar, selecione Nenhum - Configure o componente manualmente.
      5. Selecione Salvar.
      6. No painel de configuração, na guia Configurar, passe o mouse sobre o campo Matriz de dados e selecione o ícone de vincular dados.
        Configure o painel do componente do repetidor com a seta preta apontando para o ícone de dados de vinculação do campo de matriz de dados.
      7. Em Tipos de dados, selecione Recurso de dados.
      8. Selecione Dados de várias tabelas 1.
      9. Selecione saída > dados > GlideMultiDatasource_Query > getMultiDatasourceData.
      10. Clique duas vezes (ou use o atalho do teclado) na cápsula de itens.
        Modal de vinculação de dados com seta preta apontando para a cápsula de itens.
        Verifique se a seção superior está precisa.

        Modal de vinculação de dados com seta preta apontando para a seção superior.

      11. Selecione Aplicar.
      12. Selecione Salvar.
    11. Adicione o componente do contêiner de base do cartão no repetidor.
      1. Na árvore de conteúdo, selecione + Adicionar conteúdo em Repetidor 1.
      2. Localize e selecione o componente Contêiner de base do cartão.
      3. No painel de configuração, na guia Configurar, selecione Nenhum - Configure o componente manualmente.
      4. Selecione a guia Estilos.
      5. Para adicionar um pouco de espaço ao redor dos cartões, vá para Espaçamento, selecione Margeme selecione M (para médio).
        Painel de estilos para o componente de contêiner de base do cartão com seta preta apontando para a opção de margem e a configuração de margem média.
      6. Selecione Salvar.
    12. Adicione o componente de título ao contêiner de base do cartão.
      1. Na árvore de conteúdo, selecione + Adicionar conteúdo em Contêiner de base do cartão 1.
      2. Localize e selecione o componente Título.
      3. No painel de configuração, na guia Configurar, selecione Nenhum - Configure o componente manualmente.
      4. No painel de configuração, na guia Configurar, exclua o texto padrão em Rótulo.
      5. Aponte para o campo Rótulo e selecione o ícone de vincular dados.
      6. Em Tipos de dados, selecione Repetidor.
      7. Selecione valor > campos.
      8. Selecione a cápsula superior e, na última coluna, verifique se há displayValue com um número de incidente ou problema.
      9. Clique duas vezes (ou use o atalho do teclado) na cápsula displayValue com um número de incidente ou problema.
        Modal de vinculação de dados com seta preta apontando para a cápsula de valor de exibição.
        Verifique se a seção superior está precisa.

        Modal de vinculação de dados com seta preta apontando para a seção superior.

      10. Selecione Aplicar.
      11. Na guia Configurar, selecione a opção Ocultar margem inferior.
        Configure o painel do componente de título com a seta preta apontando para ocultar a opção de margem inferior.
      12. Selecione Salvar.
    13. Adicione o primeiro componente de texto estilizado para mostrar a descrição do incidente ou problema.
      1. Na árvore de conteúdo, aponte para Título 2, selecione o ícone de menu (três pontos verticais) e selecione Adicionar após.
        Árvore de conteúdo com seta preta apontando para o ícone de menu e seta preta apontando para adicionar após a opção no menu flutuante.
      2. Localize e selecione o componente de texto estilizado.
      3. No painel de configuração, na guia Configurar, selecione Nenhum - Configure o componente manualmente.
      4. No painel de configuração, na guia Configurar, exclua o texto padrão em Texto.
      5. Aponte para o campo Texto e selecione o ícone de vincular dados.
      6. Em Tipos de dados, selecione Repetidor.
      7. Selecione valor > campos.
      8. Selecione a terceira cápsula na lista e, na última coluna, verifique se o displayValue não contém informações.
      9. Clique duas vezes (ou use o atalho do teclado) na cápsula displayValue sem valor.
        Modal de vinculação de dados com seta preta apontando para a cápsula de valor de exibição.
        Verifique se a seção superior está precisa.

        Modal de vinculação de dados com seta preta apontando para a seção superior.

      10. Selecione Aplicar.
      11. Para reduzir o tamanho do texto, vá para a guia Configurar e altere o marcador HTML para Parágrafo.
      12. Selecione Salvar.
    14. Adicione o segundo componente de texto estilizado para mostrar o estado do incidente ou problema.
      1. Na árvore de conteúdo, aponte para Texto estilizado 1, selecione o ícone de menu (três pontos verticais) e selecione Adicionar após.
      2. Localize e selecione o componente de texto estilizado.
      3. No painel de configuração, na guia Configurar, selecione Nenhum - Configure o componente manualmente.
      4. No painel de configuração, na guia Configurar, exclua o texto padrão em Texto.
      5. Aponte para o campo Texto e selecione o ícone de vincular dados.
      6. Em Tipos de dados, selecione Repetidor.
      7. Selecione valor > campos.
      8. Selecione a segunda cápsula na lista e, na última coluna, verifique se o displayValue contém um estado como Resolvido ou Em andamento.
      9. Clique duas vezes (ou use o atalho do teclado) na cápsula displayValue com um valor de estado.
        Modal de vinculação de dados com seta preta apontando para a cápsula de valor de exibição.
        Verifique se a seção superior está precisa.

        Modal de vinculação de dados com seta preta apontando para a seção superior.

      10. Selecione Aplicar.
      11. Para reduzir o tamanho do texto, vá para a guia Configurar e altere o marcador HTML para Parágrafo.
      12. Selecione Salvar.
    15. Selecionar Exibição.
      O título da página está na parte superior. Cada cartão contém um título com o número do incidente ou problema. Os cartões também mostram a descrição (se houver uma disponível) do incidente ou problema e o estado. Os dados estão sendo extraídos com sucesso de duas origens: a tabela de incidentes e a tabela de problemas.

      Visualize a sobreposição mostrando o cabeçalho e os componentes do contêiner da base do cartão configurados com fontes de dados de várias tabelas.

    16. Selecione o X para fechar a sobreposição de visualização.