Desenvolver um componente

Adicione seu código de componente e teste-o usando um servidor de desenvolvimento local.

Antes de Iniciar

• Configurar seu ambiente
• Configurar seu projeto

Por Que e Quando Desempenhar Esta Tarefa

Para obter um tutorial sobre como desenvolver um componente de contador, visite o Site do desenvolvedor.

Procedimento

1. No diretório do projeto, navegue até src/<component-name> /index.js .
   Este é o arquivo de código primário de um componente.
2. Adicione seu código de componente.

   Este exemplo mostra um exemplo de componente Hello World.

   import {createCustomElement} from '@servicenow/ui-core';
   import snabbdom from '@servicenow/ui-renderer-snabbdom';
   import styles from './styles.scss';
   
   const view = (state, {updateState}) => {
   	return (
   		<div>Hello World!</div>
   	);
   };
   
   createCustomElement('hello-world', {
   	renderer: {type: snabbdom},
   	view,
   	styles
   });

   Para desenvolver um componente para Virtual Agent, adicione propriedades e ações específicas para interagir com a interface do cliente Virtual Agent. As propriedades necessárias dependem do tipo de componente que você está criando. Para obter mais informações, consulte Desenvolver um componente para Virtual Agent para obter mais informações.
3. Opcional: Adicionar componentes internos.
   Um componente interno é um componente incluído em outro componente. Por exemplo, um componente de cartão pode incluir um componente de botão separado. O componente do botão se torna um componente interno que você deve importar, instalar e definir no projeto do componente do cartão.
   1. Instale o pacote do componente interno executando o comando de instalação usando a ferramenta de linha de comando do seu sistema:

      npm install @servicenow/<now-inner-button> 

   2. Adicione uma declaração de importação à parte superior do arquivo index.js :

      import '@servicenow/<now-inner-button>’;

   3. Use o componente interno no arquivo index.js :

      <now-inner-button label="Click Me" />

   4. Liste o componente interno na matriz components.[component-name].innerComponents no arquivo de configuração now-ui.json.

      {
        "components": {
          "now-chart-timeseries": {
            "innerComponents": [
              "now-inner-button"
            ],

4. Execute o comando do servidor de desenvolvimento para exibir seu componente em um navegador de teste.

   $ snc ui-component develop [--entry entry --open --port port --host host]

   Passe valores para esses argumentos.

   Nome	Descrição
   entrada	Caminho para o módulo de teste no seu projeto de componente. Padrão: example/index.js.
   em aberto	Abre o navegador padrão e navega até a página de teste. Padrão: falso.
   porta	Porta em que o servidor de desenvolvimento é executado. Padrão: 8081.
   Host	Endereço de host a ser usado se você quiser que o servidor de desenvolvimento local seja acessível externamente por outras pessoas. Normalmente definido como 0.0.0.0

   $ snc ui-component develop --entry example/hello.js --open --port 3000

O que Fazer Depois

Implantar um componente em uma instância.

Conceitos relacionados

• Construtor de componente personalizado