Gerenciar Construtor de IUpáginas e variantes de página
Saiba em que está uma página Construtor de IU. Entenda os blocos de construção de um Construtor de IU, como layouts de coluna e componentes.
Construtor de IU início rápido
Layouts de coluna e componentes em Construtor de IU
Os layouts de coluna e componentes são os blocos de construção do Construtor de IUpágina. Adicione layouts de coluna e componentes à sua página para criar ou personalizar sua experiência de espaço ou portal. Por exemplo, adicione um layout de coluna e, em uma coluna, coloque um componente de botão que permita que os usuários enviem solicitações.
Você pode adicionar layouts de coluna, colunas e componentes, bem como navegar entre eles, da fase ou da árvore de conteúdo.
Um layout de coluna pode conter uma ou mais colunas. As colunas podem conter componentes. Mude o estilo visual dos layouts de coluna, colunas e componentes para torná-lo sua própria experiência.
| Tipo | Descrição |
|---|---|
| Layout de coluna | Um contêiner flexível com uma a seis colunas. Adicione layouts de coluna para fornecer estrutura e uma estrutura para uma página. |
| Coluna | Preencha colunas com componentes. |
| Componente | Elementos-base de uma página, como botões, listas e formulários. |
| Modal | Use um modal para criar um tipo de página no Construtor de IUque renderiza na parte superior da página e requer ação. |
| Popover | Um popover é um tipo de contêiner que aparece acima de A. Construtor de IUquando acionado por um evento. Use o componente popover para exibir informações ou ações adicionais relacionadas à página. |
Crie uma página do Construtor de IU
Crie um Construtor de IUpágina para criar uma experiência de página do zero ou usar um modelo de página. Crie uma página, um componente de cada vez. Se você usar um dos modelos de página predefinidos, começará a partir de uma estrutura base e poderá personalizá-la para atender às suas necessidades.
Nomeie seu Construtor de IUpágina. Defina o caminho (ou mantenha o caminho padrão que é adicionado automaticamente com base no nome da sua página). Um caminho padrão é adicionado com base no nome da sua página. Você também pode criar seu próprio caminho, mas o caminho deve ser exclusivo. . Visualização de URL mostra o caminho da sua página. Defina o tipo de URL da página. Os tipos de URL ajudam você a categorizar e encontrar páginas importantes na exibição de experiência.
O escopo da aplicação protege as aplicações identificando e restringindo o acesso a arquivos e dados da aplicação. 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.
Use um Construtor de IUmodelo de página para criar uma página com base em um modelo de página predefinido e personalizar a página de acordo com suas necessidades. Você pode fazer referência ou copiar um modelo de página. Para obter mais informações, consulte Criar uma página a partir de modelo.
Criar uma página do Construtor de IU: Configurações avançadas
Adicione os parâmetros necessários ao Construtor de IUpágina. Um parâmetro obrigatório é um pedaço de dados que sua página requer, como sys_id, tabela ou consulta. Os parâmetros obrigatórios são úteis para componentes, pois eles podem se vincular ao valor do parâmetro necessário. Por exemplo, você pode adicionar um parâmetro de tabela ao campo de URL e vincular dados a essa tabela. Quando a tabela é referenciada, ela expõe os dados da tabela a todos os componentes na página. Os parâmetros obrigatórios ficam visíveis no URL quando você os adiciona à sua página. No exemplo a seguir, um parâmetro obrigatório chamado tabela foi adicionado. Observe que ele foi anexado ao URL.
Adicione parâmetros opcionais ao Construtor de IUpágina. Os parâmetros opcionais são partes opcionais de dados que você pode adicionar ao URL da sua página. Ao contrário dos parâmetros obrigatórios, os parâmetros opcionais são sempre pares de nome e valor que funcionam independentemente da ordem em que são fornecidos.
Defina as configurações de público e condições para Construtor de IUvariantes de página. Quando você cria uma página, Construtor de IUpor padrão, também cria uma variante da página para você. R a variante de página é uma variação da sua página no mesmo caminho que permite segmentar experiências para públicos diferentes usando critérios de usuário. Por exemplo, uma página para gerentes e uma variante dessa página para os subordinados diretos do gerente. Para obter mais informações sobre como criar uma variante, consulte Criar uma variante de página.
Para obter mais informações sobre públicos, consulte Saiba mais sobre públicos.
Valores de teste em Construtor de IU
Adicione um valor de teste ao seu Construtor de IUcomo uma forma de trazer dados de teste para a página para fins de teste. Por exemplo, se você adicionar uma tabela como um parâmetro obrigatório, poderá adicionar um valor de teste de incidente e vincular um recurso de dados a ele para trazer dados de teste sobre o incidente para essa tabela.
Para obter valores de teste para mostrar dados, adicione um recurso de dados e configure o recurso de dados para vincular um registro ao valor de teste na URL. Por exemplo, você pode adicionar incidente como um valor de teste. Em seguida, adicione um recurso de dados chamado PESQUISE um único registro . Em Campo de tabela , vincule dinamicamente o valor de teste de incidente a um context.props.table conforme mostrado na imagem a seguir.
Exiba uma página do Construtor de IU existente
Você pode trabalhar em qualquer Construtor de IUem sua experiência com base nas configurações de sua função. Clique no nome da página na qual você deseja trabalhar enquanto estiver na exibição de experiência da sua experiência.
No editor de páginas, abra uma variante de página diferente selecionando o menu suspenso no cabeçalho.
Crie uma variante de página do Construtor de IU
Uma variante permite segmentar públicos diferentes com conteúdo diferente, usando critérios de usuário. Por exemplo, você pode criar uma página inicial para agentes e uma variante da página para gerentes que existe no mesmo caminho de URL.
Você define o público para cada um Construtor de IUvariante de página. O público determina quem usa a variante de página. Por exemplo, se você criar uma página de solicitação de viagem, crie uma variante dessa página para que os gerentes gerenciem as solicitações de viagem do funcionário. Você define o público da página de gerente para qualquer pessoa na função de gerente. Os funcionários não podem exibir essa variante. Para obter mais informações sobre públicos, consulte Saiba mais sobre públicos.
Para obter mais informações, consulte Criar uma variante de página.
Edite as configurações da página do Construtor de IU
Altere as configurações do Construtor de IUA qualquer momento, selecionando o ícone Mais ações em seguida Configurações de exibição em Construtor de IUexibição da experiência. Você pode mudar o nome, o caminho e os parâmetros da sua página depois de criar uma página.
Para obter mais informações, consulte Edite uma página.
Construtor de IU Árvore de conteúdo
Quando você clica em um componente na árvore de conteúdo, ele destaca o componente na fase para que você possa configurar, adicionar estilo, eventos, dados e assim por diante. Você pode arrastar itens na árvore de conteúdo para reorganizar sua página.
É importante adicionar um rótulo de componente ao adicionar um componente à sua página. O rótulo do componente é usado na árvore de conteúdo para aplicar IDs de rótulos a cada componente na árvore de conteúdo. Você pode identificar os componentes muito mais facilmente na árvore de conteúdo quando eles são rotulados adequadamente.
Construtor de IU Caixa de ferramentas
Use o. Construtor de IUcaixa de ferramentas para adicionar layouts e componentes à sua página. Acesse o. Construtor de IUcaixa de ferramentas selecionando - Adicionar conteúdo ou o. E ícone na fase.
PESQUISE a caixa de ferramentas para encontrar layouts e componentes que você deseja adicionar a um Construtor de IUpágina.
Para exibir uma breve descrição de um layout ou componente, selecione o ícone de informações para exibir a dica de ferramenta. A guia Componentes exibe cores diferentes se um componente puder usar uma predefinição ou estiver empacotado com vários componentes.
Construtor de IU fase
A fase é a maior área em Construtor de IUe é usado para criar páginas. Adicione layouts de coluna e componentes aqui selecionando um botão de adição ou arrastando do painel de componente para a página.
No palco, o corpo, os layouts de coluna e as colunas são delineados em magenta. Os componentes são destacados em azul.
Use o ícone de item de árvore para navegar para uma camada diferente de conteúdo. Por exemplo, se uma coluna for selecionada, navegue facilmente até o layout da coluna primária ou um componente dentro da coluna.
Selecione o ícone Menu em um layout de coluna ou componente para opções como duplicar e excluir.
As mudanças feitas na fase são refletidas no painel Estilos à direita. As mudanças feitas no painel Estilos atualizam imediatamente os elementos na fase.
Dimensione o tamanho da fase em Construtor de IU
Ajuste o tamanho da fase no Construtor de IUSelecionando o menu suspenso Largura.
Desfazer e Refazer em Construtor de IU
Desfaça e refaça as mudanças feitas no Construtor de IUpágina. Reverta qualquer ação que você fizer em um layout de página, componente, estilo ou layout.
A função desfazer e refazer pode ser encontrada na barra de ferramentas do cabeçalho. Você pode selecionar desfazer ( ) ou refazer (
) para reverter uma ação. Você também pode clicar no menu suspenso Desfazer para voltar várias etapas. Não é possível desfazer e refazer as mudanças feitas na prateleira de dados.
Você pode desfazer as 20 ações anteriores selecionando o menu suspenso Desfazer.
Construtor de IU Painel de configuração
Use o painel de configuração para trabalhar com componentes, incluindo organizar, estilizar e configurar manipuladores de eventos.
- Selecione Configuração para configurar componentes. Cada componente tem diferentes opções de configuração que permitem controlar as partes necessárias do componente. Por exemplo, um componente de botão é simples e você só pode configurar sua aparência, rótulo e algumas propriedades. Um componente de lista é mais complicado e contém dezenas de parâmetros de lista editáveis.
- Selecione Estilos no painel de configuração para adicionar estilo a um componente. Você pode usar folhas de estilo em cascata (CSS) baseadas em padrões para mudar o estilo visual de um componente. Por exemplo, adicione ou mude uma cor de fundo, uma borda ou qualquer outro estilo CSS.
Para obter mais informações, consulte Mude a aparência padrão dos componentes. - Selecione Eventos . para configurar eventos que adicionam ações a seus componentes, páginas, recursos de dados e ações declarativas. Quando você adiciona componentes ao Construtor de IU, eles não estão configurados para executar nenhuma ação. Por exemplo, um componente de botão é estático e não faz nada até que você vincule uma ação de evento a ele, como excluir um registro.
Para obter mais informações, consulte Gerencie ações nas páginas do Construtor de IU. - Coluna l layouts governe como os componentes são organizados em uma página. Quando você adiciona um layout de coluna a um Construtor de IU, você pode configurar como deseja que o layout seja projetado. Depois de adicionar um componente a uma coluna no layout, você pode configurar os elementos de maneiras mais avançadas. Por exemplo, você pode justificar o conteúdo, alinhar itens e definir a altura, largura, margens, plano de fundo, bordas, e preenchimento do layout de coluna, colunas e componentes. CSS grade é o sistema de layout mais poderoso. CSS Grid é construído sobre uma grade bidimensional que lhe dá poder sobre como você cria suas páginas.
Para obter mais informações, consulte Organizar componentes nas páginas do Construtor de IU.
Abra uma página do Construtor de IU para visualizá-la
Visualizar um Construtor de IUpágina para ver como a página se parece como uma página da web.
Selecione botão para testar a variante na qual você está trabalhando no momento, incluindo modais, viewports, componentes, recursos de dados, e dados dinâmicos. Visualizando uma página variante é útil para ver como . e funciona ao criar uma experiência.
Outro método de visualizar uma página é solicitar o caminho da URL do servidor. Use este método para testar se um usuário vê a variante quando abre a página. Selecione a seta suspensa ao lado de Visualização e selecione Abrir caminho do URL ou selecione Visualização > Abrir caminho do URL
.
Para obter mais informações, consulte Saiba como exibir e testar seu Construtor de IUexperiência.
Desenvolvedor editando em Construtor de IU
No Menu, edite o. Construtor de IUcomo desenvolvedor na plataforma. Esta opção permite alterar os detalhes no nível da plataforma da sua página e retira você de Construtor de IU. Você deve ter a função adequada como desenvolvedor.