Crie exibições de cartão filtradas dinâmicas

Crie um layout de cartão interativo para exibir registros, adicione um menu suspenso para filtrar cartões visíveis por nome e configure cada cartão para abrir o registro completo em outro Construtor de IUquando selecionado.

Antes de Iniciar

Função necessária: ui_builder_admin

Por Que e Quando Desempenhar Esta Tarefa

Este exemplo mostra como vincular dados a componentes para que você possa exibir informações de registro em layouts personalizados. Por exemplo, você pode apresentar registros como cartões selecionáveis em vez de em uma exibição de lista tradicional. Para este procedimento, os dados vêm da tabela Incidente.

Figura 1. Visualização do layout final

1. Menu suspenso : Filtra cartões visíveis por nome do chamador.
2. Contêiner-base do cartão : Contém o conteúdo do cartão individual e habilita a interação de clique.
3. Título : Exibe o número do registro.
4. Valor do rótulo : Exibe o nome do chamador com um rótulo estático ("Chamador: ").
5. Texto estilizado : Exibe a descrição resumida do registro.
6. Valor realçado : Exibe o nível de prioridade do registro com estilo de cor aplicado por meio de um script.

Este procedimento usa Construtor de IUcomponentes para criar layouts dinâmicos e interativos. Para obter mais informações sobre como configurar componentes, consulte:

• Adicionar e configurar componentes
• Bits rápidos do Construtor de IU: Navegando na configuração do componente

Tabela 1. Componentes usados neste procedimento

Componente	Links de documentação
Contêiner de base do cartão	Diretrizes de uso Configuração de UIB
Lista suspensa	Diretrizes de uso Configuração de UIB
Título	Diretrizes de uso Configuração de UIB
Valor em destaque	Diretrizes de uso Configuração de UIB
Valor do rótulo	Diretrizes de uso Configuração de UIB
Texto estilizado	Diretrizes de uso Configuração de UIB

Procedimento

Parte 1: Crie o layout do cartão

Adicione um repetidor vinculado a um recurso de dados e crie os contêineres de cartão que exibem cada registro.

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 IUpara 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 Crie uma página no Construtor de IU .
4. Crie um recurso de dados para extrair registros da tabela Incidente.

   Os recursos de dados expõem dados de tabelas e registros para a página. Neste exemplo, adicionamos um recurso de dados para extrair registros da tabela de incidentes para que possamos exibi-los usando componentes. Para obter mais informações, consulte Adicione e configure recursos de dados a uma página.

   1. Em Dados e scripts gaveta, em Recursos de dados , selecione Adicionar recurso de dados .
   2. Selecione Pesquisar vários registros e, em seguida, selecione Adicionar .
   3. Selecione look_up_multiple_records_1 ID para abrir o. Detalhes do recurso de dados formulário.
   4. Substitua o texto no Rótulo do recurso de dados campo com Pesquisa de incidentes .
      . ID do recurso de dados o campo é preenchido automaticamente.
   5. Selecione Aplicar.
   6. Em Editar pesquisa de incidente preencha os campos:

      Campo	Ação
      Tabela	Entrar incidente , em seguida, selecione-o na lista.
      Campos de retorno	Selecione E Adicionar . Entrar Solicitante , selecione-o para adicioná-lo ao Selecionado e desmarque a caixa de pesquisa. Repita a etapa acima para Prioridade e. Descrição resumida . Selecione Aplicar.
      Máx. de resultados	Entrar 25 .

      

   7. Selecione X no canto superior direito para fechar a caixa de diálogo.
   8. Selecione Save (Salvar).
5. Adicione um layout de coluna única para conter os componentes.
   1. Na árvore de conteúdo, em Corpo , selecione - Adicionar conteúdo .
   2. Selecione Coluna única e, em seguida, selecione E Adicionar .
   3. Com Coluna 1 selecionado na árvore de conteúdo, navegue até Layout no painel de configuração e defina o. Direção para Linha .
      
