Início rápido do Construtor de IU

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

Antes de Iniciar

Função necessária: ui_builder_admin

Neste Construtor de IU iní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 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.
• Crie sua página adicionando componentes. Para obter mais informações sobre componentes, consulte Personalizar Construtor de IU páginas usando componentes.
• Salve sua página.
• Visualize sua página para ver como ela aparece 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 na página inicial Construtor de IU.
   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.
   1. Selecione o ícone + na seção Páginas e variantes.
      
   2. Selecione Criar uma nova página.
      
   3. Em vez disso, selecione → Criar do zero.
      

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

   4. Insira Página inicial como o nome exclusivo da página no campo Nome.
   5. Especifique um caminho para sua página no campo Caminho da URL. Construtor de IU gera um caminho padrão com base no nome que você forneceu na última etapa.
      Um caminho padrão é adicionado com base no nome da 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 (AZ, az) e alguns caracteres especiais ("-", ".", "_", "~"), com as palavras separadas por uma barra ou hífen. A visualização da URL mostra o caminho da sua página.

      

      Nota:

      O padrão do escopo da aplicação é o escopo em que o usuário está atualmente dentro de Now 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: Adicione parâmetros ao URL da página selecionando + Adicionar.
      Para obter mais informações, consulte Gerenciar Construtor de IU páginas e variantes de página.
   8. Selecione Parece bom.
   9. Insira 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 o link Abrir públicos na plataforma para criar um.
   11. Opcional: Adicione condições para quando exibir a página ou a guia.
   12. Selecione Continuar.
   13. Na próxima tela, selecione Criar dinâmico.
   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. 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. Selecione Editor para começar a adicionar e personalizar 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 funcionalidade (seus componentes). Você pode ter quantos contêineres quiser em uma página, 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 o layout de coluna única na caixa de ferramentas.
   3. Selecione Layout de 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. No campo Rótulo do componente, digite Contêiner para o título.
   6. No campo ID do componente, digite container_for_heading.
   7. Selecione Aplicar.

      Veja se o nome do layout da coluna muda para Contêiner no título da á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 na página. Você seleciona o componente na árvore de conteúdo para destacá-lo 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 à página.
6. Adicione um componente de título ao layout de 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 de coluna criado na etapa 5.
      
   2. Digite título na pesquisa e selecione o componente Título.
   3. Selecione o novo componente de título na árvore de conteúdo para destacá-lo.
   4. Selecione Nenhum no painel de configuração.
   5. Selecione o nome do componente no painel de configuração.
   6. No campo Rótulo do componente, insira Cabeçalho personalizado como o rótulo exclusivo para o componente do título.
   7. No campo ID do componente, 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 a guia Configurar no painel de configuração.
   3. No campo 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 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. Para obter mais informações sobre como configurar componentes, consulte Configurar componentes no Construtor de IU.
   5. Deixe o 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 o layout de coluna única na caixa de ferramentas.
   3. Selecione Layout de 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. No campo Rótulo do componente, digite Contêiner para conteúdo.
   6. No campo ID do componente, digite container_for_content.
   7. Selecione Aplicar.
      
   8. Selecione Save (Salvar).
   Você adicionou com sucesso o 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 do banco de imagens que vem com Construtor de IU. Mas você pode adicionar qualquer imagem que esteja disponível.
   1. Selecione + Adicionar conteúdo na árvore de conteúdo abaixo do contêiner criado na etapa 8.
   2. Digite imagem na pesquisa e selecione o componente Imagem.
      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 Now Platform®. Se você usar uma imagem hospedada em um site externo, deverá usar o protocolo https para segurança.
   3. Selecione o componente Imagem 1 na árvore de conteúdo para realçar a imagem.
      
   4. Selecione Nenhum no painel de configuração.
   5. Selecione o nome do componente no painel de configuração.
   6. No campo Rótulo do componente, digite Minha imagem.
   7. No campo ID do componente, digite my_image.
   8. Selecione Aplicar.
      
   9. Selecione Save (Salvar).
   Você adicionou um componente de imagem à sua página.

   

10. Selecione Visualizar no cabeçalho Construtor de IU para visualizar sua página.
    Parabéns! Você concluiu o Construtor de IU início rápido. Sua página gera uma visualização de como ela aparece no espaço ou na experiência do portal.

    

Resultado

1. Criou sua primeira página em Construtor de IU.
2. Adicionou seu primeiro componente de contêiner à página. Você alterou o rótulo do contêiner.
3. Adição de um componente de título como um título ao contêiner. Você alterou o texto do título. Você também alterou o rótulo.
4. Adicionou um segundo componente de contêiner à sua página. Você alterou o rótulo do contêiner.
5. Adição de um componente de imagem. Você alterou o rótulo do componente de imagem.
6. Sua nova página foi salva.
7. Visualizou sua página no navegador.

Você concluiu com sucesso o Construtor de IU início rápido!