Construtor de IU tutorial da página principal

Aprenda a usar o legado Construtor de IU para criar uma página principal personalizada.

Antes de Iniciar

Importante:

O builder descrito nesta página destina-se a criar e editar páginas principais em todos os espaços, exceto o CSM. Para obter informações sobre o novo Construtor de IU que cria e edita todas as páginas no CSM Workspace, consulte Construtor de IU.

Esta tarefa pertence ao legado Construtor de IU, que só permite criar uma página principal. Use a nova versão do Construtor de IU para criar um espaço configurável. Para obter mais informações, consulte Construtor de IU.

Função necessária: workspace_admin ou ui_builder_admin

Por Que e Quando Desempenhar Esta Tarefa

Antes de criar sua página principal, vamos ver como Construtor de IU funciona explorando uma página principal existente.

Procedimento

1. Navegar até Tudo > Experiência de espaço > Administração > Todos os espaços e clique em um espaço para abri-lo.
2. Se a página que é aberta não for editável, clique no link aqui em Para editar este registro, clique aqui para tornar a página editável.
3. Clique em Abrir no Construtor de IU
4. No painel Gestão de páginas, na guia Páginas, clique na página principal Visão geral do incidente.
   Esta página principal aparece no painel Fase. Observe os campos Status e Aplicação acima do painel Configuração. O status ativo significa que a página principal está sendo usada no momento. O campo Aplicação mostra que a página principal está sendo usada pelo ITSM Espaço do agente. Se você clicou em:

   • Desative o, o status mudará para Inativo e a página principal não será mais exibida no espaço.

     O botãoDesativar seria substituído pelo botão Ativar, o que permitiria que você publicasse a página principal no espaço.

     Normalmente, você desativa as páginas principais quando está trabalhando nelas. Por exemplo, para atualizar a página principal atual, você pode:

     1. Clone sua página principal atual.
     2. Trabalhe nele no estado inativo.
     3. Tornar a versão atualizada Ativa.
     4. Tornar a versão original inativa.
   • BotãoSalvar, você salvará todas as mudanças feitas na página principal. Se o Status for:
     • Ativo, as mudanças aparecem imediatamente no espaço.
     • Inativo, as mudanças são salvas, mas não publicadas.
5. Clique nos componentes e veja como os parâmetros de configuração mudam no painel Configuração.
6. Clique em Acontecendo agora.

   O contêiner se torna visível em torno dos quatro componentes menores. Acontecendo agora é o rótulo do contêiner. Procure no painel Configuração em Rótulo. Os contêineres são como você agrupa outros componentes.

7. Com o contêiner ainda realçado, deslize o controle deslizante Mostrar borda para a direita.

   Uma borda é exibida, mostrando o contêiner.

8. Deslize o controle deslizante Pode recolher para a direita.

   Um ícone de acento circunflexo ( ) aparece acima do contêiner. Um agente pode clicar no cursor para recolher o contêiner e tudo o que há nele.

9. No canto superior direito do painel Configuração, clique na seta para a direita (>) para recolher o painel.
10. No painel Fase, clique no contêiner e em seu ícone de configuração ( ).

    

    O painel Configuração é reaberto.

    Você também notará o ícone de movimentação ( ) que pode ser usado para arrastar um componente. Não faça isso ainda.

    O controle deslizante Recolhido no painel Configuração significa que o contêiner começa recolhido e aparece como uma seta para baixo ( ) na qual um agente pode clicar para expandir o contêiner.

    Agora que você viu como usar as diferentes partes da interface, vamos ver como criar uma página principal.

Criar novo tutorial de página principal

Crie uma nova página principal.

Procedimento

1. Na guia Páginas, clique no ícone mais (+) para abrir uma nova página principal.

   

   Você também pode criar uma nova página clicando em Ações da página > +Nova página.

2. No OK. Vamos obter algumas informações gerais para este modal de página, insira o nome da sua página principal e clique em Criar página principal.

   Este título é apresentado acima da Fase, mas não na sua página principal.

   

