Construtor de IU tutorial

Saiba como usar os conceitos básicos de Construtor de IUPara criar uma página chamada Meu tutorial.

Antes de Iniciar

Função necessária: ui_builder_admin

Neste Construtor de IUvocê executa as seguintes tarefas para criar um páginaem Construtor de IU:

• Iniciar Construtor de IU.
• Crie uma página para o espaço ou a experiência do portal personalizado. Para obter mais informações sobre como criar páginas, consulte Crie uma página em 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 contêineres componentes.
• Renomeie os componentes do contêiner na árvore de conteúdo.
• Adicione um Título componente e a. Botão componente para o primeiro contêiner. Adicione um componente de visualização de dados para o segundo contêiner. Para obter mais informações sobre componentes, consulte Personalize Construtor de IUpáginas que usam componentes.
• Configure seus componentes da seguinte forma:
  • Vincule o botão ao ServiceNow®site.
  • Conecte o. Visualização de dados componente para uma fonte de dados para exibir dados da tarefa. Para obter mais informações sobre recursos de dados, consulte Expor dados dinamicamente nas páginas do Construtor de IU (recurso avançado).
• Salve sua página com frequência.
• Visualize sua página para ver como ela fica em um navegador.

Procedimento

1. Navegar até Tudo > 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. Em Construtor de IUpágina inicial, escolha uma experiência na qual você deseja trabalhar.
   Se você não vir nenhuma experiência listada para 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 E ícone no Páginas seção. Selecione Crie uma nova página . Selecione Em vez disso, crie 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 . Em Caminho um caminho é inserido automaticamente com base no nome da sua 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 minúsculas e não conter espaços. . Visualização de URL mostra qual será o caminho da sua página. Selecione um tipo de página de URL no Tipo lista suspensa. Os tipos de página de URL ajudam você a categorizar e encontrar páginas importantes na exibição de experiência. Selecione Continuar. (Opcional) Adicione parâmetros ao URL da sua página. Selecione Bom aspeto . Insira o nome da variante da página. O nome pode ser o que você quiser. Neste exemplo, você pode digitar Minha variante da primeira página . Selecione um público para a variante de página - Adicione um público . Neste exemplo, selecione Administrador . Selecione Continuar. Na tela seguinte, selecione Crie responsivo . Selecione Criar. Após a criação da sua página, a tela do editor de páginas é exibida. Você pode alterar configurações avançadas, como Configurações de URL e. Variante configurações. 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. Os componentes são os blocos de construção de uma página. Construtor de IUvem com muitos componentes prontos para você adicionar à sua página. Os componentes podem ser tão simples quanto a. Título , ou tão complexo como a. Lista .
4. Mude 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 Corpo nível do Conteúdo árvore para realçar a página. Selecione - Adicionar conteúdo na árvore de conteúdo. Selecione Duas colunas layout. Selecione Adicionar. O layout de duas colunas é exibido.

5. Adicione um Título e um Botão componente na coluna esquerda.

   Para executar esta tarefa	Faça o seguinte
   Adicione 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 E botão no meio da coluna esquerda. Tipo Título no campo de pesquisa. Selecione Título componente para adicioná-lo ao contêiner. Um componente de título é uma maneira de adicionar texto ou um título à sua página. Selecione Adicionar. Selecione o nome do componente no painel de configuração para ver o. Rótulo do componente e. ID do componente . Você pode alterá-los para o que quiser, desde que sejam exclusivos. Selecione Aplicar. Configure seu Título componente. Os autores de componentes configuram os 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, espessura e cor. Por exemplo, se você selecionar Cabeçalho-secundário , o texto é 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 principal. Entrar Meu tutorial como o texto do título no Rótulo campo. Deixe o nível como 1 .
   Adicione e configure um componente de botão ao contêiner da coluna esquerda	Adicione um Botão para sua página. Configure o botão alterando o texto e a aparência dele. Em seguida, mude 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 ao ServiceNow®página inicial. Quando você clica no botão, o. ServiceNow®a página inicial é aberta em uma nova guia do navegador. Para obter mais informações sobre como configurar componentes, consulte Componentes . Selecione E na borda inferior do componente de título que adicionamos na seção anterior. Tipo Botão no campo de pesquisa. Selecione Botão componente na lista. Para obter mais informações sobre como adicionar componentes à sua página, consulte Tabela 1 . Selecione o nome do componente no painel de configuração para ver o. Rótulo do componente e. ID do componente . Você pode alterá-los para o que quiser, desde que sejam exclusivos. Configure o componente do botão da seguinte forma. Entrar Página inicial No campo Rótulo para mudar o nome do seu botão. Mude o tamanho para Grande . Entrar página inicial em Ícone campo de pesquisa. Selecione Descrição da página inicial . Adicione um manipulador de eventos para configurar qual ação se aplica ao botão. Selecione Eventos no painel de configuração. Em Botão clicado, selecione - Adicione um novo manipulador de eventos . Em Manipuladores de eventos herdados, selecione Link para o destino . Clique em Selecione o destino . Em Selecione o destino , selecione URL externa . Digite seu URL. Para este tutorial, digite https://www.servicenow.com Selecione OK . Selecione Adicionar. Para obter mais informações sobre manipuladores de eventos, consulte Gerencie ações nas páginas do Construtor de IU. Selecione Save (Salvar). Sempre é uma boa ideia salvar sua página com frequência enquanto você trabalha. Selecionar Exibição. Teste o botão que você criou nas etapas anteriores.

   Você adicionou e configurou o. Título e. Botão componente da sua página.

   

6. Adicione um Visualização de dados componente para o 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

   Adicione e configure 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 E botão no meio da coluna direita. Em Pesquisa campo, comece a digitar Visualização de dados até que você veja 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 do componente e. 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, em seguida, selecione Configurar . Selecione Adicionar fonte de dados. Tipo Tarefa [tarefa] no campo de pesquisa e procure uma tarefa que esteja disponível no Construtor de IUinstância. Selecione Adicionar esta fonte. Selecione Tipo de visualização de dados e selecione Disque . 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. Entrar Minhas tarefas em Título do gráfico campo.

   Você adicionou um Visualização de dados e configurado para a coluna da direita. 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
   Salve sua página	No canto mais direito de Construtor de IU, selecione Salvar . Agora que você salvou sua página, pode acessá-la na sua experiência a qualquer momento.

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

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

   Parabéns! Você concluiu o. Construtor de IUtutorial.

Resultado

1. Criou uma página em Construtor de IU.
2. O layout da sua página foi alterado para ter duas colunas.
3. Um adicionado Título componente como um título para sua coluna esquerda.
   • Texto do título alterado.
   • O rótulo do título foi alterado.
4. Um componente de botão foi adicionado abaixo do componente de título.
   • Seu botão foi configurado.
   • Adicionado um manipulador de eventos para seu botão.
   • Adicionado um manipulador de eventos para configurar um link para uma página da web. Quando você clica no botão, a página da web é aberta.
5. Rótulo da coluna direita alterado.
6. Um adicionado Visualização de dados componente.
   • Componente de visualização de dados configurado.
   • Recurso de dados adicionado para trazer dados da tarefa.
7. Sua nova página foi salva.
8. Sua página foi visualizada.