Início rápido do Construtor de IU

Este início rápido orienta você pelo processo de criação da sua primeira página no Construtor de IU. Criar sua primeira página é a primeira etapa para entender como criar páginas de interface do usuário para o espaço ou as experiências do portal personalizado.

Antes de Iniciar

Função necessária: ui_builder_admin

Neste Construtor de IUinício rápido, você executa as seguintes tarefas para criar sua primeira página em 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.
• Crie sua página adicionando componentes. Para obter mais informações sobre componentes, consulte Personalize Construtor de IUpáginas que usam componentes.
• Salve sua página.
• Visualize sua página para ver como ela fica em um navegador.

Procedimento

1. Navegar até Tudo > Estrutura do Now Experience > Construtor de IU.

   Figura 1. Iniciar Construtor de IU

   

2. Selecione uma experiência na qual você deseja trabalhar em Construtor de IUpágina inicial.
   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 crie 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.
   1. Selecione E ícone no Páginas seção.
      
   2. Selecione Crie uma nova página .
      
   3. Selecione → Crie do zero em vez disso .
      

      Você também pode criar páginas usando modelos de página, consulte Criar uma página a partir de modelopara obter mais informações.

   4. Entrar Página inicial como o nome exclusivo da página no Nome campo.
   5. Especifique um caminho para sua página no Caminho da URL campo. Construtor de IUgera um caminho padrão com base no nome fornecido na última etapa.
      Um caminho padrão é adicionado com base no nome da sua página. Você também pode criar seu próprio caminho. O caminho é obrigatório e deve ser exclusivo. O caminho pode incluir dígitos (0-9), letras (A-Z, a-z) e alguns caracteres especiais ( "-" , "." , "_" , "-" ), com as palavras separadas por uma barra ou hífen. . Visualização de URL mostra o caminho da sua página.

      

      Nota:

      O escopo da aplicação é padronizado para o escopo em que o usuário está atualmente no ServiceNow AI Platform®. Para obter mais informações sobre o escopo da aplicação, consulte Saiba mais sobre segurança e funções.
   6. Selecione Continuar.
   7. Opcional: Selecione parâmetros ao URL da sua página E Adicionar .
      Para obter mais informações, consulte Gerenciar Construtor de IUpáginas e variantes de página.
   8. Selecione Bom aspeto .
   9. Entrar Página inicial do gerente como o nome da variante de página.
   10. Opcional: Adicione um ou mais públicos a esta página.
       Se um público de que você precisa não estiver listado, você poderá escolher Públicos abertos na plataforma link para criar um.
   11. Opcional: Adicione condições para quando exibir a página ou guia.
   12. Selecione Continuar.
   13. Na tela seguinte, selecione Crie responsivo .
   14. Selecione Criar para criar sua página em branco.
   Parabéns! Você criou sua primeira página! 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. Selecione Editor para começar a adicionar a personalização da sua página.
   
5. Adicione um componente de contêiner à sua página.
   Um contêiner é o que contém seus componentes. Pense em um contêiner como uma área da página onde você adiciona informações, imagens ou funcionalidades (seus componentes). Você pode ter quantos contêineres em uma página quiser, com quantos contêineres dentro de contêineres, com quantos componentes nos contêineres.
   1. Selecione - Adicionar conteúdo na árvore de conteúdo.
      
   2. Selecione Coluna única layout na caixa de ferramentas.
   3. Selecione Layout da coluna 1 na árvore de conteúdo para realçar o contêiner.
      
   4. Selecione o nome do componente no painel de configuração.
      
   5. Em Rótulo do componente campo, tipo Contêiner para título .
   6. Em ID do componentecampo, tipo container_for_heading .
   7. Selecione Aplicar.

      Veja se o nome do layout da coluna muda para Contêiner para título na árvore de conteúdo. A árvore de conteúdo é um conceito importante. A árvore de conteúdo é uma maneira fácil de ver o layout estruturado da sua página. A árvore de conteúdo é especialmente importante quando você tem vários componentes em sua página. Você seleciona o componente na árvore de conteúdo para destacar o componente na página, facilitando a criação da página. Você pode fazer uma pesquisa de texto para um componente.

      

      Para obter mais informações sobre IDs de componente, consulte ID do componente.

   Você adicionou com sucesso o layout da primeira coluna à sua página.
