Introdução aos layouts personalizados

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

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

    Antes de Iniciar

    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 Playbook Experience Builder 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. Na 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 do 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.
        sysID 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 variante da sua 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 esquerdo da nova página, selecione 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 personalizado Playbook Experience 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 do sysID esteja definido como -1e selecione Aplicar.
        Valores de teste para sua experiência de playbook, com a tabela e o sysID
        Um formulário de gerador de registro está disponível quando você abre a visualização. Você deve ser capaz de testar o formulário do gerador de registro 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 da tabela.
        Você pode inserir context.props.table no campo Tabela primária e context.props.sysId no 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. 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 da guia principal é aberto à direita.
      2. No painel da guia principal, selecione + Adicionar.
        Um modal perguntando "Como você deseja criar esta guia?" é exibido.
      3. Selecione Iniciar a partir de um contêiner vazio e clique em Avançar.
        Um modal de Configurações da guia será exibido.
      4. Dê à sua guia um nome e um ícone 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 pesquisa de componente para "redimensionável".
      6. Selecione o componente Painéis redimensionáveis, dê a ele um nome 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 fase, 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 fase.
        O painel do novo seletor de fase é 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 os eventos do componente na guia Eventos no painel do seletor de fase são preenchidos automaticamente.
        Configuração do componente
      12. Para adicionar o visualizador de atividades do Playbook, 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 fase na árvore de componentes e determine a orientação do seletor de fase no painel que é aberto à direita.