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

Use o componente Guias para adicionar conteúdo com guias a páginas em Construtor de IU.

Crie navegação adicional em sua página Construtor de IU adicionando um componente de Guias à sua página. Use o componente Guias para aninhar componentes em guias na 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 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. Essas mudanças podem ser exibidas em tempo real conforme você edita o componente Guias.

Você pode adicionar um dos seguintes tipos de guias à sua página Construtor de IU :

• Guia de contêiner vazio
• GuiaRepetidor
• Guia Lista relacionada
• Guias de coleção de páginas

O componente de guias é compatível com 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 em 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 > Experiência.
   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 Criação de uma página no Construtor de IU.
4. Selecione o botão + Adicionar conteúdo na fase para abrir 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.
   

   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.
   
9. Selecione Iniciar 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 na página.
    Ícone	Ícone a ser exibido ao lado do rótulo da guia. Os ícones não são necessários.
    Ocultar guia	Se a guia deve ser ocultada ou exibida.

12. Selecione Criar.
    A nova guia é exibida no componente Guias.
13. Selecione a nova guia.
14. Selecione o ícone +.
    
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, adicionar 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 Guias para criar um conjunto de guias de repetidor vinculando-as 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, o rótulo, a contagem e os 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 um script de cliente ao provedor de 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 > Experiência.
   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 Criação de uma página no Construtor de IU.
4. Selecione o botão + Adicionar conteúdo na fase para abrir 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.
   

   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.
   
9. Selecione Usar um repetidor.
   
10. Selecione Avançar.
11. Insira um rótulo para a guia do repetidor no campo Espaço reservado para rótulo da guia.
    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.
    
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.

    

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

    

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

Adicionar 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 da lista relacionada preenche automaticamente as guias com base no registro que sua página está exibindo. Por exemplo, por padrão, as listas relacionadas à tabela do usuário são Funções, Grupos, Delegados e Domínios de visibilidade. Se sua página estiver exibindo um registro de usuário, a criação de 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 IU páginas usando controladores (recurso avançado) para obter mais informações.

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 > Experiência.
   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 Criação de uma página no Construtor de IU.
4. Selecione o botão + Adicionar conteúdo na fase para abrir 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.
   

   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.
   
9. Selecione Exibir listas relacionadas a 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 a ser exibido na guia de visualização da sua página.
    Ocultar guia	Se você deseja ocultar ou exibir a guia.
    Controlador de registro	Controlador de registro com a lista relacionada.

12. Selecione Criar.
    A nova guia da lista relacionada é exibida na seção Guias do painel de configuração. Somente 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 Salvar.
14. Exiba e teste sua página selecionando .

Adicionar guias de coleção de páginas

Use as guias de coleção de páginas 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 e disponíveis globalmente. Use as 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. Para obter mais informações sobre coleções de páginas, consulte Coleções 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 > Experiência.
   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 Criação de uma página no Construtor de IU.
4. Selecione o botão + Adicionar conteúdo na fase para abrir 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.
   

   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.
   
9. Selecione Adicionar 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 Criar uma coleção de páginas em várias páginas de IU.

    

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.

    

13. Selecione Salvar.
14. Exiba e teste sua página selecionando .