Gerenciar Construtor de IU páginas e variantes de página
Saiba o que é uma página em Construtor de IU. Entenda os blocos de construção de uma página Construtor de IU, como layouts de coluna e componentes.
Construtor de IU início rápido
Layouts de coluna e componentes no Construtor de IU
Layouts de coluna e componentes são os blocos de construção da sua página Construtor de IU. Adicione layouts de coluna e componentes à sua página para criar ou personalizar seu espaço ou experiência no portal. Por exemplo, adicione um layout de coluna e, em uma coluna, coloque um componente de botão que permite aos usuários enviar solicitações.
Você pode adicionar layouts de coluna, colunas e componentes, bem como navegar entre eles, na fase ou na árvore de conteúdo.
Um layout de coluna pode conter uma ou mais colunas. As colunas podem conter componentes. Altere o estilo visual de layouts de coluna, colunas e componentes para personalizar 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 | Preencher 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 em Construtor de IU que seja renderizado na parte superior da página e exija uma ação. |
| Popover | Um popover é um tipo de contêiner que aparece acima de uma página Construtor de IU quando acionado por um evento. Use o componente popover para exibir informações adicionais ou ações relacionadas à página. |
Criar uma página do Construtor de IU
Crie uma página Construtor de IU para criar uma experiência de página do zero ou use um modelo de página. Crie um componente de página 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 sua página Construtor de IU. 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. A visualização da URL mostra o caminho da sua página.
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 dentro de Now Platform®. Para obter mais informações sobre o escopo da aplicação, consulte Saiba mais sobre segurança e funções.
Use um modelo de página Construtor de IU para criar uma página com base em um modelo de página predefinido e personalize 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 um modelo.
Criar uma página do Construtor de IU: configurações avançadas
Adicione os parâmetros obrigatórios à sua página Construtor de IU. Um parâmetro obrigatório é um dado que sua página requer, como um sys_id, uma tabela ou uma consulta. Os parâmetros obrigatórios são úteis para componentes, pois podem ser vinculados ao valor do parâmetro obrigatório. Por exemplo, você pode adicionar um parâmetro de tabela ao campo de URL e vincular os dados a essa tabela. Quando a tabela é referenciada, ela expõe os dados da tabela a todos os componentes da página. Os parâmetros obrigatórios ficam visíveis no URL quando você os adiciona à 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 à sua página Construtor de IU. Parâmetros opcionais são dados opcionais 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 IU variantes de página. Quando você cria uma página, Construtor de IU também cria uma variante da página para você por padrão. Uma variante de página é uma variação da sua página no mesmo caminho que permite direcionar experiências para diferentes públicos usando os critérios do 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 os públicos.
Valores de teste em Construtor de IU
Adicione um valor de teste à sua página Construtor de IU como 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 que os valores de teste mostrem dados, adicione um recurso de dados e configure o recurso de dados para vincular um registro ao valor de teste no URL. Por exemplo, você pode adicionar um incidente como um valor de teste. Em seguida, adicione um recurso de dados chamado Pesquisar um único registro. No campo Tabela, vincule dinamicamente o valor de teste de incidente a uma tabela context.props.table, conforme mostrado na imagem a seguir.
Exibir uma página existente do Construtor de IU
Você pode trabalhar em qualquer página Construtor de IU na sua experiência com base nas configurações da sua função. Clique no nome da página que você deseja trabalhar enquanto estiver na exibição de experiência da sua experiência.
No editor de páginas, abra uma página diferente variante selecionando o menu suspenso no cabeçalho.
Criar uma variante de página do Construtor de IU
Uma variante permite direcionar diferentes públicos com conteúdo diferente, usando os critérios do 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 URL caminho.
Você define o público para cada variante de página Construtor de IU. O público-alvo 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 dos funcionários. Você define o público da página do 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 os públicos.
Para obter mais informações, consulte Criar uma variante de página.
Editar configurações de página do Construtor de IU
Altere as configurações da sua página Construtor de IU a qualquer momento, selecionando Configurações na exibição de experiência Construtor de IU. 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 Editar uma página.
Construtor de IU Árvore de conteúdo
Quando você clica em um componente na árvore de conteúdo, ele é realçado 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 com muito mais facilidade na árvore de conteúdo quando eles são rotulados corretamente.
Construtor de IU Caixa de ferramentas
Use a caixa de ferramentas Construtor de IU para adicionar layouts e componentes à sua página. Acesse a caixa de ferramentas Construtor de IU selecionando + Adicionar componente ou o ícone + na fase.
Pesquise a caixa de ferramentas para encontrar layouts e componentes que você deseja adicionar a uma página Construtor de IU.
Exiba uma breve descrição de um layout ou componente selecionando o ícone de informações Ícone para exibir a dica da ferramenta. A guia de componentes exibirá cores diferentes se um componente puder usar uma predefinição ou estiver combinado com vários componentes.
Construtor de IU fase
A fase é a maior área no editor Construtor de IU e é usada para criar páginas. Adicione seus layouts de coluna e componentes aqui selecionando um botão + ou arrastando do painel Componente para a página.
Na fase, o corpo, os layouts de coluna e as colunas são contornados em roxo. Os componentes são contornados em azul.
Use o ícone de item de árvore para navegar até 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 na coluna.
Selecione o ícone Menu em um layout de coluna ou componente para obter 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.
Dimensionar o tamanho da fase em Construtor de IU
Ajuste o tamanho da fase no editor Construtor de IU selecionando o menu suspenso Largura.
Desfazer e vermelhoem Construtor de IU
Desfaça e refaça as mudanças feitas na página Construtor de IU. Reverta qualquer ação feita em um layout de página, componente, estilo ou layout.
As funções de desfazer e refazer podem ser encontradas na barra de ferramentas do cabeçalho. Você pode selecionar o botão desfazer ( ) ou refazer (
) para reverter uma ação. Você também pode clicar no menu suspenso de desfazer para voltar várias etapas. Você não pode desfazer e refazer mudanças feitas na prateleira de dados.
Você pode desfazer as 20 ações anteriores selecionando o menu suspenso de desfazer.
Construtor de IU Painel de configuração
Use o painel de configuração para trabalhar com componentes, incluindo organização, estilo e configuração de manipuladores de eventos.
- Selecione a guia Configuração para configurar os 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 complexo e contém dezenas de parâmetros de lista editáveis.
- Selecione a guia 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 altere uma cor de fundo, uma borda ou qualquer outro estilo CSS.
Para obter mais informações, consulte Alterar a aparência padrão dos componentes. - Selecione a guia Eventos para configurar eventos que adicionam ações aos seus componentes, páginas, recursos de dados e ações declarativas. Quando você adiciona componentes à sua página Construtor de IU, eles não sã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 Gerenciar ações nas páginas do Construtor de IU (recurso avançado). - A coluna layouts controla como os componentes são organizados em uma página. Ao adicionar um layout de coluna a uma página 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, a largura, as margens, o plano de fundo, as bordas e o preenchimento do layout de coluna, das colunas e dos componentes. A grade CSS é o sistema de layout mais poderoso. A Grade CSS foi criada com base em uma grade bidimensional que oferece poder sobre como criar suas páginas.
Para obter mais informações, consulte Organizar componentes nas páginas do Construtor de IU.
Abrir uma página do Construtor de IU para visualizá-la
Visualize uma página Construtor de IU para ver sua aparência como uma página da web.
Selecione botão para testar a variante na qual você está trabalhando no momento, incluindo modais, janelas de visualização, componentes, recursos de dados e dados dinâmicos. Visualizar uma página variante é útil para ver como parece 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 ao abrir a página. Selecione a seta suspensa ao lado de Visualizar e selecione Abrir caminho de URL ou selecione Visualização > Abrir caminho da URL
.
Para obter mais informações, consulte Saiba como exibir e testar sua experiência Construtor de IU.
Edição de desenvolvedor em Construtor de IU
No menu, edite a página Construtor de IU como desenvolvedor na plataforma. Esta opção permite alterar os detalhes da sua página no nível da plataforma e elimina Construtor de IU. Você deve ter a função apropriada como desenvolvedor.