Tutorial de como adicionar e configurar componentes

Adicionar e configurar componentes em uma página principal.

Procedimento

1. Clique na guia +Adicionar componente e arraste um componente de imagem para o painel Fase.

   Os parâmetros da imagem aparecem no painel Configuração.

2. Arraste um componente de visualização de dados bem abaixo da imagem e solte-o.

   O componente não aparece no painel Fase.

3. Arraste um componente de visualização de dados sobre o componente de imagem, mas não o solte.
   Mova o componente de visualização de dados em torno das bordas do componente de imagem.

   O lado do componente de imagem é realçado quando você move o componente de visualização de dados sobre ele.

4. Segure o componente de visualização de dados sobre o lado esquerdo da imagem e solte-o.

   O componente de visualização de dados aparece à esquerda do componente de imagem.

5. Clique e segure o ícone de movimentação ( ) acima do componente de visualização de dados, arraste-o sobre a borda inferior do componente de imagem e solte-o.

   Agora, você sabe como mover um componente no espaço de destino. O componente de visualização de dados está em branco. Vamos preenchê-lo para que fique visível.

6. No painel Configuração, no campo Relatório, digite incidente.

   Uma lista autocompletável de entradas possíveis é exibida.

7. Clique em Incidentes abertos por prioridade na lista.
   Esse relatório é aberto no componente.
8. No painel Configuração, exclua Incidentes abertos por Prioridade e no campo Widget do PA, digite incidente.
   Uma lista autocompletável de entradas possíveis é exibida. Essas entradas são widgets Performance Analytics (PA).

   Você só pode colocar uma visualização de dados no componente. Portanto, você pode exibir um relatório ou um widget do PA, mas não ambos. Se você colocar entradas para um relatório e um widget do PA, Construtor de IU exibirá somente o relatório.

   Agora você sabe como adicionar e organizar componentes em uma página principal. Vejamos agora como agrupá-los.

Tutorial de agrupar e organizar componentes

Agrupe e organize componentes em uma página principal.

Procedimento

1. Clique em Ações da página, selecione Excluir páginae confirme a exclusão.
2. Selecione o componente de visualização de dados, clique no ícone da lixeira ( ) e no ícone da marca de seleção de exclusão ( ) acima do componente para removê-lo.
   Agora você excluiu componentes em uma página principal. Se quiser, você também pode remover o componente de imagem.
3. Arraste um componente de contêiner para o painel Fase.
4. No painel Componente, insira um valor no campo Rótulo do contêiner e empurre o controle deslizante Mostrar borda para a direita para que você possa ver o contêiner.
5. No campo Rótulo, adicione um título ao contêiner, por exemplo, Listas importantes.
6. Arraste um componente de lista para o contêiner.
7. No painel Componente, no campo Tabela, insira um valor para a tabela de onde vem a lista de registros, por exemplo, incidente.
8. Arraste outro componente de lista para o contêiner.

   Você pode soltar a lista dentro ou fora do contêiner. Solte-o dentro do contêiner.

   

9. No painel Componente, no campo Tabela, insira um valor para uma tabela diferente de onde vem a lista de registros, por exemplo, tarefa.

   Agora você tem dois componentes de lista dentro de um componente de contêiner, que tem um rótulo que descreve as listas.

10. Continue adicionando componentes dentro ou fora do contêiner e usando o ícone de movimentação ( ) para arrastar os componentes e acostumá-los a adicionar, excluir, mover e agrupar componentes.
11. Clique em Salvar.

    Se você estivesse criando uma página principal real, também clicaria em Ativar. Como você não está criando uma página principal real neste tutorial, vamos excluir esta página principal de prática.

Tutorial "Exclua uma página principal"

Exclua uma página principal.

Procedimento

1. Na guia Páginas, selecione a sua página principal.
2. Em Ações da página, clique em Excluir página.

O que Fazer Depois

Agora você tem uma ideia de como usar o Construtor de IU. Você já pode criar a sua primeira página principal.