Tutorial do Construtor de IU

  • Versão de lançamento: Washingtondc
  • Atualizado 1 de fev. de 2024
  • 8 min. de leitura

    • Saiba como usar o básico 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 personalizado. Para obter mais informações sobre como criar páginas, consulte Criar uma página no Construtor de IU.
    • Altere 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 componentes de 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:
    • Salve sua página com frequência.
    • Visualize sua página para ver como ela fica 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 filtro.
      Figura 1. Iniciar Construtor de IU
      Iniciando o Construtor de IU.
    2. Na página inicial do Construtor de IU, 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 tarefaFaça o seguinte
      Criar página
      1. Selecione o ícone + na seção Páginas e variantes.

        Botão Criar página na página de exibição da experiência.

      2. Selecione Criar uma nova página.

        Modal de seleção de tipo de página.

      3. Em vez disso, selecione Criar do zero.

        Botão Criar do zero.

      4. 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.
      5. No campo 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. A visualização do URL mostra qual será o caminho da sua página.

        Crie uma página chamada Minha página de tutorial.

      6. Selecione Continuar.
      7. (Opcional) Adicione parâmetros ao URL da sua página.
      8. Selecione Parece bom.
      9. Insira o nome da sua variante de página. O nome pode ser o que você quiser. Neste exemplo, você pode digitar Minha primeira variante de página.
      10. Adicione um público para a variante de página selecionando + Adicionar público. Neste exemplo, selecione Administrador.
      11. Selecione Criar.
      12. Depois que sua página é criada, a tela de exibição de experiência é exibida. Selecione Abrir no editor para começar a editar a página. Você pode alterar as 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. Criar página Meu tutorial
      Criando uma página chamada Minha primeira página.
      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 tarefaFaça o seguinte
      Mudar o layout da página para duas colunas
      1. Selecione o nível do corpo da árvore de conteúdo para realçar a página.
      2. Selecione + Adicionar componente na árvore de conteúdo.

        Ponteiro selecionando + Adicionar componente na árvore de conteúdo.

      3. Selecione o layout Duas colunas.

        Seta que aponta para o layout de duas colunas na caixa de ferramentas.

      4. O layout de duas colunas é exibido.

        O layout de duas colunas mostrado na fase.
    5. Adicione um componente de Título e um componente de Botão à coluna à esquerda.
      Para executar esta tarefaFaç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 a Tabela 1.
      1. Selecione o botão + no meio da coluna à esquerda.
      2. Digite Título no campo de pesquisa.
      3. Selecione o componente Título para adicioná-lo ao contêiner. Um componente de título é uma maneira de adicionar texto ou título à sua página.

        Adicionar um componente de título a uma coluna.

      4. Selecione Cabeçalho 1 na árvore de conteúdo.
      5. Selecione Nenhum na lista de predefinições no painel de configuração.
      6. Selecione o nome do componente no painel de configuração para ver o rótulo do componente e o IDdo componente. Você pode alterá-los para o que quiser, desde que sejam exclusivos.

        Atualizando o rótulo e o ID do componente.

      7. Configure o componente Título. Os autores do componente 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ítulo diferentes serão úteis se você tiver dois títulos e quiser que o segundo 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.

          Campo de rótulo de título na guia de configuração do componente com Meu tutorial adicionado.
      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, 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 à 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.

      1. Selecione o sinal + na borda inferior do componente do título que adicionamos na seção anterior.

        Seta apontando para o ícone + para adicionar componentes após o título.

      2. Botão Digite no campo de pesquisa.
      3. Selecione o componente Botão na lista.

        Para obter mais informações sobre como adicionar componentes à sua página, consulte a Tabela 1.

      4. Selecione o nome do componente no painel de configuração para ver o rótulo do componente e o IDdo componente. Você pode alterá-los para o que quiser, desde que sejam exclusivos.
      5. 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.

          Configuração do botão da página inicial.

      6. 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.

          Seta apontando para o link + Adicionar manipulador de eventos.

        • Em Manipuladores de eventos herdados, selecione Vincular ao destino.
        • Clique em Selecionar destino.
        • Na tela Selecionar destino, selecione URL externo.
        • Digite sua URL. Para este tutorial, digite https://www.servicenow.com Selecione OK.
        • Selecione Adicionar.

          Manipulador de eventos configurado para o componente do botão.

          Para obter mais informações sobre manipuladores de eventos, consulte Gerenciar ações nas páginas do Construtor de IU (recurso avançado).
      7. Selecione Salvar. É sempre uma boa ideia salvar sua página com frequência enquanto você trabalha.
      8. Selecionar Exibição.
      9. 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.

      Página do Construtor de IU com um título e um botão configurados.

    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 tarefaFaç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 a Tabela 1.
      1. Selecione o botão + no meio da coluna à direita.
      2. 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.
      3. Selecione o nome do componente no painel de configuração para ver o rótulo do componente e o IDdo componente. Você pode alterá-los para o que quiser, desde que sejam exclusivos.
      4. 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 está disponível na sua instância Construtor de IU.
        • Selecione Adicionar esta fonte.

          Adicionar a fonte de dados ao componente de visualização de dados.

      5. Selecione o menu suspenso Tipo de visualização de dados e selecione Mostrador. Você pode escolher uma variedade de tipos de visualização para melhor atender aos seus dados.
      6. Selecione Cabeçalho e borda no painel de configuração.
      7. Insira Minhas tarefas no campo Título do gráfico.

        Seta apontando para o campo de 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 tarefaFaça o seguinte
      Salve sua página
      1. No canto direito de Construtor de IU, selecione Salvar.
      2. Agora que você salvou sua página, pode acessá-la em sua experiência do a qualquer momento.
    8. Agora, visualize sua página para ver como ela fica em um navegador.
      Para executar esta tarefaFaça o seguinte
      Visualize sua página
      1. Selecione Visualizar no cabeçalho Construtor de IU.
      2. Veja o título na coluna esquerda da página.
      3. 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.
      4. Veja a visualização dos dados da conta do cliente na coluna à direita da página.
        Figura 3. Visualize sua página de tutorial
        Selecione Visualizar para exibir a página do tutorial.
      Parabéns! Você concluiu o tutorial Construtor de IU.

    Resultado

    1. Criou uma página em Construtor de IU.
    2. O layout da sua página foi alterado para ter duas colunas.
    3. Adicionado um componente de título como título à coluna esquerda.
      • Mudou o texto do título.
      • Alterado o rótulo do título.
    4. Adicionado um componente de botão abaixo do componente de título.
      • Configurou seu botão.
      • Adicionado um manipulador de eventos para o botão.
      • Adicionado 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. Rótulo da coluna à direita alterado.
    6. Adicionado um componente de visualização de dados.
      • Configurado o componente de visualização de dados.
      • Adicionado um recurso de dados para trazer dados da tarefa.
    7. Sua nova página foi salva.
    8. Visualizou sua página.