GlideModal ( Next Experience) - Cliente

Referência de API da Austrália

Release

australia

ft:locale

pt-BR

ft:publication_title

Referência de API da Austrália

ft:clusterId

crapiref

bundleId

crapiref

workflow

Creator

GlideModal ( Next Experience) - Cliente

Versão de lançamento: Australia

Atualizado 12 de mar. de 2026

11 min. de leitura

. GlideModal A API fornece métodos para exibir uma sobreposição de conteúdo, conhecida como modal. Os modais são janelas interativas que aparecem acima de uma página e são encerradas quando um usuário executa uma ação. Você pode usar um modal para exibir informações, fazer perguntas ou executar ações.

Use o. GlideModal Em scripts em qualquer lugar que você possa usar JavaScript do lado do cliente. Na maioria das vezes, esses métodos são chamados a partir de uma ação de IU com Cliente caixa de seleção marcada.

Os modais podem conter diferentes tipos de conteúdo, como:

Texto estático
Texto dinâmico
Formulários
Imagens
Botões

Usando esta API, você pode:

Obtenha um modal existente.
Crie conteúdo modal a partir de uma página de IU ou de HTML aprovado.
Defina o título no modal.
Defina a largura do modal.
Obter e definir preferências.
Alternar exibições modais.

Para fazer um modal aparecer na IU, você deve chamar um dos métodos de renderização:

O exemplo de código a seguir mostra como criar e renderizar um modal usando a página de IU "ui_dialog_name".

var dialog = new nowapi.GlideModal("UI_dialog_name");

//Set the dialog title
dialog.setTitle('Show title');

//Set the dialog width		      	
dialog.setWidth(550);

//Display the modal
dialog.render();