6. Adicione e configure um repetidor em sua página com vinculação de dados.

   A vinculação de dados é o processo de associar dados expostos por um recurso de dados a um componente. Neste exemplo, vinculamos os resultados de Pesquisa de incidentes recurso de dados para Matriz de dados propriedade do componente do repetidor. Para obter mais informações, consulte Conecte componentes de dados.

   1. Na árvore de conteúdo, em Coluna 1 , selecione - Adicionar conteúdo .
   2. Entrar Repetidor , em seguida, selecione-o na caixa de ferramentas e, em seguida, selecione Adicionar .
   3. Selecione Cancelar para fechar a janela predefinida.
   4. Mantendo Repetidor 1 selecionado, no painel de configuração, passe o mouse sobre Matriz de dados e selecione o ícone vincular dados .
      
   5. Em Vincular dados à matriz de dados em Tipos de dados , selecione Recurso de dados .
   6. Selecione Pesquisa de incidentes e, em seguida, clique duas vezes ou arraste o. resultados para movê-lo para a área acima.

      Figura 2. Vincular dados à matriz de dados

      

   7. Selecione Aplicar para confirmar a vinculação.
   8. No painel de configuração, selecione Estilos , selecione Habilitar estilos , em seguida, preencha os campos:

      Campo	Valor
      Tipo	Grade
      Colunas	4
      Lacuna	S

   9. Selecione Save (Salvar).
7. Crie a exibição do cartão.
   1. Na árvore de conteúdo, em Repetidor 1 , selecione - Adicionar conteúdo .
   2. Entrar Contêiner-base do cartão , selecione o componente e, em seguida, selecione E Adicionar .
   3. No painel de configuração, selecione Configurar e defina Interação para Clique em .
   4. No painel de configuração, selecione Estilos e defina Largura para 300 px.
   5. Defina o. Altura para 200 px.
      

Parte 2: Adicionar componentes e vincular dados

Adicione componentes a cada cartão e configure-os para exibir detalhes do registro vinculando os campos apropriados.

8. Adicione componentes ao contêiner base do cartão.
   1. Na árvore de conteúdo, em Contêiner base do cartão 1 , selecione - Adicionar conteúdo .
   2. Adicione os seguintes componentes na ordem listada abaixo e edite cada um no painel de configuração:
      Dica:

      Para manter todos os componentes aninhados em Contêiner-base do cartão , adicione o primeiro componente e use Adicionar após no ícone de configuração para cada um que se segue.

      Se uma janela predefinida for exibida, selecione Cancelar para fechá-lo.

      1. Título: Nenhuma configuração inicial necessária
      2. Valor do rótulo: Em Configurar , no Rótulo campo, insira Solicitante:
      3. Texto estilizado: No Configurar , defina o. Marcador HTML para Parágrafo
      4. Valor realçado: Em Estilos , defina o. Largura para 100 px

      

   3. Selecione Save (Salvar).
9. Vincule dados dos registros de incidente aos componentes que adicionamos na etapa anterior.

   Componente	Campo	Caminho
   Título	Rótulo	Valor > número > displayValue
   Valor do rótulo	valor	Valor > caller_id > displayValue
   Texto estilizado	Texto	Valor > short_description > displayValue
   Valor em destaque	Rótulo	Valor > Prioridade > DisplayValue

   1. Na árvore de conteúdo, selecione o componente listado na tabela.
   2. No painel de configuração, na guia Configurar, passe o mouse sobre o campo especificado e selecione o ícone Vincular dados .
   3. No modal de vinculação de dados:
      • À esquerda, selecione Repetidor em Tipos de dados .
      • À direita, em Exibição de cápsula , Siga o caminho listado na tabela selecionando cada cápsula em ordem (por exemplo, para título, selecione valor , então número , então Valor de exibição ).
   4. Quando você chegar ao comprimido final ( Valor de exibição ), clique duas vezes ou arraste-o para movê-lo para a área acima e selecione Aplicar .
   5. Repita o processo para cada linha na tabela.

      

   6. Selecione Save (Salvar).
10. Use um script para definir a cor da prioridade de cada registro.
    1. Na árvore de conteúdo, selecione Valor realçado 1 .
    2. No painel de configuração, na guia Configurar, passe o mouse sobre Cor e selecione o ícone vincular dados .
    3. Selecione Usar script ícone no canto superior direito.
    4. Substitua o código existente pelo seguinte:

       function getPriorityColor(record) {
           let priority = record.api.item.value.priority.value;
       
           switch (priority) {
               case '1':
                   return 'critical';
               case '2':
                   return 'high';
               case '3':
                   return 'moderate';
               case '4':
                   return 'low';
               case '5':
                   return 'gray';
               default:
                   return 'gray';
           }
       }

    5. Selecione Aplicar.

    Verifique se o valor realçado muda de cor dependendo da prioridade do registro.

    

