Introdução aos layouts personalizados

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

    • Configure uma página Construtor de IU e comece a configurar os componentes modulares de layouts personalizados do Playbook para layouts personalizados em Playbook Experience.

    Antes de Iniciar

    • Se você não tiver um playbook para aplicar layouts personalizados, crie um playbook. Para saber mais, consulte Como criar playbooks.
    • Instale a versão mais recente dos aplicativos Playbook Experience e Playbook Experience Component do ServiceNow Store. Consulte Aplicações da Playbook Experience.

    Função necessária: ui_builder_admin, administrador

    Por Que e Quando Desempenhar Esta Tarefa

    Depois de criar uma página Construtor de IU, você pode personalizar as páginas Playbook Experience de acordo com suas necessidades. Os modelos de página incluem controladores que podem ser usados com predefinições de componente, incluindo os modelos playbook. Para obter mais informações, consulte Bind data to UI Builder pages using controllers (advanced feature).

    Procedimento

    1. Navegar até Todos > Estrutura do Now Experience > Construtor de IU.
    2. Abra a experiência do Construtor de IU na qual você deseja trabalhar ou crie uma nova experiência.
      A experiência do construtor de Playbook Experience foi criada para você personalizar Playbook Experience. Para obter mais informações sobre como criar uma experiência, consulte Configure how users interact with your applications in UI Builder.
    3. Em sua experiência do Construtor de IU, você pode:
      O uso de um modelo Playbook Experience acelera o processo de desenvolvimento, porque o controlador de IU de layout personalizado do Playbook e os componentes já foram adicionados a todas as páginas, , incluindo geradores de registro a partir da versão 25.2. O controlador preenche automaticamente todos os componentes fornecidos com dados.
      Nota:
      Você ainda pode criar e adicionar componentes personalizados ao usar um modelo.

      Selecione um modelo playbook.
    4. Se você estiver usando um modelo Playbook Experience, Crie sua página.
      1. Configure os detalhes da página.
        Nome O nome da sua página.
        Caminho da URL O caminho da URL para o qual os usuários navegam para acessar a página.
      2. Revise os parâmetros de teste da sua página.
        tabela Nome da tabela primária do playbook.
        SYS ID Sys_id do registro. Para um registro que não existe, o valor é -1.
        experiência A experiência que você deseja carregar.
        selectedPlaybook O playbook em que o agente ou executante está.
        selectedStage A fase em que o agente ou executante está.
        selectedActivity A atividade em que o agente ou executante está.
      3. Configure sua página padrão variant.
        Nome O nome da sua variante de página.
        Públicos Os usuários que podem ver sua variante de página. Eles podem ser definidos por:
        • Função
        • Grupo
        • Usuário
        • Empresa
        • Departamento
        • Local
        • Script
        Condições Condições que determinam quando a variante de página é mostrada.
      4. Abra a variante de página padrão que você acabou de criar.
      O novo layout Playbook Experience já inclui controladores e componentes preenchidos com dados, mas há mais algumas configurações a serem feitas. Para fazer as configurações restantes, vá para a etapa 6.
    5. Se você usou o modelo de registro padrão ou criou sua página do zero, adicione o controlador de IU de layout personalizado do Playbook à página.
      1. No canto inferior da nova página, selecione o ícone de dados ( ícone de dados.)
      2. Selecione + Adicionar.
      3. Pesquise "Playbook".
      4. Em Recursos de dados, selecione Controlador de IU de layout personalizado do Playbook e clique em Adicionar.
      5. Saia do painel Recursos de dados.
    6. Configure o controlador de IU de layout personalizado do Playbook que você acabou de adicionar.
      1. Para permitir que os usuários criem um novo registro neste Playbook Experience personalizado em vez do novo formulário de registro padrão, selecione uma cápsula de valor de teste no canto superior esquerdo.
        O popover de valores de teste é aberto.
      2. Certifique-se de que o valor de teste sysID esteja definido como -1e selecione Aplicar.
        Teste valores para sua experiência de playbook, com a tabela e o sysID.
        Um formulário do gerador de registros está disponível quando você abre a visualização. Você deve ser capaz de testar o formulário do gerador de registros e confirmar que novos registros foram criados.
      3. Você também pode atualizar o nome da tabela ou qualquer um dos parâmetros opcionais:
      4. Opcional: Se você quiser codificar os valores de teste, navegue de volta para Dados > Painel de recursos de dados > Instâncias locais de recurso de dadose selecione Página de registro do controlador de IU.
      5. Na guia Configuração do controlador, adicione o SysID primário ou a Tabelaprimária. No popover de valores de teste, esses são os campos sysID e tabela.
        Você pode inserir context.props.table no campo Tabela primária e context.props.sysId para o campo SysID primário.
        Nota:
        Certifique-se de que qualquer tabela ou registro inserido tenha um playbook.
      6. Adicione a Playbook Experience que você deseja usar.
      7. Opcional: Insira valores para os outros campos, se necessário.
        Modo de exibição de atividade Modo de exibição usado para renderizar atividades do Playbook no modo empilhado ou focado
        Consulta do gerador de registro Cadeia de caracteres de consulta codificada para substituir opcionalmente a consulta fornecida para um gerador de registro
        ID de contexto do playbook selecionado ID de contexto opcional do playbook selecionado para link profundo
        ID de contexto da fase selecionada ID de contexto opcional da fase selecionada para link profundo
        ID de contexto da atividade selecionada ID de contexto opcional da atividade selecionada para link profundo
      8. Opcional: Na coluna Saídas, você pode selecionar os valores que deseja codificar.
      O controlador está configurado e você está pronto para adicionar playbook componentes.
    7. Adicione playbook componentes.
      1. Na árvore de componentes, selecione a Guia principal.
        O painel Guia principal é aberto à direita.
      2. No painel Guia principal, selecione + Adicionar.
        Um modal perguntando "Como você deseja criar esta guia?" exibe.
      3. Selecione Iniciar a partir de um contêiner vazio e clique em Avançar.
        Um modal de Configurações da guia é exibido.
      4. Dê um nome e um ícone à sua guia e clique em Criar.
        A guia é adicionada à árvore de componentes e uma tela em branco é exibida.
      5. Na árvore de componentes, na nova guia, selecione + Adicionar componente e pesquise "redimensionável".
      6. Selecione o componente Painéis redimensionáveis, dê um nome a ele e clique em Criar.
      7. Na árvore de componentes, abra o novo componente Painéis redimensionáveis que você acabou de criar.
        O painel dos novos painéis redimensionáveis é aberto à direita.
      8. Configure conforme necessário e clique em Salvar no canto superior direito.
      9. Para adicionar o seletor de fases, localize o novo componente Painéis redimensionáveisna árvore de componentes e selecione + Adicionar componente à esquerda.
      10. Na árvore de componentes, selecione o novo seletor de fases.
        O painel do novo seletor de fases é aberto à direita.
      11. Selecione a predefinição para este componente no Controlador de IU de layout personalizado do Playbook e clique em Salvar no canto superior direito.
        Escolha uma predefinição para o componente.
        Uma mensagem de confirmação é exibida e as entradas e eventos do componente na guia Eventos no painel do seletor de fases são preenchidos automaticamente.
        Configuração do componente.
      12. Para adicionar o Playbook Activity Viewer, localize o componente Painéis redimensionáveisna árvore de componentes e selecione + Adicionar componente à direita.
      13. Repita as etapas 7j e 7k.
      14. Para adicionar os modais do Playbook, localize a guia que você criou na guia principal na árvore de componentes e selecione + Adicionar componente.
      15. Repita as etapas 7j e 7k para os modais do Playbook.
      16. Navegue de volta para o Seletor de fases do Playbooke determine a orientação do seu seletor de fases.
      17. No canto superior direito, clique em Abrir para visualizar o layout playbook.
      18. Retornar para Construtor de IU.
      19. Navegue de volta para o seletor de fases na árvore de componentes e determine a orientação do seletor de fases no painel que é aberto à direita.