API da página de IU - ServiceNow Fluent

A API da página de IU define páginas personalizadas de interface do usuário (IU) [sys_ui_page] que exibem formulários, caixas de diálogo, listas e outros componentes de IU.

Uma página de IU é exibida como uma página da web e pode ser adicionada a um widget para uso em painéis. Para obter informações gerais sobre páginas de IU, consulte UI pages.

Você pode desenvolver uma aplicação React simples com a API de página de IU. Em src/cliente , adicione arquivos de conteúdo estático que definem o HTML, o script do cliente e o estilo da página. Em UiPage Objeto, consulte o ponto de entrada HTML da página ( index.html ). Para obter mais informações, consulte Desenvolvimento da interface do usuário com o React.

Conceitos relacionados

• ServiceNow Fluent

Objeto UIPage

Crie uma página de IU [sys_ui_page] para uma interface de usuário personalizada.

Tabela 1. Propriedades

Nome	Tipo	Descrição
id	Cadeia de caracteres ou número	Necessário. Um ID exclusivo para o objeto de metadados. Quando você cria a aplicação, este ID é hash em um sys_id exclusivo. Para obter mais informações, consulte ServiceNow Fluent construções de linguagem. Formato: Now.ID['Cadeia de caracteres' ou número]
endpoint	Cadeia de caracteres	Necessário. O endpoint para acessar a página da web. O valor do endpoint não pode conter espaços. Formato: <scope>_<ui_page_name>.do
descrição	Cadeia de caracteres	Uma descrição da interface do usuário e sua finalidade.
direto	Booliano	Sinalizador que indica se o HTML, CSS e JavaScript padrão devem ser omitidos para uma página de IU. Para páginas de IU do React, defina esta propriedade como verdadeiro . Valores válidos: Verdadeiro: Omita o HTML, CSS e JavaScript padrão e forneça CSS e JavaScript personalizados para a página. Falso: Inclua o HTML, CSS e JavaScript padrão. Padrão: falso
html	Cadeia de caracteres	O código HTML do corpo que define o que é renderizado quando a página é mostrada. Ele pode conter XHTML estático, conteúdo gerado dinamicamente definido como Jelly ou inclusões de script de chamada e macros de IU. Esta propriedade oferece suporte a um alias para importar um index.html Arquivo para desenvolvimento do React, uma referência a outro arquivo na aplicação que contém HTML ou JavaScript em linha. Nota: Com o desenvolvimento do React e HTML importado, o. html propriedade do UiPage o objeto oferece suporte somente à sincronização unidirecional. Depois de definir o HTML de uma página de IU no código-fonte, se o HTML for modificado fora do código-fonte, essas mudanças não serão sincronizadas e refletidas no código-fonte. Formato: Um alias para importar o. index.html Arquivo da compilação anterior para desenvolvimento de IU com o React. O alias pode ser qualquer valor e também deve ser importado no now.ts arquivo que contém o. UiPage objeto: importar <alias> de "path/to/index.html" . Para usar conteúdo de texto de outro arquivo, consulte um arquivo na aplicação usando o seguinte formato: Now.include('path/to/file') . Para obter mais informações, consulte ServiceNow Fluent construções de linguagem. Para fornecer HTML em linha, use literais de cadeia de caracteres ou literais de modelo para várias linhas de código: "HTML" ou "html" .
categoria	Cadeia de caracteres	O tipo de página de IU. Valores válidos: Geral: A página é de finalidade geral. páginas iniciais: A página é usada como uma página inicial. Htmleditor: A página é usada para inserir conteúdo HTML. base de conhecimento: A página é usada com um Base de conhecimento. cms: A página é usada com o Sistema de gestão de conteúdo (CMS). catálogo: A página é usada com Catálogo de serviços.
clientScript	Script	Um script que é executado no navegador, como funções chamadas por botões. Este script lida com qualquer processamento necessário no lado do cliente, como definir o foco em um campo ou outros recursos DHTML interativos depois que uma página é carregada. Esta propriedade oferece suporte a JavaScript em linha ou a uma referência a outro arquivo na aplicação que contém um script. Os scripts de cliente para a página de IU são implantados no navegador em um ]]>Para que o conteúdo possa ser definido de forma semelhante no campo HTML. . Script do cliente Em vez disso, a propriedade pode ser usada para definir esses scripts de forma concisa para manter a gerenciabilidade Jelly e HTML. Formato: Para usar conteúdo de texto de outro arquivo, consulte um arquivo na aplicação usando o seguinte formato: Now.include('path/to/file') . Para obter mais informações, consulte ServiceNow Fluent construções de linguagem. Para fornecer um script em linha, use literais de cadeia de caracteres ou literais de modelo para várias linhas de código: "Script" ou "Script" .
ProcessingScript	Script	Um script que é executado no servidor quando a página é enviada, o que é útil se sua página tiver um formulário definido com o. <g:ui_form/> ou <g:form/> marcadores. Esta propriedade é compatível com uma função de um módulo JavaScript, uma referência a outro arquivo na aplicação que contém um script ou JavaScript em linha. Formato: Para funções, use o nome de uma função, expressão de função ou função padrão exportada de um módulo JavaScript e importe-a para o. .now.ts arquivo. Para obter informações sobre módulos JavaScript, consulte Módulos JavaScript e bibliotecas de terceiros. Para usar conteúdo de texto de outro arquivo, consulte um arquivo na aplicação usando o seguinte formato: Now.include('path/to/file') . Para obter mais informações, consulte ServiceNow Fluent construções de linguagem. Para fornecer um script em linha, use literais de cadeia de caracteres ou literais de modelo para várias linhas de código: "Script" ou "Script" .
meta	Objeto	Metadados dos metadados da aplicação. Com o. Método de instalação , você pode mapear os metadados da aplicação para um diretório de saída que carrega somente em circunstâncias específicas. $meta: {       installMethod: 'String' } Valores válidos para Método de instalação : Demonstração: Gera os metadados da aplicação para o. metadados/unload.demo diretório a ser instalado com a aplicação quando Carregar dados de demonstração a opção está selecionada. Primeira instalação: Gera os metadados da aplicação para o. metadados/descarregamento diretório a ser instalado somente na primeira vez que uma aplicação for instalada em uma instância.

Neste exemplo de desenvolvimento de IU com o React, o HTML da página é importado do index.html arquivo no src/cliente diretório.

//incident-manager.now.ts
import '@servicenow/sdk/global'
import { UiPage } from '@servicenow/sdk/core'
import incidentPage from '../../client/index.html'

UiPage({
    $id: Now.ID['incident-manager-page'],
    endpoint: '<scope>_incident_manager.do',
    description: 'Incident Response Manager UI Page',
    category: 'general',
    html: incidentPage,
    direct: true,
})

Em index.html arquivo, o. ]]>o marcador refere-se ao jsx.jsx arquivo no src/cliente que contém o código do componente.

//index.html
<html>
<head>
  <title>Incident Response Manager</title>

  <!-- Initialize globals and Include ServiceNow's required scripts -->
  <sdk:now-ux-globals></sdk:now-ux-globals>

  <!-- Include your React entry point -->
  <script src="./main.jsx" type="module"></script>
</head>
<body>
  <div id="root"></div>
</body>
</html>