Notas de versão Next Experience Components

  • Versão de lançamento: Washingtondc
  • Atualizado 1 de fev. de 2024
  • 10 min. de leitura

    • O ServiceNow® Next Experience Components são os componentes usados para criar interfaces de usuário personalizadas. Next Experience Components foi aprimorado e atualizado na versão Washington DC.

    Next Experience Components destaques para a versão Washington DC

    • Crie experiências de IU avançadas com sistema pré-criado ou componentes personalizados. Para exibir a referência da API Next Experience Components, a orientação de uso e a documentação de configuração ServiceNow® Construtor de IU, visite o documento Componentes do Next Experience do site do desenvolvedor.
    • Use padrões e princípios comuns de componente da Web, como uma estrutura JavaScript, dados imutáveis e manipuladores de ação simples.
    • Reutilize componentes em várias interfaces de usuário para criar uma experiência coesa para os usuários finais.
    • Use valores de propriedade predefinidos para configurar propriedades e manipuladores de eventos automaticamente para um componente para que o componente esteja pronto para funcionar quando você o adicionar a uma página. As predefinições podem se conectar a um controlador que atua como um recurso de dados para o componente. Para obter mais informações, consulte Automatically configure components using presets e Bind data to UI Builder pages using controllers (advanced feature).
    • Componentes atualizados para acessibilidade. Para obter mais informações, consulte a seção Informações de acessibilidade nessas notas de versão.

    Novidades da versão Washington DC

    Tabela 1. Componentes
    Componente Descrição
    Seletor de cor Uma biblioteca de cores que pode ser usada para pesquisar, selecionar e salvar cores. Os valores de códigos hexadecimais, RGB e HSL são aceitos, e cores personalizadas podem ser usadas.
    Itens relacionados Informações relacionadas a um registro de caso exibidas com cartões no painel lateral e categorizadas em um acordeão expansível. Opcionalmente, o usuário pode exibir os dados como uma lista completa com recursos de classificação e filtragem.
    Tabela 2. Modelos de página
    Modelo Descrição
    Confirmar e publicar modal Modal usado como modelo de página que permite que os usuários Gestão de conhecimento publiquem artigos no Base de conhecimento.
    Página de registro vertical Modelo de página usado para gerenciar listas relacionadas e páginas de IU em uma página de registro em grupos. Este modelo de página contém valores predefinidos que fazem a página funcionar sem exigir configuração complexa.
    Descontinuar modal de confirmação Modal usado como modelo de página que permite que os usuários Gestão de conhecimento desativem artigos obsoletos da base de conhecimento e selecionem artigos de substituição.
    Lista padrão Modelo de página criado com um pacote de lista de registros e um menu de lista contidos em um componente de painéis redimensionáveis, todos com valores de configuração predefinidos. Os usuários podem exportar registros em diferentes formatos e compartilhar listas personalizadas com outros usuários. O controlador de lista usado neste modelo de página contém propriedades configuráveis.
    Tabela 3. Pacotes
    Pacote Descrição
    Lista de registros O pacote da lista de registros é uma combinação de componentes que incluem um cabeçalho de lista, corpo de lista e componente de paginação. Esta nova iteração do componente da lista inclui valores de configuração predefinidos e um controlador de lista.

    Alterado nesta versão

    Tabela 4. Componentes
    Componente Melhorias
    Fluxo de atividades
    • Oculte os botões descartar rascunho, pop-out, criar e-mail e exibir rascunhos.
    • Altere o estilo do botão de envio de e-mail de primário para secundário.
    • Exiba o assunto do e-mail quando houver várias caixas de diálogo não modais ou quando elas estiverem minimizadas.
    • Insira o modelo de e-mail e o link da base de conhecimento com caixa de diálogo não modal.
    Anexos Nova propriedade para definir o tamanho máximo permitido de um anexo.
    Data - Hora Propriedade dehora padrão [initialTime] que define a hora de início padrão do componente. Se não for definido, o horário padrão será meia-noite.
    Intervalo de data/hora Personalize o intervalo de datas a ser exibido no calendário usando um seletor de data e hora relativa.
    Compositor de e-mail
    • Anexe Knowledge artigos em linha ou como PDFs usando Assistência do agente.
    • Salve rascunhos automaticamente, descarte rascunhos, salve e crie rascunhos.
    • Densidade de design de página aprimorada.
    • Adicionado suporte para experiência de caixa de diálogo não modal.
    Compositor de e-mails (mini)
    • Anexe Knowledge artigos em linha ou como PDFs usando Assistência do agente.
    • Salve rascunhos automaticamente, descarte rascunhos, salve e crie rascunhos.
    • Densidade de design de página aprimorada.
    • Suporte para experiência de caixa de diálogo não modal.
    Título
    • Os tamanhos do cabeçalho da fonte diminuíram no espaço para aumentar a densidade de dados.
    • Alternativa de tamanho de título hero ao primário para usuários que ainda preferem o tamanho de título original maior.
    Ícone Use ícones personalizados em qualquer formato de imagem padrão. Ícones personalizados não são adicionados à biblioteca na instância e não são armazenados em cache.
    Imagem Use imagens personalizadas em qualquer formato de imagem padrão. Ícones personalizados não são adicionados à biblioteca na instância e não são armazenados em cache.
    Entrada O indicador de IA sinaliza para os usuários quando um campo de formulário usa recomendações de IA e fornece mais informações sobre a funcionalidade de IA.
    Quadro Kanban
    • Habilite linhas de dependência para indicar relacionamentos entre cartões no quadro.
    • Mostrar o cabeçalho da raia horizontal na linha.
    Seletor de lista
    • Popovers acionados de itens nas listas Itens disponíveis e Itens selecionados exibem detalhes do registro atual. Você pode configurar o conteúdo dos popovers e selecionar os itens que mostram o ícone do gatilho.
    • Selecione como o componente será exibido. As opções são:
      • Compacto
      • 2 painéis
      • Dotwalk (padrão)
    • Impede que os usuários reordenem itens na lista de itens selecionados.
    • Revele todos os controles ocultos dentro do componente.
    Diálogo não modal
    • Defina o texto do cabeçalho que quebra em 2 linhas e trunca após a segunda linha.
    • Substitua o tipo de cor da variante inicial por um tipo primário ou secundário que adicione cor ao título.
    • Adicione um ícone de botão que acione uma ação no slot de botão opcional.
    • Mude onde a caixa de diálogo não modal aparece quando acionada por um usuário. Por padrão, ele aparece no centro, mas você pode fazer com que a caixa de diálogo apareça na parte superior esquerda ou direita ou na parte inferior esquerda ou direita.
    • Use atalhos do teclado para mover a caixa de diálogo para cima, para baixo, para a esquerda e para a direita.
    Ações recomendadas
    • Título do painel configurável e títulos da guia.
    • Ordem de guia configurável.
    • Nova guia Pesquisar que contém um campo de entrada de pesquisa e cartões para resultados de pesquisa.
    • Histórico movido de uma guia para um novo painel acionado a partir de um botão icônico.
    • Cor de fundo do texto de dica e de um ícone nos cartões de resultados da pesquisa.
    Painéis redimensionáveis Combinação de teclas do teclado para mudar o layout somente para o painel esquerdo, ambos os painéis e somente o painel direito.
    Selecionar Indicador de IA para sinalizar aos usuários quando um campo de formulário usa recomendações de IA e fornece mais informações sobre a funcionalidade de IA.
    Área de texto Indicador de IA para sinalizar aos usuários quando um campo de formulário usa recomendações de IA e para fornecer mais informações sobre a funcionalidade de IA.
    Autocompletável Indicador de IA para sinalizar aos usuários quando um campo de formulário usa recomendações de IA e para fornecer mais informações sobre a funcionalidade de IA.
    Digitação múltipla antecipada Indicador de IA para sinalizar aos usuários quando um campo de formulário usa recomendações de IA e para fornecer mais informações sobre a funcionalidade de IA.
    Tabela 5. Gráficos de visualização de dados
    Gráfico Melhoria
    Visualização de barras Tipo de Pareto de visualização de barra. Um gráfico de Pareto é semelhante ao gráfico de barras verticais, mas também inclui um gráfico de linhas. Um gráfico de Pareto exibe barras verticais que representam valores individuais (frequência ou custo) em ordem decrescente e uma linha com pontos de dados que representam o total cumulativo. O gráfico de Pareto também marca o ponto de 80% no eixo y com uma linha horizontal, que o usuário pode ocultar.
    Visualização do cartão de pontuação do indicador
    • Barra de pontuação mais recente que você pode exibir para uma representação gráfica da pontuação do indicador mais recente. Uma barra azul para pontuação de 1 ou mais, uma barra laranja para -1 e abaixo e nenhuma barra para pontuação 0 (zero). O valor da pontuação é exibido ao passar o mouse.
    • O número máximo de grupos pode ser especificado (1-20).
    • Somente detalhamentos podem ser especificados para serem mostrados e você também pode mostrar todos os grupos para o primeiro detalhamento.
    Visualização da série temporal Seletor de intervalo de datas que adiciona um menu suspenso de intervalo de datas que o usuário pode usar para mudar rapidamente o intervalo de tempo exibido para um dos intervalos de datas predefinidos.

    Informações de ativação

    Next Experience Components é um recurso Now Platform que está ativo por padrão.

    Informações de acessibilidade

    As melhorias de acessibilidade a seguir foram feitas na Next Experience Components na versão Washington DC.
    Suporte para software de ampliação e leitores de tela

    Os seguintes Next Experience Components foram atualizados para corresponder rótulos programáticos a rótulos visuais. Este aprimoramento fornece suporte aprimorado para ZoomText (um tipo de software de ampliação) e outros tipos de tecnologia assistiva (por exemplo, leitores de tela).

    Este aprimoramento oferece suporte a usuários com deficiências físicas e motoras, como baixa visão ou limitações de mobilidade, que usam a plataforma ServiceNow.
    • Bate-papo do agente [sn-agent-chat]
    • Caixa de entrada do agente [sn-agent-inbox]
    • Guias de tela [sn-canvas-tabs]
    • Entrada de bate-papo [sn-chat-input]
    • Sugestão de menção no bate-papo [sn-chat-mention-suggestion]
    • Check-list [now-checklist]
    • Calendário de data e hora [now-date-time-calendar]
    • Visualizador de documento [sn-document-viewer]
    • Arrastar e soltar [sn-drag-and-drop]
    • Seleção de campo [sn-record-field-list-reorder-list]
    • Seletor de lista [sn-list-selector]
    • Conteúdo popover de configuração de notificação [notification-setting-popover-content]
    • Conteúdo popover de presença [sn-presence-popover-content]
    Suporte para refluxo

    Os componentes a seguir foram atualizados para oferecer suporte ao refluxo, o que permite que as páginas e o conteúdo sejam ampliados em até 400% por meio das configurações do navegador sem perda de conteúdo ou funcionalidade. Além disso, o conteúdo pode ser ampliado sem rolagem em duas dimensões a uma largura equivalente a 320 pixels CSS ou uma altura equivalente a 256 pixels CSS.

    Este aprimoramento ajuda usuários com baixa visão ou que têm problemas para ver o conteúdo da Web em um navegador devido ao tamanho do monitor, tipo de dispositivo, iluminação ruim ou outras situações. O refluxo pode ser desativado com uma propriedade do sistema para instâncias, experiências e páginas. Consulte Reflow for Configurable Workspace para mais detalhes.

    • Barra de ação [now-record-common-uiactionbar]
    • Bate-papo do agente [sn-agent-chat]
    • Calendário de compromissos [now-appointment-calendar]
    • Gráfico de barras [now-vis-bar]
    • Visualização de bolha [now-vis-buble-wrapper]
    • Calendário [now-calendar]
    • Carrossel [sn-carousel]
    • Check-list [now-checklist]
    • Cartão de contato [sn-contact-card]
    • Árvore de conteúdo [now-content-tree]
    • Barra lateral contextual [now-contectual-sidebar]
    • Atividade do cliente [sn-customer-activity]
    • Seletor de intervalo de datas [now-date-range-picker]
    • Gráfico de mostrador [now-vis-dial]
    • Exibição de documento [sn-document-display]
    • Inteligência para documentos [sn-docintel-iframe]
    • Lista expressa [sn-itom-aiops-list]
    • Filtro [now-filter]
    • Formulário [now-record-form-selection-column-layout]
    • Gráfico de medidor [now-vis-gauge]
    • Visualização do mapa geográfico [now-vis-geomap-wrapper]
    • Visualização de mapa térmico [now-vis-healthmap-wrapper]
    • ITOM Metric Explorer [sn-itom-metric-explorer]
    • Quadro Kanban [now-visual-board]
    • Blocos de conhecimento [sn-knowledge-blocks-connected-uib]
    • Conteúdo de conhecimento [sn-knowledge-content]
    • Seletor de lista [sn-list-selector]
    • Controle de paginação [now-pagination]
    • Visualização de pizza/rosca [now-vis-torie-wrapper]
    • Visualização de tabela dinâmica [sn-multipivot]
    • Visualizador de atividades do Playbook [now-playbook-activity-viewer]
    • Playbook experience [now-playbook-experience-connected]
    • Modais do Playbook [now-playbook-modals]
    • Seletor de fases do Playbook [now-playbook-stage-picker]
    • Novo painel de integridade de serviço [sn-itom-service-dashboard]
    • Pontuação única [now-score-advanced]
    • Visualização da série temporal [now-vis-timeseries-wrapper]
    Suporte para conversão de fala em texto
    Os seguintes Next Experience Components foram atualizados para corresponder aos rótulos visuais com os rótulos acessíveis. Se o rótulo acessível for diferente do rótulo visual, o software de conversão de fala em texto não poderá identificar e ativar o elemento interativo. Rótulos visuais e acessíveis correspondentes permitem que o software de conversão de fala em texto, como o Dragon Naturally Speaking, identifique esses componentes na interface do usuário em vez de fazer uma navegação lenta baseada em grade oferecida pelas tecnologias de assistente de fala em texto.
    • Menu suspenso [now-dropdown]
    • Entrada [now-input]
    • Lista de registros [now-record-list]
    • Número do registro [now-record-number]
    • Link de texto [now-text-link]
    • Alternar [now-toggle]
    • Digitação antecipada [now-typeahead]
    • Múltiplo autocompletável [now-typeahead-multi]
    Melhorias gerais de acessibilidade
    Os componentes a seguir foram atualizados para atender aos padrões de acessibilidade reconhecidos internacionalmente.
    • Calendário de compromissos [now-appointment-calendar]
    • Calendário [now-calendar]
    • Check-list [now-checklist]
    • Cartão de contato [sn-contact-card]
    • Árvore de conteúdo [now-content-tree]
    • Kanban [now-visual-board]
    • Seletor de atividade do Playbook [now-playbook-activity-picker]
    • Grupo de rádios [now-radio-group]

    Aplicações e recursos ServiceNow relacionados

    UI Builder
    Construtor de IU é uma ferramenta de baixo código que permite aos usuários criar páginas para experiências baseadas na Web do espaço e do portal.
    Configurable Workspace UI
    Use componentes para criar experiências de espaço personalizadas para agentes que resolvem problemas internos ou externos do cliente.