Construtor de IU tutorial

Aprenda a usar os conceitos básicos de Construtor de IU para criar uma página chamada Meu Tutorial.

Antes de Iniciar

Função necessária: ui_builder_admin

Neste tutorial Construtor de IU, você executa as seguintes tarefas para criar uma página em Construtor de IU:

• Iniciar Construtor de IU.
• Crie uma página para seu espaço ou experiência de portal personalizada. Para obter mais informações sobre como criar páginas, consulte Criar uma página no Construtor de IU.
• Mude o layout da página para ter duas colunas. Para obter mais informações, consulte Organizar componentes nas páginas do Construtor de IU.
• Crie sua página adicionando dois componentesde contêiner .
• Renomeie os componentes do contêiner na árvore de conteúdo.
• Adicione um componente de título e um componente de botão ao primeiro contêiner. Adicione um componente de visualização de dados ao segundo contêiner. Para obter mais informações sobre componentes, consulte Personalizar Construtor de IU páginas usando componentes.
• Configure seus componentes da seguinte forma:
  • Vincule o botão ao site ServiceNow®.
  • Conecte o componente de visualização de dados a uma fonte de dados para exibir os dados da tarefa. Para obter mais informações sobre recursos de dados, consulte Expor dados dinamicamente em páginas do Construtor de IU (recurso avançado).
• Salve sua página com frequência.
• Visualize sua página para ver como ela aparece em um navegador.

Procedimento

1. Navegar até Todos > Estrutura do Now Experience > Construtor de IU.
   Você também pode digitar Construtor de IU diretamente no Navegador de filtros.

   Figura 1. Iniciar Construtor de IU

   

2. Na página inicial Construtor de IU, escolha uma experiência na qual você deseja trabalhar.
   Se você não vir nenhuma experiência listada na qual trabalhar, entre em contato com o administrador para obter acesso a uma experiência ou criar uma experiência. Para obter mais informações, consulte Configure como os usuários interagem com suas aplicações no Construtor de IU.
3. Crie uma página.

   Para executar esta tarefa

   Faça o seguinte

   Criar página

   Selecione o ícone + na seção Páginas e variantes. Selecione Criar uma nova página. Em vez disso, selecione Criar do zero. Insira o nome da sua nova página. O nome pode ser o que você quiser. Neste exemplo, você pode digitar Minha página de tutorial. No campo Caminho, um caminho é inserido automaticamente com base no nome da página. Neste exemplo, o Caminho é my-tutorial-page. O caminho é o URL da página. Você pode mudar este caminho para o que quiser, mas o caminho deve ser exclusivo. O caminho deve estar em letras minúsculas e não conter espaços. A visualização da URL mostra qual será o caminho da sua página. Selecione Continuar. (Opcional) Adicione parâmetros ao URL da página. Selecione Parece bom. Insira o nome da variante de página. O nome pode ser o que você quiser. Neste exemplo, você pode digitar Minha variante de primeira página. Adicione um público para a variante de página selecionando + Adicionar público. Neste exemplo, selecione Administrador. Selecione Continuar. Na próxima tela, selecione Criar dinâmico. Selecione Criar. Depois que sua página é criada, a tela do editor de páginas é exibida. Você pode alterar configurações avançadas, como as configurações de URL e as configurações de variante. Para este tutorial, você pode ignorar essas opções avançadas. Para obter mais informações sobre como alterar configurações avançadas, consulte Criar uma página do Construtor de IU: configurações avançadas. Figura 2. Editor de páginas do Construtor de IU

   Parabéns! Você criou sua página de tutorial! A página está vazia de conteúdo. Você adiciona componentes à página para criar funcionalidade para ela. Componentes são os blocos de construção de uma página. Construtor de IU vem com muitos componentes prontos para você adicionar à sua página. Os componentes podem ser tão simples quanto um Títuloou tão complexos quanto uma Lista.
4. Altere o layout da página para um layout de duas colunas.
   Para obter mais informações sobre layouts, consulte Organizar componentes nas páginas do Construtor de IU.

   Para executar esta tarefa	Faça o seguinte
   Mude o layout da página para duas colunas	Selecione o nível Corpo da árvore de conteúdo para realçar a página. Selecione + Adicionar conteúdo na árvore de conteúdo. Selecione o layout Duas colunas. O layout de duas colunas é exibido.

