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

Use o componente Guias para adicionar conteúdo com guias às páginas no Construtor de IU.

Crie navegação adicional no Construtor de IUAdicionando um componente de guias à sua página. Use o componente Guias para aninhar componentes em guias em 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. Exemplo de componente da guia

As guias podem ser organizadas no painel de configuração para reordenar como elas são exibidas no Construtor de IUpágina. Adicione rótulos e ícones personalizados às guias para fornecer identificadores visuais exclusivos para navegar pelas guias. Essas mudanças podem ser exibidas em tempo real enquanto você edita o componente de guias.

Você pode adicionar um dos seguintes tipos de guias ao seu Construtor de IUpágina:

• Guia Contêiner vazia
• Repetidor.
• Guia da lista relacionada
• Guias de coleção de páginas

O componente 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 de guia da janela de visualização para adicionar uma série de janelas de visualização.

Adicione guias de contêiner vazias

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

Antes de Iniciar

Função necessária: administrador

Procedimento

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 ou abra uma página ou variante de página.
   Para obter mais informações sobre como criar uma página no Construtor de IU, consulte Crie uma página no Construtor de IU .
4. Selecione - Adicionar conteúdo botão na fase para abrir a caixa de ferramentas.
   
5. Selecione um Coluna única layout.
6. Em seguida, selecione E na coluna para abrir a caixa de ferramentas.
7. Adicione um Guias para sua página.
   

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

8. Selecione Adicionar guia no palco.
   
9. Selecione Comece a partir de um contêiner vazio .
   
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 exibida em sua página.
    Ícone	Ícone a ser exibido ao lado do rótulo da guia. Os ícones não são obrigatórios.
    Ocultar guia	Se a guia deve ser ocultada ou exibida.

12. Selecione Criar.
    A nova guia é exibida no Guias componente.
13. Selecione a nova guia.
14. Selecione E ícone.
    
15. Selecione o componente que você deseja adicionar à guia.
    Os componentes são exibidos na guia em que 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 estilo ou adicionar um manipulador de eventos. Para obter mais informações sobre estilo, consulte Mude a aparência padrão dos componentes. Para obter mais informações sobre como adicionar um manipulador de eventos, consulte Gerencie ações nas páginas do Construtor de IU.

Adicione guias do repetidor

Use o componente Guias para criar um conjunto de guias do 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 repetidorguias 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 do 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 um script de cliente ao provedor de matriz de dados para retornar a matriz de objetos com o esquema correto.

Procedimento

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 ou abra uma página ou variante de página.
   Para obter mais informações sobre como criar uma página no Construtor de IU, consulte Crie uma página no Construtor de IU .
4. Selecione - Adicionar conteúdo botão na fase para abrir a caixa de ferramentas.
   
5. Selecione um Coluna única layout.
6. Em seguida, selecione E na coluna para abrir a caixa de ferramentas.
7. Adicione um Guias para sua página.
   

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

8. Selecione Adicionar guia no palco.
   
9. Selecione Use um repetidor .
   
10. Selecione Avançar.
11. Insira um rótulo para a guia do repetidor no Rótulo da guia de espaço reservado campo.
    Este rótulo é atribuído à primeira guia do repetidor e é a única guia exibida na visualização da página.
12. Selecione Editar em Matriz de dados campo.
    
13. Configure a matriz de dados no editor JSON.

    Chave	Tipo de dados	Descrição
    ícones	Cadeia de caracteres	Nome do ícone que aparece em Construtor de IU.
    rótulo	Cadeia de caracteres	Necessário . Nome de exibição da guia em Construtor de IU.
    contagem	Número	Valor a ser fornecido no rótulo da guia. Vincular dinamicamente a um agente de dados ou um script de cliente 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.

    

15. Selecione Criar.
    A nova guia do repetidor aparece na página e na árvore de conteúdo.

    

16. Selecione Save (Salvar).
17. Adicione componentes à guia do repetidor.
18. Selecione para verificar se as guias do repetidor são exibidas corretamente em sua página.

Adicione guias de lista relacionada

Crie um conjunto de guias em uma página vinculando a uma lista relacionada.

Antes de Iniciar

Função necessária: administrador

Por Que e Quando Desempenhar Esta Tarefa

A guia Lista relacionada preenche automaticamente as guias com base no registro que sua página está exibindo. Por exemplo, por padrão, as listas relacionadas da tabela de usuários são funções, grupos, delegados e domínios de visibilidade. Se a sua página estiver exibindo um registro de usuário, criar uma guia de lista relacionada adicionará todas as quatro listas relacionadas como guias em sua página. Você pode visualizar a página para ver as listas relacionadas que foram adicionadas. Um controlador de registro é necessário para criar guias de lista relacionada. Para adicionar um controlador à sua página, consulte Vincular dados a Construtor de IUpáginas que usam controladores (recurso avançado)para obter mais informações.

Procedimento

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 ou abra uma página ou variante de página.
   Para obter mais informações sobre como criar uma página no Construtor de IU, consulte Crie uma página no Construtor de IU .
4. Selecione - Adicionar conteúdo botão na fase para abrir a caixa de ferramentas.
   
5. Selecione um Coluna única layout.
6. Em seguida, selecione E na coluna para abrir a caixa de ferramentas.
7. Adicione um Guias para sua página.
   

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

8. Selecione Adicionar guia no palco.
   
9. Selecione Exiba listas relacionadas para um registro .
   
10. Selecione Avançar.
11. No formulário, preencha os campos.

    Tabela 2. Formulário de configurações da guia

    Campo	Descrição
    Rótulo da guia de espaço reservado	Rótulo de espaço reservado para aparecer na guia de visualização da sua página.
    Ocultar guia	Se você deseja ocultar ou exibir a guia.
    Controlador de registros	Controlador de registro com a lista relacionada.

12. Selecione Criar.
    A nova guia da lista relacionada é exibida no Guias do painel de configuração. Apenas uma guia de espaço reservado aparece na visualização da página. O ícone verde ao lado da guia da lista relacionada na árvore de conteúdo mostra quantas guias aparecem na sua página.

    

13. Selecione Save (Salvar).
14. Para exibir e testar sua página, selecione .

Adicionar guias de coleção de páginas

Use guias de coleção de páginas para recriar as mesmas guias em várias páginas no 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 sua própria coleção. Um controlador é necessário para adicionar uma coleção de páginas. Para obter mais informações sobre coleções de páginas, consulte Coleções de páginas.

Procedimento

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 ou abra uma página ou variante de página.
   Para obter mais informações sobre como criar uma página no Construtor de IU, consulte Crie uma página no Construtor de IU .
4. Selecione - Adicionar conteúdo botão na fase para abrir a caixa de ferramentas.
   
5. Selecione um Coluna única layout.
6. Em seguida, selecione E na coluna para abrir a caixa de ferramentas.
7. Adicione um Guias para sua página.
   

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

8. Selecione Adicionar guia no palco.
   
9. Selecione Adicione uma coleção de páginas .
   
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 Crie uma coleção de páginas em várias páginas de IU.

    

12. Selecione Adicionar.
    A nova guia coleção de páginas é exibida no Guias do painel de configuração. Apenas uma guia de espaço reservado é exibida na visualização da página.

    

13. Selecione Save (Salvar).
14. Para exibir e testar sua página, selecione .