GlideModal ( Next Experience) - Cliente

Referência de API Zurich

Release

zurich

ft:locale

pt-BR

ft:publication_title

Referência de API Zurich

ft:clusterId

crapiref

bundleId

crapiref

workflow

Creator

GlideModal ( Next Experience) - Cliente

Versão de lançamento: Zurich

Atualizado 31 de jul. de 2025

10 min. de leitura

. GlideModal A API fornece métodos para exibir uma sobreposição de conteúdo, conhecida como modal. 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 GlideModal Métodos em scripts em qualquer lugar em 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 passado.
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 alinhará a largura especificada com a classe CSS correspondente. Classes CSS modais possíveis: Modal-alert: (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 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 gmod = new nowapi.GlideModal('cancelTask');
  //Sets the dialog title
  gmod.setTitle('Cancel Task');
  //Set up valid custom HTML to be displayed
  gmod.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 this task but keep the 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 our code is accessible from the modal dialog
  window.changeTaskAction = function(thisButton, thisAction){

    //Close the glide modal dialog window
    gmod.destroy();

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

O exemplo de código a seguir mostra como usar GlideModal.get().destroy() para fechar um modal.

// The following button should be declared somewhere in the UI page HTML.
<button onclick="closeMe()">close</button>

// The following code is in the client script.
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().destroy() .

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();

//Some 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 modal Glide.

O exemplo a seguir demonstra como obter o ID do modal Glide 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 client script 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
Nenhum

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 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 this task but keep the 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"){
        g_form.setValue('state',4);//Closed Incomplete -- will close the Requested Item and all other open tasks
      }else{
        g_form.setValue('state',7);//Closed Skipped -- will only close this task
      }
         //Regular ServiceNow form submission
         gsftSubmit(null, g_form.getFormElement(), 'cancel_sc_task');
      }
   };
   return false;//Prevents the form from submitting when the dialog first load
}

GlideModal ( Next Experience SetDialog(cadeia de caracteres DialogName)

Define o nome da caixa de diálogo para o GlideModal.

Tabela 16. Parâmetros
Nome	Tipo	Descrição
DialogName	Cadeia de caracteres	O nome da caixa de diálogo modal. O nome da caixa de diálogo é definido como o cabeçalho modal em um estilo H1.

Tabela 17. Retornos
Tipo	Descrição
Nenhum

GlideModal ( Next Experience SetPreferenceAndReload(propriedades da matriz)

Define as preferências especificadas e recarrega o modal.

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

Tabela 19. Retornos
Tipo	Descrição
Nenhum

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 alinhará a largura especificada com a classe CSS correspondente. Classes CSS modais possíveis: Modal-alert: (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 de GlideModal.

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

Tabela 29. Retorna
Tipo	Descrição
Nenhum

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);