GlideModal ( Next Experience GlideModal (ID da cadeia de caracteres, booliano somente leitura, número/largura da cadeia de caracteres)

Cria uma instância do GlideModal classe.

Tabela 1. Parâmetros
Nome	Tipo	Descrição
id	Cadeia de caracteres	Nome do Página de IU para carregar no modal. Você também pode especificar `glide_modal_confirm` ou `glide_modal_info` modais fornecidos no sistema de base. Página de IU [sys_ui_page]
readOnly	Booliano	Opcional. Sinalizador que indica se o conteúdo no modal é somente leitura. Valores válidos: Verdadeiro: O conteúdo é somente leitura. Falso: O usuário pode modificar o conteúdo. Padrão: falso
largura	Número ou cadeia de caracteres	Opcional. Largura do modal em pixels ou da classe CSS modal. Se uma largura de pixel for aprovada, ela alinha a largura especificada com a classe CSS correspondente. Classes CSS modais possíveis: Alerta modal: (300 px) atribuído quando a largura especificada é de 0 a 349 pixels. Modal-sm: (400 px) atribuído quando a largura especificada é de 350 a 449 pixels. Modal-md: (600 px) atribuído quando a largura especificada é de 450 a 649 pixels. Modal-lg: (900 px) atribuído quando a largura especificada é de 650 a 900 pixels. Padrão: Modal-md Largura máxima: 900 pixels Nota: Você também pode definir a largura modal usando SetWidth() método.

O exemplo de código a seguir mostra como criar um objeto GlideModal usando uma página de IU existente.

var dialog = new nowapi.GlideModal('UI_dialog_name');

//Set the dialog title
dialog.setTitle('Show title'); 

//Set the desired preferences
dialog.setPreference('table', 'task'); 			
dialog.setPreference('name', 'value');        	

//Opens the dialog
dialog.render();

O exemplo de código a seguir mostra como criar um objeto GlideModal usando o. glide_modal_confirm arquivo.

var dialog = new nowapi.GlideModal('glide_modal_confirm', true, 300);
dialog.setTitle(new GwtMessage().getMessage('Confirmation'));
dialog.setPreference('body', new GwtMessage().format("This will complete all update sets in the batch. Continue changing state to complete?"));
dialog.setPreference('focusTrap', true);
dialog.setPreference('onPromptComplete', doComplete);
dialog.setPreference('onPromptCancel', doCancel);
dialog.render();
	
function doComplete() {
  callback(true);
}
	
function doCancel() {
  callback(false);
}

GlideModal ( Next Experience destruir()

Fecha o modal atual.

Tabela 2. Parâmetros
Nome	Tipo	Descrição
Nenhum

Tabela 3. Retorna
Tipo	Descrição
Nenhum(a)

O exemplo de código a seguir mostra como usar o. destruir() método para fechar um modal.

function cancelDialog(){

  var dialog = new nowapi.GlideModal('cancelTask');

  // Sets the dialog title
  dialog.setTitle('Cancel Task');

  // Set up valid custom HTML to display
  dialog.renderWithContent('<div style="padding:15px">
    <p>What action do you want to take?</p>
    <p><select name="cancellation" id="taskCancellation" class="form-control">
    <option value="cancelOnly" role="option">Cancel task but keep requested item open
    </option>
    <option value="cancelAll" role="option">Cancel this and all other tasks, closing the
    requested item</option></select></p><div style="padding:5px;float:right"><button      style="padding:5px;margin-right:10px onclick="window.changeTaskAction(this.innerHTML,     jQuery(\'#taskCancellation\').val())" class="btn btn-default">Abort</button>
    <button style="padding:5px" class="btn btn-primary"      onclick="window.changeTaskAction(this.innerHTML,jQuery(\'#taskCancellation\').val())">
    Cancel Task</button></div></div>');

  // Use the windows object to ensure the code is accessible from the modal dialog
  window.changeTaskAction = function(thisButton, thisAction){

    // Close the GlideModal dialog window
    dialog.destroy();

    // Submit to the back-end
    if(thisButton=='Cancel Task'){
      if(thisAction=="cancelAll"){
        // Closed Incomplete -- will close the Requested Item and all other open tasks
        g_form.setValue('state',4);
      }else{
        // Closed Skipped -- will only close this task
        g_form.setValue('state',7);
      }
         //Regular ServiceNow form submission
         gsftSubmit(null, g_form.getFormElement(), 'cancel_sc_task');
      }
   };

   // Prevents the form from submitting when the dialog first loads
   return false;
}

O exemplo de código a seguir mostra como usar GlideModal.get().destruir() para fechar um modal em um script de cliente. O botão a seguir deve ser declarado no HTML da página de IU: <button onclick="closeMe()">fechar </button>.

function closeGlideModal() {
  try {
    nowapi.GlideModal.get().destroy();
  } catch (err) {
    console.warn("closeGlideModal ERROR: " + err.message);
    var x = document.getElementById('THE_NAME_OF_YOUR_UI_PAGE' + '_closemodal');
    if (x) {
      x.click();
    } else {
      console.warn("No 'X' close button found!");
    }
  }
}

function closeMe() {
  setTimeout(function() {
    closeGlideModal();
  }, 100);
}

GlideModal ( Next Experience Get (ID da cadeia de caracteres)

Retorna o objeto GlideModal identificado pelo nome da página de IU especificado.

Use este método para obter o objeto GlideModal a ser usado em outras operações GlideModal, como, GlideModal.get().destruir() .

Tabela 4. Parâmetros
Nome	Tipo	Descrição
id	Cadeia de caracteres	Nome do Página de IU associado ao modal. Você também pode especificar `glide_modal_confirm` ou `glide_modal_info` modais fornecidos no sistema de base. Página de IU [sys_ui_page]

Tabela 5. Retornos
Tipo	Descrição
GlideModal	Objeto GlideModal solicitado.

Este exemplo mostra como usar o. get() método para obter o modal que você deseja fechar usando destruir() método.

// If the modal was initially created like this:

var dialog = new nowapi.GlideModal("glide_modal_confirm"); 
dialog.render();

// Code using the modal
...

// Now use the get() and destroy() methods to close the modal
var glideModal = new nowapi.GlideModal().get("glide_modal_confirm");
glideModal.destroy();

// You could also code it like this:
// GlideModal.prototype.get('glide_modal_confirm').destroy();

GlideModal ( Next Experience GetID()

Retorna o ID do GlideModal.

Tabela 6. Parâmetros
Nome	Tipo	Descrição
Nenhum

Tabela 7. Retorna
Tipo	Descrição
Cadeia de caracteres	ID do GlideModal .

O exemplo a seguir demonstra como obter o. GlideModal ID na instância.

var id = modal.getID();
console.log('modal id', id);

GlideModal ( Next Experience GetPreference (nome da cadeia de caracteres, valor da cadeia de caracteres)

Retorna o valor do especificado preferência (propriedade) .

Invocar ações que criam o modal normalmente também cria as preferências necessárias para o modal usando GlideModal ( Next Experience SetPreference (nome da cadeia de caracteres, valor da cadeia de caracteres) método.O script do cliente da página de IU pode consumir essas preferências usando este método.

Tabela 8. Parâmetros
Nome	Tipo	Descrição
nome	Cadeia de caracteres	Nome do valor de preferência a ser recuperado. Este valor deve ter sido definido anteriormente no modal usando SetPreference() método.
valor	Cadeia de caracteres	Valor da preferência a ser recuperada. Este valor deve ter sido definido anteriormente no modal usando SetPreference() método.

Tabela 9. Retornos
Tipo	Descrição
Cadeia de caracteres	Valor da preferência especificado.

Este exemplo mostra um simples caso de definir uma preferência e recuperar essa preferência de um modal especificado.

var dialog = new nowapi.GlideModal('UI_dialog_name');
//Sets the dialog title
dialog.setTitle('Modal title');

//Sets the value of the preference table
dialog.setPreference('table', 'incident');

//Gets the value of the preference table
var title = dialog.getPreference('table');

GlideModal ( Next Experience GetPreferences()

Retorna todas as preferências e valores associados ao modal.

Tabela 10. Parâmetros
Nome	Tipo	Descrição
Nenhum

Tabela 11. Retorna
Tipo	Descrição
Cadeia de caracteres	Valor da preferência especificado.

Este exemplo mostra um simples caso de definir uma preferência e recuperar essa preferência de um modal especificado.

var dialog = new nowapi.GlideModal('UI_dialog_name');
//Sets the dialog title
dialog.setTitle('Modal title');

//Sets the value of the preference table
dialog.setPreference('table', 'incident');

//Gets the value of the preference table
var title = dialog.getPreference('table');

GlideModal ( Next Experience renderizar()

Renderiza a página de IU especificada quando a API foi instanciada no modal. Você deve chamar este método depois de definir o modal para que ele apareça na IU.

Chame este método quando usar uma página de IU para gerar o conteúdo no modal. Se você quiser exibir HTML em um modal, chame RenderWithContent (cadeia de caracteres html) para renderizar o modal.

Tabela 12. Parâmetros
Nome	Tipo	Descrição
Nenhum

Tabela 13. Retorna
Tipo	Descrição
Nenhum(a)

O exemplo de código a seguir mostra como instanciar um GlideModal Usando a página de IU "ui_dialog_name", defina o título e a largura do modal e exiba o modal na IU (renderização).

var dialog = new nowapi.GlideModal("UI_dialog_name");

//Set the dialog title and width
dialog.setTitle('Show title');		      	
dialog.setWidth(550);

//Display the dialog
dialog.render();

GlideModal ( Next Experience RenderWithContent (cadeia de caracteres html)

Exibe um modal com o conteúdo HTML baseado em cadeia de caracteres especificado.

Use o. RenderWithContent() método em vez de renderizar() Método ao derivar o conteúdo modal do HTML.

Tabela 14. Parâmetros
Nome	Tipo	Descrição
html	Cadeia de caracteres	Conteúdo HTML a ser exibido no modal.

Tabela 15. Retornos
Tipo	Descrição
Nenhum(a)

Este exemplo de código mostra como exibir um modal que é construído usando a cadeia de caracteres HTML aprovada que contém uma lista de opções que o usuário pode selecionar.

function cancelDialog(){

  var dialog = new nowapi.GlideModal('cancelTask');

  // Sets the dialog title
  dialog.setTitle('Cancel Task');

  // Set up valid custom HTML to display
  dialog.renderWithContent('<div style="padding:15px">
    <p>What action do you want to take?</p>
    <p><select name="cancellation" id="taskCancellation" class="form-control">
    <option value="cancelOnly" role="option">Cancel task but keep requested item open
    </option>
    <option value="cancelAll" role="option">Cancel this and all other tasks, closing the
    requested item</option></select></p><div style="padding:5px;float:right"><button      style="padding:5px;margin-right:10px onclick="window.changeTaskAction(this.innerHTML,     jQuery(\'#taskCancellation\').val())" class="btn btn-default">Abort</button>
    <button style="padding:5px" class="btn btn-primary"      onclick="window.changeTaskAction(this.innerHTML,jQuery(\'#taskCancellation\').val())">
    Cancel Task</button></div></div>');

  // Use the windows object to ensure the code is accessible from the modal dialog
  window.changeTaskAction = function(thisButton, thisAction){

    // Close the GlideModal dialog window
    dialog.destroy();

    // Submit to the back-end
    if(thisButton=='Cancel Task'){
      if(thisAction=="cancelAll"){
        // Closed Incomplete -- will close the Requested Item and all other open tasks
        g_form.setValue('state',4);
      }else{
        // Closed Skipped -- will only close this task
        g_form.setValue('state',7);
      }
         //Regular ServiceNow form submission
         gsftSubmit(null, g_form.getFormElement(), 'cancel_sc_task');
      }
   };

   // Prevents the form from submitting when the dialog first loads
   return false;
}

GlideModal ( Next Experience SetDialog(cadeia de caracteres DialogName)

Define o nome da caixa de diálogo como uma preferência de tabela para o GlideModal.

Tabela 16. Parâmetros
Nome	Tipo	Descrição
DialogName	Cadeia de caracteres	O nome da caixa de diálogo modal a ser usada como o nome da caixa de diálogo e a tabela de preferências correspondente. Consulte também: SetPreference() SetPreferenceAndReload()

Tabela 17. Retornos
Tipo	Descrição
Nenhum(a)

Este exemplo mostra como definir um nome de caixa de diálogo modal como uma preferência de tabela.

var dialog = new nowapi.GlideModal('change_confirm_reason', false, 648, 250);
dialog.setTitle(new GwtMessage().getMessage('Cancel Change Request'));
dialog.setPreference('focusTrap', true);
dialog.setDialog('onPromptComplete');
dialog.setPreference('onPromptCancel', onPromptCancel);
dialog.on('closeconfirm', onPromptCancel);
dialog.setPreference('buttonLabelComplete', new GwtMessage().getMessage('OK'));
dialog.setPreference('buttonLabelCancel', new GwtMessage().getMessage('Cancel'));
dialog.render();

GlideModal ( Next Experience) - SetPreferenceAndReload(Propriedades do objeto)

Define as preferências especificadas e recarrega o modal.

Tabela 18. Parâmetros
Nome	Tipo	Descrição
propriedades	Objeto	Pares nome-valor a serem definidos como preferências no formato.

Tabela 19. Retornos
Tipo	Descrição
Nenhum

Neste exemplo, o. SetPreferenceAndReload() a função define preferências e recarrega o modal com preferências atualizadas. O modal renderiza com as preferências iniciais e, após 5 segundos, o. SetPreferenceAndReload() é chamado e recarrega o modal com as preferências atualizadas.

 // UI Page to render in the GlideModal is 'glide_modal_confirm'
 var glideModal = new nowapi.GlideModal("glide_modal_confirm", false, 600);
 glideModal.setTitle(getMessage("Confirmation"));
 glideModal.setPreference("body", getMessage("Are you sure you want to reject this deal registration? This action cannot be undone."));
 glideModal.setPreference('buttonLabelComplete', getMessage("Reject"));
 glideModal.setPreference('buttonLabelCancel', getMessage("Cancel"));
 glideModal.render();

 var preferences = {
     "body": "THIS IS THE UPDATED BODY PREFERENCE",
     "buttonLabelComplete": "NEW REJECT",
     "buttonLabelCancel": "NEW CANCEL"
 };

 setTimeout(function() {
     glideModal.setPreferenceAndReload(preferences);
 }, 5000);

GlideModal ( Next Experience SetPreference (nome da cadeia de caracteres, valor da cadeia de caracteres)

Define o campo especificado no formulário atual com o valor especificado.

Tabela 20. Parâmetros
Nome	Tipo	Descrição
nome	Cadeia de caracteres	Nome do campo do formulário a ser atualizado. Se este campo não existir no formulário atual, a solicitação será ignorada.
valor	Cadeia de caracteres	Valor a ser armazenado no campo de formulário especificado.

Tabela 21. Retornos
Tipo	Descrição
Nenhum(a)

O exemplo de código a seguir mostra como definir o. tablepreferência para "tarefa" e namepreferência para "valor".

var dialog = new nowapi.GlideModal('UI_dialog_name');

//Set the dialog title
dialog.setTitle('Show title'); 

//Set the desired preferences
dialog.setPreference('table', 'task'); 			
dialog.setPreference('name', 'value');        	

//Opens the dialog
dialog.render();

GlideModal ( Next Experience SetTitle(Título da cadeia de caracteres)

Define o título do modal.

Tabela 22. Parâmetros
Nome	Tipo	Descrição
título	Cadeia de caracteres	Texto a ser exibido no título do modal.

Tabela 23. Retornos
Tipo	Descrição
Nenhum(a)

O exemplo de código a seguir mostra como definir o título modal como Tabela a ser atualizada .

var dialog = new nowapi.GlideModal('UI_dialog_name');

//Sets the dialog title
dialog.setTitle('Table to update'); 
dialog.setPreference('table', 'task'); 			      	
dialog.setWidth(550);

//Opens the dialog
dialog.render();

GlideModal ( Next Experience SetWidth(Number/String width)

Define o. largura do modal .

Você também pode definir a largura de um modal ao instanciar a API pela primeira vez usando GlideModal() construtor.

Tabela 24. Parâmetros
Nome	Tipo	Descrição
largura	Número ou cadeia de caracteres	Largura do modal em pixels ou da classe CSS modal. Se uma largura de pixel for aprovada, ela alinha a largura especificada com a classe CSS correspondente. Classes CSS modais possíveis: Alerta modal: (300 px) atribuído quando a largura especificada é de 0 a 349 pixels. Modal-sm: (400 px) atribuído quando a largura especificada é de 350 a 449 pixels. Modal-md: (600 px) atribuído quando a largura especificada é de 450 a 649 pixels. Modal-lg: (900 px) atribuído quando a largura especificada é de 650 a 900 pixels. Largura máxima: 900 pixels

Tabela 25. Retornos
Tipo	Descrição
Nenhum(a)

O exemplo de código a seguir mostra como definir a largura modal como 550 pixels.

var dialog = new nowapi.GlideModal('UI_dialog_name');

//Sets the dialog title
dialog.setTitle('Show title'); 
dialog.setPreference('name', 'value'); 			      	
dialog.setWidth(550);

//Opens the dialog
dialog.render();

GlideModal ( Next Experience SwitchView(cadeia de caracteres newView)

Mude exibir e recarregue o modal.

Tabela 26. Parâmetros
Nome	Tipo	Descrição
NoExibição	Cadeia de caracteres	Exibição a ser usada.

Tabela 27. Retornos
Tipo	Descrição
Nenhum

GlideModal ( Next Experience) - type()

Retorna o tipo como GlideModal.

Tabela 28. Parâmetros
Nome	Tipo	Descrição
Nenhum

Tabela 29. Retorna
Tipo	Descrição
Cadeia de caracteres	Retorna uma cadeia de caracteres que indica que o tipo é GlideModal.

GlideModal ( Next Experience UpdateTitle()

Atualiza o título especificado usando GlideModal setTitle() método.

Você deve sempre ligar primeiro GlideModal ( Next Experience SetTitle(Título da cadeia de caracteres) Para especificar o título modal usando UpdateTitle() para confirmar a mudança.

Tabela 30. Parâmetros
Nome	Tipo	Descrição
Nenhum

Tabela 31. Retorna
Tipo	Descrição
Nenhum(a)

O exemplo a seguir demonstra como usar Definir e atualizar o título de um modal chamando SetTitle() e. UpdateTitle() respectivamente.

var modal = new nowapi.GlideModal();
modal.renderWithContent('TEST CONTENT');

setTimeout(function() {
    modal.setTitle("TEST setTitle() AND updateTitle() METHODS"); // will only update the `title` prop, updateTitle() must be called to see change
    modal.updateTitle();
}, 3000);