Parte 3: Adicionar filtragem com menu suspenso

Configure um evento suspenso para atualizar um parâmetro de estado do cliente e atualizar o recurso de dados, filtrando a exibição do cartão.

11. Crie um parâmetro de estado do cliente para rastrear as seleções do usuário.
    O parâmetro de estado do cliente pode ser modificado por componentes quando acionam eventos. Para obter mais informações, consulte Parâmetros de estado do cliente.
    1. Em Dados e scripts gaveta, ao lado de Parâmetros de estado do cliente , selecione E ícone.
    2. Em Edite parâmetros de estado do cliente preencha os campos:
       • Nome: selected_caller
       • Tipo: Cadeia de caracteres
       • Valor inicial: Vazio
    3. Selecione Aplicar.
12. Edite o recurso de dados para usar o parâmetro de estado do cliente como um valor condicional.
    1. Em Dados e scripts gaveta, selecione Pesquisa de incidentes recurso de dados.
    2. Selecione Editar condições .
       
    3. Em Condições , insira Solicitante no primeiro campo e selecione-o na lista.
    4. Deixe o segundo campo como está.
    5. Passe o mouse sobre o terceiro campo e selecione o ícone Vincular dados .
    6. No modal de vinculação de dados, selecione estados do cliente , em seguida, clique duas vezes ou arraste o. selected_caller para movê-lo para a área acima.
    7. Selecione Aplicar para confirmar a vinculação.
    8. Selecione Aplicar para salvar a condição.
       
    9. Selecione X no canto superior direito para fechar o. Pesquisa de incidentes caixa de diálogo.
13. Crie um segundo recurso de dados para consultar usuários da tabela de usuários.
    1. Em Dados e scripts gaveta, selecione E , em seguida, selecione Recurso de dados .
    2. Selecione Pesquisar vários registros e, em seguida, selecione Adicionar .
    3. Selecione look_up_multiple_records_1 ID para abrir o. Detalhes do recurso de dados formulário.
       
    4. Substitua o texto no Rótulo do recurso de dados campo com sys_user_lookup .
       . ID do recurso de dados o campo é preenchido automaticamente.
    5. Selecione Aplicar.
    6. Em Edite sys_user_lookup preencha os campos:

       Campo	Ação
       Tabela	Entrar Usuário (sys_user) e, em seguida, selecione-o na lista.
       Campos de retorno	Selecione E Adicionar . Entrar Nome , em seguida, selecione-o na lista para adicioná-lo ao Selecionado coluna. Selecione Aplicar.
       Ordenar por	Entrar Nome , em seguida, selecione-o na lista.
       Máx. de resultados	Entrar 250 .

    7. Selecione X no canto superior direito para fechar a caixa de diálogo.
    8. Selecione Save (Salvar).
    Este recurso de dados pesquisa usuários na tabela de usuários. Faremos referência a esses dados para preencher o menu suspenso na próxima etapa.
14. Adicione e configure um componente suspenso.
    1. Na árvore de conteúdo, passe o mouse sobre Layout da coluna 1 e selecione Configurar ícone .
    2. Selecione Adicionar antes .
    3. Pesquisar Menu suspenso , selecione-o na caixa de ferramentas e, em seguida, selecione Adicionar .
    4. No painel de configuração, navegue até a guia especificada e configure os seguintes campos:

       Tab	Ação
       Configurar	Em Texto de espaço reservado Campo: Insira Selecione um chamador .
       Configurar	Em Variante Campo: Selecione Primária .
       Configurar	Em Itens da lista campo: Passe o mouse sobre o campo e selecione o ícone Vincular dados . No modal de vinculação de dados, selecione Usar script ícone . Substitua o código existente pelo seguinte: Dica: Você pode selecionar o ícone de código de formato para tornar o código mais legível. function evaluateProperty({ api, helpers }) { const userArray = api.data.sys_user_lookup.results; let outputArray = []; for (let i = 0; i < userArray.length; i++) { const obj = { 'id': `${userArray[i]._row_data.uniqueValue}`, 'label': `${userArray[i].name.displayValue}` }; outputArray.push(obj); } return outputArray; } Selecione Aplicar.
       Estilos	Largura: Insira 200 .
       Estilos	Preenchimento: Selecione Preenchimento , em seguida, escolha M da lista.

