Desenvolvimento da interface do usuário com o React
Desenvolva uma interface do usuário (IU) com a biblioteca React para criar uma aplicação de pilha completa no código-fonte.
Visão geral do desenvolvimento de IU com o React
O React é uma estrutura da web padrão do setor para criar componentes de IU que você usa para desenvolver e renderizar interfaces de usuário personalizadas. Um componente React é uma função JavaScript reutilizável e autônoma, como um botão, e é compatível com as sintaxe JavaScript (JS/JSX) e typescript (TS/TSX). Para obter informações gerais sobre o React, consulte Documentação do React no site react.dev.
Com o. IDE da ServiceNowou ServiceNow SDK, Você pode usar o React em sua aplicação com escopo para criar uma página de IU no ServiceNow Fluentcódigo. . ServiceNow FluentA API da página de IU se refere a um ponto de entrada HTML ( index.html ) que carrega a página no endpoint fornecido. Após criar e instalar a aplicação em uma instância, os ativos estáticos são armazenados nas tabelas apropriadas. Para obter um exemplo de uma aplicação React no código-fonte, consulte Exemplos de SDK da ServiceNow GitHubrepositório. Para começar a usar o React, selecione um dos modelos do React ao criar uma aplicação com o. IDE da ServiceNowou ServiceNow SDK.
Processo de desenvolvimento de IU
A lista a seguir é uma visão geral de alto nível do processo para desenvolver uma aplicação React com o. IDE da ServiceNowou ServiceNow SDK:
- Crie uma aplicação e selecione um dos modelos de React.
A aplicação inclui os arquivos e diretórios necessários para o desenvolvimento do React.
- Em src/cliente Diretório, adicione ativos de cliente para uma interface do usuário, como um ponto de entrada HTML ( index.html ), scripts de cliente e folhas de estilo. . index.html o arquivo deve conter
]]>Marque como o ponto de entrada JavaScript. - Defina uma página de IU [sys_ui_page] no código com ServiceNow FluentAPI da página de IU. Em now.ts Arquivo que contém a definição da página de IU, importe o HTML e consulte-o do html propriedade do UiPage objeto.
- Crie a aplicação para executar um script de acúmulo de pré-compilação que agrupa dependências e empacota os ativos do cliente no src/cliente antes de executar o restante do processo de compilação. O processo de compilação de rollup padrão e os plug-ins são usados como o empacotador JavaScript padrão.
Os ativos estáticos são enviados para dist/estático diretório.
- Instale a aplicação para adicionar os ativos estáticos aos arquivos da aplicação [sys_metadata] nas tabelas apropriadas: Ativo de UX [sys_ux_lib_asset], Imagens [db_image] e Ativo de tema de UX [sys_ux_theme_asset] tabelas. Essas tabelas são compatíveis com a adição de arquivos como anexos.Importante:O desenvolvimento de IU com o React é um recurso experimental devido à forma como o conteúdo é fornecido a partir de uma instância e aos tipos de conteúdo e tabelas que são compatíveis no momento.
Limitações
- O HTML da página de IU deve ser modificado somente no código-fonte. As mudanças no HTML de uma página de IU [sys_ui_page] em uma instância não são sincronizadas no código-fonte e provavelmente resultarão em comportamento não intencional.
- Os tipos de conteúdo de áudio, vídeo e WASM não são compatíveis.
- O tamanho máximo de arquivo dos anexos carregados é limitado pelo tamanho configurado com com.glide.attachment.max_sizepropriedade do sistema. Para obter mais informações, consulte Maximum allowed attachment size [Updated in Security Center 1.3].
- Os caminhos de saída devem ser determinísticos.
- O pré-carregamento de conteúdo vinculado a HTML não é compatível (
"pré-carregar"). - Folhas de estilo relativas vinculadas a HTML não são compatíveis (
"folha de estilo"). Em vez disso, importe folhas de estilo para o código ("caminho/para/folha de estilos"). - Não há suporte para importações relativas no CSS.
- Módulos CSS não são compatíveis.
- Somente o roteamento de hash é compatível com páginas de IU.
- A renderização do lado do servidor e os componentes do servidor React não são compatíveis.
Desenvolvimento de página de IU com React
Em A. .now.ts arquivo no src/fluente Uma página de IU é definida em ServiceNow Fluentcódigo. 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 diretório.
//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>//main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './app'
const rootElement = document.getElementById('root')
if (rootElement) {
ReactDOM.createRoot(rootElement).render(
<React.StrictMode>
<App />
</React.StrictMode>
)
}Depois de criar e instalar a aplicação, você pode abrir a página no endpoint fornecido no UiPage objeto ( https://<instance>/<scope>_incident_manager.do ), que exibe uma interface para criar e gerenciar incidentes.