Adicionar conteúdo com guias às páginas do Construtor de IU

  • Versão de lançamento: Washingtondc
  • Atualizado 1 de fev. de 2024
  • 12 min. de leitura
  • Use o componente Guias para adicionar conteúdo com guias a páginas em Construtor de IU.

    Crie navegação adicional na sua página Construtor de IU adicionando um componente Tabs à sua página. Use o componente Guias para aninhar componentes nas guias da sua página. As guias podem ser configuradas como guias horizontais na parte superior do conteúdo ou como guias verticais no lado esquerdo ou direito do conteúdo.
    Figura 1. Componente da guia exemplo
    Guias selecionadas em uma visualização de página do Construtor de IU.

    As guias podem ser organizadas no painel de configuração para reordenar como elas são exibidas na página Construtor de IU. Adicione rótulos e ícones personalizados às guias para fornecer identificadores visuais exclusivos para navegar pelas guias.

    Você pode adicionar um dos seguintes tipos de guia à sua página [ Construtor de IU :
    • Guia de contêiner vazio
    • Guia Repetidor
    • Guia Lista relacionada
    • Guias de coleção de páginas

    O componente de guias oferece suporte a qualquer combinação de guias estáticas, guias repetidas, guias de lista relacionada e guias de coleção de páginas. Como alternativa, você ainda pode usar o modo da guia Janela de visualização para adicionar uma série de janelas de visualização.

    Adicionar guias de contêiner vazias

    Use uma guia de contêiner vazia para criar manualmente um conjunto estático de guias na sua página.

    Antes de Iniciar

    Função necessária: administrador

    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.
      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 ou abra uma página ou variante de página.
      Para obter mais informações sobre como criar uma página em Construtor de IU, consulte Criar uma página no Construtor de IU.
    4. Selecione o ícone + na fase para abrir a caixa de ferramentas.
      Seta apontando para o ícone + que abre a caixa de ferramentas.
    5. Selecione um layout de coluna única.
    6. Em seguida, selecione o ícone + na coluna para abrir a caixa de ferramentas.
    7. Adicione um componente de guias à sua página.
      Seta apontando para o componente de guias na caixa de ferramentas.

      Para obter mais informações sobre como adicionar um componente a uma página, consulte Adicionar e configurar componentes.

    8. Selecione + Adicionar guia na fase.
      Seta apontando para as guias + opção adicionar no painel de configuração.
    9. Selecione Iniciar a partir de um contêiner vazio.
      Iniciar a partir de uma opção de contêiner vazia selecionada.
    10. Selecione Avançar.
    11. No formulário, preencha os campos.
      Tabela 1. Formulário de configurações da guia
      Campo Descrição
      Rótulo da guia Rótulo da guia a ser exibido na página.
      Ícone Ícone a ser exibido ao lado do rótulo da guia. Ícones não são obrigatórios.
      Ocultar guia Se deve ocultar ou exibir a guia.
    12. Selecione Criar.
      A nova guia é exibida no componente Guias.
    13. Selecione a nova guia.
    14. Selecione o ícone +.
      Seta apontando para o ícone + para adicionar um componente à guia de demonstração.
    15. Selecione o componente que você deseja adicionar à guia.
      Os componentes são exibidos na guia na qual estão aninhados na árvore de conteúdo. Para obter mais informações, consulte Adicionar e configurar componentes.

    Resultado

    Sua página mostra as duas guias que você criou. Selecione cada guia para configurá-las ainda mais, adicionar um estilo ou adicionar um manipulador de eventos. Para obter mais informações sobre estilo, consulte Alterar a aparência padrão dos componentes. Para obter mais informações sobre como adicionar um manipulador de eventos, consulte Gerenciar ações nas páginas do Construtor de IU (recurso avançado).

    Adicionar guias de repetidor

    Use o componente Tabs para criar um conjunto de guias de repetidor vinculando guias a uma matriz de dados.

    Antes de Iniciar

    Função necessária: administrador

    Por Que e Quando Desempenhar Esta Tarefa

    Você pode usar guias de repetidor para criar várias guias com base na matriz de dados fornecida. Você pode passar o ícone [ , rótulo, contagem e campos como uma chave no objeto. Use a chave de rótulo para adicionar nomes às guias. Use a chave de campo para passar informações para as guias do repetidor. Você pode vincular um agente de dados, estado do cliente ou script do cliente ao provedor da matriz de dados para retornar a matriz de objetos com o esquema correto.

    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.
      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 ou abra uma página ou variante de página.
      Para obter mais informações sobre como criar uma página em Construtor de IU, consulte Criar uma página no Construtor de IU.
    4. Selecione o ícone + na fase para abrir a caixa de ferramentas.
      Seta apontando para o + na fase que abre a caixa de ferramentas.
    5. Selecione um layout de coluna única.
    6. Em seguida, selecione o ícone + na coluna para abrir a caixa de ferramentas.
    7. Adicione um componente de guias à sua página.
      Seta apontando para o componente de guias na caixa de ferramentas.

      Para obter mais informações sobre como adicionar um componente a uma página, consulte Adicionar e configurar componentes.

    8. Selecione + Adicionar guia na fase.
      Seta apontando para a opção + Adicionar no painel de configuração.
    9. Selecione Usar um repetidor.
      Use um repetidor selecionado no modal de seleção da guia.
    10. Selecione Avançar.
    11. Insira um rótulo para a guia do repetidor no campo Rótulo da guia de espaço reservado.
      Este rótulo é atribuído à primeira guia do repetidor e é a única guia exibida na visualização da página.
    12. Selecione Editar no campo Matriz de dados.
      Abra o modal de edição da matriz de dados.
    13. Configure a matriz de dados no editor JSON.
      Chave Tipo de dados Descrição
      ícone Cadeia de caracteres Nome do ícone que aparece em Construtor de IU.
      rótulo Cadeia de caracteres Obrigatório. Nome de exibição da guia em Construtor de IU.
      contagem Número Valor a ser fornecido no rótulo da guia. Vincule dinamicamente a um agente de dados ou a um client script que será exibido no rótulo.
      campos Objeto Objeto que pode ser usado para armazenar informações e passar para os componentes nas guias.
    14. Selecione Aplicar.
      O campo de matriz de dados exibe a configuração da matriz de dados.

      Configurações do repetidor com uma matriz de dados personalizada.

    15. Selecione Criar.
      A nova guia do repetidor aparece na página e na árvore de conteúdo. Somente a guia de espaço reservado aparece ao editar a página.

      Guia do repetidor de espaço reservado realçada na página.

    16. Selecione Salvar.
    17. Selecione o botão Visualizar que abre sua página no tempo de execução, que é uma visualização da aparência da página em uma página da web. para verificar se as guias do repetidor são exibidas na sua página.

    Adicionar guias de coleção de páginas

    Use a página coleções guias para recriar as mesmas guias em várias páginas em Construtor de IU.

    Antes de Iniciar

    Função necessária: administrador

    Por Que e Quando Desempenhar Esta Tarefa

    Uma coleção de páginas é um grupo de páginas pré-criadas disponíveis globalmente. Use guias de coleção de páginas para renderizar cada página em uma coleção de páginas como uma guia. Você pode selecionar uma coleção de páginas existente ou criar a sua própria. Um controlador é necessário para adicionar uma coleção de páginas.

    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.
      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 ou abra uma página ou variante de página.
      Para obter mais informações sobre como criar uma página em Construtor de IU, consulte Criar uma página no Construtor de IU.
    4. Selecione o ícone + na fase para abrir a caixa de ferramentas.
      Seta apontando para o + na fase que abre a caixa de ferramentas.
    5. Selecione um layout de coluna única.
    6. Em seguida, selecione o ícone + na coluna para abrir a caixa de ferramentas.
    7. Adicione um componente de guias à sua página.
      Seta apontando para o componente de guias na caixa de ferramentas.

      Para obter mais informações sobre como adicionar um componente a uma página, consulte Adicionar e configurar componentes.

    8. Selecione + Adicionar guia na fase.
      Seta apontando para a opção + Adicionar no painel de configuração.
    9. Selecione Adicionar uma coleção de páginas.
      Modal de seleção de guia com a opção de adicionar uma coleção de páginas realçada.
    10. Selecione Avançar.
    11. Selecione uma coleção de páginas na lista ou crie uma coleção selecionando + Criar coleção.
      Para criar sua própria coleção de páginas, consulte Criar uma coleção de páginas em várias páginas de IU.Tela de seleção de coleção de páginas com opção para criar uma coleção.
    12. Selecione Adicionar.
      A nova guia de coleção de páginas é exibida na seção Guias do painel de configuração. Somente uma guia de espaço reservado é exibida na visualização da página.

      Guia de coleção de páginas realçada na página.

    13. Selecione Salvar.
    14. Exiba e teste sua página selecionando o botão Visualizar que abre a variante de página..

    Criar uma coleção de páginas em várias páginas de IU

    Crie uma coleção de páginas para acomodar o conteúdo com guias que pode ser usado em experiências.

    Antes de Iniciar

    Função necessária: administrador

    Por Que e Quando Desempenhar Esta Tarefa

    Use coleções de páginas para criar conteúdo com guias em suas experiências com o componente Guias em Construtor de IU.

    As páginas em uma coleção de páginas não têm acesso aos parâmetros de URL ou aos recursos de dados da página primária. Você pode definir condições para páginas em uma coleção de páginas para definir qual página será exibida para determinados públicos. Os modelos de página não são compatíveis com uma coleção de páginas.

    Procedimento

    1. Clique em + Criar coleção.
    2. No formulário, preencha os campos.
      Tabela 3. Criar uma coleção de páginas formulário
      Campo Descrição
      Nome Nome para rastrear sua coleção de páginas internamente.
      Controlador Controlador que define os dados da coleção de páginas.
      IU de shell da aplicação Tipo de IU de shell da aplicação que você deseja usar com a coleção de páginas. O shell da aplicação é o wrapper do conteúdo da página, que é semelhante à funcionalidade de uma página da Web. O shell da aplicação pode mostrar itens como o logotipo da sua empresa, as preferências do usuário e o ícone de pesquisa. Para obter mais informações, consulte Definir experiências de IU usando shells da aplicação.
      Descrição Descrição resumida para ajudar a encontrar sua coleção de páginas. Escreva uma descrição que ajude os construtores de páginas a entender qual conteúdo está incluído na coleção de páginas.
      Escopo da aplicação O escopo da aplicação define de qual aplicação a coleção de páginas faz parte. Para criar uma coleção de páginas em um escopo da aplicação diferente, altere o escopo da aplicação na plataforma e crie uma coleção de páginas em Construtor de IU.
    3. Clique em Criar.
    4. Clique em Editar coleção de páginas.
      Uma nova guia é aberta na tela[] de edição da coleção de páginas .
    5. Clique em Iniciar edição.
    6. Clique em Criar uma página
    7. Insira um nome exclusivo para a página no campo Nome.
    8. Especifique um caminho para sua página no campo Caminho. Construtor de IU gera um caminho padrão com base no nome que você forneceu na etapa anterior.
      Nota:
      O escopo da aplicação é padronizado para o escopo em que o usuário está. Para obter mais informações sobre o escopo da aplicação, consulte Saiba mais sobre segurança e funções.
    9. Clique em Criar.
    10. Opcional: Defina configurações avançadas, como parâmetros obrigatórios e opcionais, bem como configurações de variante.
      1. Selecione Adicionar parâmetros obrigatórios para adicionar os parâmetros necessários à URL da sua página.
        Um parâmetro obrigatório é um dado que sua página requer, como um sys_id, uma tabela ou uma consulta. Os parâmetros obrigatórios são úteis para componentes, pois podem ser vinculados ao valor do parâmetro obrigatório.
        Tela de parâmetros obrigatórios no Construtor de IU.
        Para obter mais informações, consulte Gerenciar Construtor de IU páginas e variantes de página.
      2. Selecione Adicionar parâmetros opcionais para adicionar quaisquer dados opcionais que você queira adicionar ao URL da sua página.
        Ao contrário dos parâmetros obrigatórios, os parâmetros opcionais são sempre pares de nome e valor que funcionam, independentemente da ordem em que são fornecidos.
        Tela de parâmetros opcionais no Construtor de IU.
        Para obter mais informações, consulte Gerenciar Construtor de IU páginas e variantes de página.
      3. Clique no parâmetro obrigatório ou opcional no URL e, no campo Valores de teste, digite um valor, como incidente.
        Você adiciona um valor de teste à sua página para preencher os dados na página como uma forma de testá-la. Por exemplo, se você adicionar uma tabela como um parâmetro obrigatório, poderá adicionar um valor de teste de incidente para trazer dados de teste no incidente para essa tabela.
        Formulário de valor de teste para páginas do Construtor de IU.
        Para obter mais informações sobre valores de teste, consulte Testar valores em uma página.
      4. Selecione a guia Variante para definir as configurações de público e condições da sua página.

        Quando você cria uma página, Construtor de IU também cria uma variante da página para você por padrão. Uma variante de página é uma variação da sua página no mesmo caminho que permite direcionar experiências para diferentes públicos usando os critérios do usuário. Por exemplo, uma página para gerentes e uma variante dessa página para os subordinados diretos do gerente. Para obter mais informações sobre como criar uma variante, consulte Criar uma variante de página.

        Página de configurações da variante padrão no Construtor de IU.

        Para obter mais informações sobre públicos, consulte Saiba mais sobre os públicos.

      5. Clique em Concluído.
    11. Clique em Concluído.
    12. Adicionar e configurar componentes na sua página.
    13. Clique em Salvar.
    14. Opcional: Adicione mais páginas à sua coleção de páginas.
      1. Clique em Menu.
      2. Selecione Criar página.
      3. Repita as etapas 6 a 13.
    15. Feche a janela da coleção de páginas.