6. Adicione um Título para o layout da coluna.
   Você pode adicionar componentes à página de maneiras diferentes. Para obter mais informações sobre como adicionar componentes à sua página, consulte Adicionar e configurar componentes.
   1. Selecione - Adicionar conteúdo na árvore de conteúdo abaixo do layout da coluna criado na etapa 5.
      
   2. Tipo título na pesquisa e selecione Título componente.
   3. Selecione seu novo Título componente na árvore de conteúdo para realçá-lo.
   4. Selecione Nenhum no painel de configuração.
   5. Selecione o nome do componente no painel de configuração.
   6. Em Rótulo do componente campo, insira Cabeçalho personalizado como o rótulo exclusivo do componente de título.
   7. Em ID do componente campo, insira custom_heading Como o ID exclusivo do componente de título.
   8. Clique em “Aplicar”.
      
7. Personalize o componente de título.
   1. Selecione o componente de título na árvore de conteúdo.
   2. Selecione Configurar no painel de configuração.
   3. Em Rótulo , insira o texto do título, como Meu novo título .
   4. O Estilo muda o tamanho do texto do título.
      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. Para obter mais informações sobre como configurar componentes, consulte Configure componentes em Construtor de IU.
   5. Saia do Nível como 1 .
   6. Selecione Save (Salvar).
   Você adicionou e personalizou um componente de título à sua página.
8. Adicione um layout de segunda coluna à sua página.
   1. Semelhante a antes, selecione - Adicionar conteúdo na árvore de conteúdo.
      
   2. Selecione Coluna única layout na caixa de ferramentas.
   3. Selecione Layout da coluna 1 na árvore de conteúdo para realçar o contêiner.
      
   4. Selecione o nome do componente no painel de configuração.
   5. Em Rótulo do componente campo, tipo Contêiner para conteúdo .
   6. Em ID do componente campo, tipo container_for_content .
   7. Selecione Aplicar.
      
   8. Selecione Save (Salvar).
   Você adicionou com sucesso seu segundo componente de contêiner à sua página.
9. Adicione um componente de imagem à sua página.
   Uma imagem é uma boa maneira de adicionar um visual à sua página. Neste início rápido, você adiciona uma foto de banco de dados que vem com Construtor de IU. Mas você pode adicionar qualquer imagem que esteja disponível para você.
   1. Selecione - Adicionar conteúdo na árvore de conteúdo abaixo do contêiner criado na etapa 8.
   2. Tipo imagem na pesquisa e selecione Imagem componente.
      Uma imagem padrão é carregada no componente de imagem. Você pode adicionar sua própria imagem adicionando um URL à imagem. Você pode usar imagens hospedadas na internet ou imagens no ServiceNow AI Platform®. Se você usar uma imagem hospedada em um site externo, deverá usar o. https protocolo para segurança.
   3. Selecione Imagem 1 componente no Conteúdo árvore para destacar a imagem.
      
   4. Selecione Nenhum no painel de configuração.
   5. Selecione o nome do componente no painel de configuração.
   6. Em Rótulo do componente campo, tipo Minha imagem .
   7. Em ID do componente campo, tipo my_image .
   8. Selecione Aplicar.
      
   9. Selecione Save (Salvar).
   Você adicionou um componente de imagem à sua página.

   

10. Selecione Visualização em Construtor de IUcabeçalho para visualizar sua página.
    Parabéns! Você concluiu o. Construtor de IUinício rápido. Sua página gera uma visualização de como ela fica na experiência do espaço ou portal.

    

Resultado

1. Sua primeira página foi criada em Construtor de IU.
2. Seu primeiro componente de contêiner foi adicionado à página. Você alterou o rótulo do contêiner.
3. Um adicionado Título componente como um título para o contêiner. Você alterou o texto do título. Você também mudou o rótulo.
4. Adicionado um segundo componente de contêiner à sua página. Você alterou o rótulo do contêiner.
5. Um adicionado Imagem componente. Você alterou o rótulo do componente de imagem.
6. Sua nova página foi salva.
7. Sua página foi visualizada no navegador.

Você concluiu com sucesso o. Construtor de IUinício rápido!