15. Configure o menu suspenso com eventos para que ele possa modificar o parâmetro de estado do cliente que criamos.
    1. Com Menu suspenso 1 selecionado na árvore de conteúdo, selecione Eventos no painel de configuração e selecione Adicione mapeamento de evento .
    2. Selecione Itens selecionados alterados evento e selecione Continuar .
    3. Selecione Defina o parâmetro de estado do cliente manipulador e selecione Continuar .
    4. Configure as seguintes propriedades:

       Campo	Ação
       Nome de parâmetros de estado do cliente	Selecione selected_caller da lista.
       Valor a ser usado após o evento de acionamento	Passe o mouse sobre o campo e selecione o ícone Vincular dados . Em Exibição de cápsula , clique duas vezes ou arraste o. valor para movê-lo para a área acima. Selecione Aplicar para confirmar a vinculação. Selecione Adicionar.

    5. Em Eventos no painel de configuração, selecione Adicione manipulador abaixo do evento que adicionamos na etapa anterior.
    6. Localizar Pesquisa de incidentes (1) , selecione ATUALIZAR manipulador e selecione Continuar .
       
    7. Selecione Adicionar.
    8. Selecione Save (Salvar).
    Após configurar o menu suspenso, selecionar um chamador atualiza o. selected_caller parâmetro de estado do cliente e atualiza o recurso de dados para exibir os registros do chamador.

Parte 4: Habilitar a navegação de registro

Configure cada cartão para que sua seleção abra a página de registro usando o sys_id dos dados do repetidor.

16. Crie outra página na sua experiência que abra o registro.
    1. Para retornar à exibição da experiência, selecione o nome da sua experiência (por exemplo, "Experiência de demonstração") no canto superior esquerdo.
    2. Selecione E ao lado de Páginas , em seguida, selecione Crie uma nova página .
    3. Passe o mouse sobre Registro padrão e selecione Use o modelo .
    4. Nomeie sua página Página de registro de incidente e selecione Continuar .
    5. Selecione Bom aspeto , em seguida, selecione Criar .
17. Para retornar à sua página original, selecione o nome da sua experiência no canto superior esquerdo e, em seguida, escolha sua página na exibição da experiência.
18. Adicione um evento aos cartões para que a seleção de um cartão abra seu registro na página que criamos.
    1. Selecione Contêiner base do cartão 1 na árvore de conteúdo.
    2. No painel de configuração, selecione Eventos e selecione Adicione mapeamento de evento .
    3. Selecione Cartão clicado evento e selecione Continuar .
    4. Selecione Abrir página ou URL manipulador e selecione Continuar .
    5. Selecione Páginas na experiência atual .
    6. Selecione Página de registro de incidente .
    7. No formulário, preencha os campos:

       Campo	Ação
       tabela	Entrar incidente
       sysId	Passe o mouse sobre SYSID e selecione o ícone vincular dados . Localizar Tipos de dados à esquerda e selecione Repetidor . Em Exibição de cápsula , selecione valor , então _row_data , em seguida, clique duas vezes Valor único . Selecione Aplicar.

    8. Selecione Selecione .
       
    9. Marque a caixa de seleção para habilitar o. Abrir em uma nova guia propriedade.
    10. Selecione Adicionar.
    11. Selecione Save (Salvar).
19. Visualize e teste a página.
    1. Selecionar Exibição.
    2. No menu suspenso, selecione um usuário como "Fred Luddy", "Carol Coughlin" ou "Bow Ruggeri" para filtrar os cartões.
       Nota:

       Alguns usuários não têm registros de incidentes relacionados, portanto, selecionar esses usuários resultará na exibição de nenhum cartão.
    3. Selecione um cartão para exibir o registro completo em uma nova guia.