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 início rápido Construtor de IU, 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 personalizado. 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 fica em um navegador.

Procedimento

1. Navegar até Todos > 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 de Construtor de IU.
   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.
   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 um 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 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 (AZ, az) e alguns caracteres especiais ("-", ".", "_", "~"), com as palavras separadas por uma barra ou hífen. A visualização do 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 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 sua 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 para 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 guia inserindo uma cadeia de caracteres de consulta codificada.
   12. 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 personalizando 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 componente na árvore de conteúdo.
      
   2. Selecione o layout 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 em Cabeçalho 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 na página. Você seleciona o componente na árvore de conteúdo para realçar 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 à 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 componente na árvore de conteúdo abaixo do layout de coluna criado na etapa 5.
      
   2. Digite o 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 Título 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 do título.
   8. Clique em Aplicar.
      
7. Personalize o componente do 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 seu 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ítulo diferentes serão úteis se você tiver dois títulos e quiser que o segundo 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 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 componente na árvore de conteúdo.
      
   2. Selecione o layout 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 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 recurso visual à sua página. Neste início rápido, você adiciona uma foto de estoque que vem com Construtor de IU. Mas você pode adicionar qualquer imagem disponível.
   1. Selecione + Adicionar componente 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 da 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 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 início rápido Construtor de IU. Sua página gera uma visualização de sua aparência no espaço ou na experiência do portal.

    

Resultado

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

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