5. Adicione um componente de título e um componente de botão à coluna esquerda.

   Para executar esta tarefa	Faça o seguinte
   Adicionar um componente de título ao contêiner da coluna esquerda	Você pode adicionar componentes à página de maneiras diferentes. Para obter mais informações sobre como adicionar componentes à sua página, consulte Tabela 1. Selecione o botão + no meio da coluna esquerda. Digite Título no campo de pesquisa. Selecione o componente Título para adicioná-lo ao contêiner. Um componente de título é uma maneira de adicionar texto ou um título à sua página. Selecione Nenhum na lista de predefinições no painel de configuração. Selecione o nome do componente no painel de configuração para ver o rótulo e o ID do componente. Você pode alterá-los para o que quiser, desde que sejam exclusivos. Selecione Aplicar. Configure o componente de título. Os autores de componentes configuram componentes para expor as propriedades apropriadas necessárias para configurar seus componentes. Defina o estilo como Cabeçalho-primário. O estilo muda a classe do texto do título, como fonte, peso e cor. Por exemplo, se você selecionar Cabeçalho secundário, o texto será menor. Tamanhos de títulos diferentes são úteis se você tiver dois títulos e quiser que o segundo título seja menor que o título primário. Insira Meu Tutorial como o texto do título no campo Rótulo. Deixe o Nível como 1.
   Adicionar e configurar um componente de botão ao contêiner da coluna esquerda	Adicione um componente de botão à sua página. Configure o botão alterando o texto e a aparência dele. Em seguida, altere o que acontece quando você clica no botão adicionando um manipulador de eventos para o botão. O manipulador de eventos adiciona uma ação ao botão para vincular à página inicial ServiceNow®. Portanto, quando você clica no botão, a página inicial ServiceNow® é aberta em uma nova guia do navegador. Para obter mais informações sobre como configurar componentes, consulte Componentes. Selecione o + na borda inferior do componente de título que adicionamos na seção anterior. Digite Botão no campo de pesquisa. Selecione o componente Botão na lista. Para obter mais informações sobre como adicionar componentes à sua página, consulte a Tabela 1. Selecione o nome do componente no painel de configuração para ver o rótulo e o ID do componente. Você pode alterá-los para o que quiser, desde que sejam exclusivos. Configure o componente do botão da seguinte forma. Insira Página inicial no campo Rótulo para mudar o nome do botão. Altere o Tamanho para Grande. Insira página inicial no campo de pesquisa Ícone. Selecione Contorno da página inicial. Adicione um manipulador de eventos para configurar qual ação se aplica ao botão. Selecione a guia Eventos no painel de configuração. Em Botão clicado, selecione + Adicionar um novo manipulador de eventos. Em Manipuladores de eventos herdados, selecione Vincular ao destino. Clique em Selecionar destino. Na tela Selecionar destino, selecione URL externa. Digite sua URL. Para este tutorial, digite https://www.servicenow.com Selecione OK. Selecione Adicionar. Para obter mais informações sobre manipuladores de eventos, consulte Gerenciar ações nas páginas do Construtor de IU (recurso avançado). Selecione Salvar. É sempre uma boa ideia salvar sua página com frequência enquanto trabalha. Selecionar Exibição. Teste o botão que você criou nas etapas anteriores.

   Você adicionou e configurou o componente Cabeçalho e Botão para sua página.

   

6. Adicione um componente de visualização de dados ao contêiner.
   Um componente de visualização de dados contém dados que você exibe de maneira visual. Configure os parâmetros do componente de visualização de dados. Em seguida, adicione um recurso de dados a ele.

   Para executar esta tarefa

   Faça o seguinte

   Adicionar e configurar um componente de visualização de dados ao contêiner da coluna à direita

   Você pode adicionar componentes à página de maneiras diferentes. Para obter mais informações sobre como adicionar componentes à sua página, consulte Tabela 1. Selecione o botão + no meio da coluna direita. No campo Pesquisar, comece a digitar Visualização de dados até ver o componente Visualização de dados e selecione o componente para adicioná-lo à sua página. Selecione o nome do componente no painel de configuração para ver o rótulo e o ID do componente. Você pode alterá-los para o que quiser, desde que sejam exclusivos. Adicione um recurso de dados ao seu componente de visualização de dados para trazer dados da conta do cliente. Selecione o componente de visualização de dados e selecione a guia Configurar. Selecione Adicionar fonte de dados. Digite Tarefa [task] no campo de pesquisa e procure uma tarefa que esteja disponível em sua instância Construtor de IU. Selecione Adicionar esta fonte. Selecione o menu suspenso Tipo de visualização de dados e selecione Dial. Você pode escolher uma variedade de tipos de visualização para melhor atender aos seus dados. Selecione Cabeçalho e borda no painel de configuração. Insira Minhas tarefas no campo Título do gráfico.

   Você adicionou um componente de visualização de dados à coluna direita e o configurou. Você também adicionou um recurso de dados para trazer dados da conta do cliente.
7. Salve a nova página uma última vez.

   Para executar esta tarefa	Faça o seguinte
   Salvar sua página	No canto direito de Construtor de IU, selecione Salvar. Agora que você salvou sua página, pode acessá-la em sua experiência a qualquer momento.

8. Agora visualize sua página para ver como ela aparece em um navegador.

   Para executar esta tarefa	Faça o seguinte
   Visualizar sua página	Selecione Visualizar no cabeçalho Construtor de IU. Consulte o título na coluna esquerda da página. Selecione o botão Página inicial. A página inicial ServiceNow® é aberta em outra guia do navegador. Feche a guia do navegador para voltar à página de visualização. Veja a visualização de dados da conta do cliente na coluna direita da página. Figura 3. Visualizar sua página de tutorial

   Parabéns! Você concluiu o tutorial Construtor de IU.

Resultado

1. Página criada em Construtor de IU.
2. Mudou o layout da sua página para ter duas colunas.
3. Adicionou um componente de título como título à coluna esquerda.
   • O texto do título foi alterado.
   • O rótulo do título foi alterado.
4. Adição de um componente de botão abaixo do componente de título.
   • Configurado seu botão.
   • Adicionado um manipulador de eventos para o botão.
   • Adição de um manipulador de eventos para configurar um link para uma página da Web. Quando você clica no botão, ele abre a página da Web.
5. O rótulo da coluna direita foi alterado.
6. Adição de um componente de visualização de dados.
   • Configurado o componente de visualização de dados.
   • Adição de um recurso de dados para trazer dados da tarefa.
7. Sua nova página foi salva.
8. Visualizou sua página.