GlideModal - 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.

    Para obter opções modais e compatibilidade em Espaço configurável em Next Experience IU, consulte o seguinte:
    Figura 1. Modal de exemplo
    Sobreposição de exemplo
    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 GlideModal("UI_dialog_name");

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

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

//Display the modal
dialog.render();
    Este exemplo de código mostra como criar e renderizar um modal usando RenderWithContent() HTML para definir o conteúdo do modal.
    function cancelDialog(){

  var dialog = new 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
}
    Nota:
    Este é um substituto completo para o. Janela deslizante e. GlideDialWindow APIs.

    GlideModal - 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 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 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 - destruir()

    Fecha o modal atual.

    Tabela 2. Parâmetros
    Nome Tipo Descrição
    Nenhum(a) Nenhum(a) Nenhum(a)
    Tabela 3. Retorna
    Tipo Descrição
    Nenhum(a) 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 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().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 {
    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 - 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 GlideModal("glide_modal_confirm"); 
dialog.render();

// Code using the modal
...

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

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

    GlideModal - getPreference (nome 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 - 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 6. 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.
    Tabela 7. 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 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 - 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 GlideModal - renderWithContent (cadeia de caracteres html) para renderizar o modal.

    Tabela 8. Parâmetros
    Nome Tipo Descrição
    Nenhum
    Tabela 9. Retorna
    Tipo Descrição
    vazio 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 GlideModal("UI_dialog_name");

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

//Display the dialog
dialog.render();

    GlideModal - 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 10. Parâmetros
    Nome Tipo Descrição
    html Cadeia de caracteres Conteúdo HTML a ser exibido no modal.
    Tabela 11. Retornos
    Tipo Descrição
    vazio 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 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 - setPreference(nome da cadeia de caracteres, valor da cadeia de caracteres)

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

    Tabela 12. 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 13. Retornos
    Tipo Descrição
    vazio 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 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 - setPreferenceAndReload(Propriedades do objeto)

    Define as preferências especificadas e recarrega o modal.

    Tabela 14. Parâmetros
    Nome Tipo Descrição
    propriedades Objeto Pares nome-valor a serem definidos como preferências no formato.
    Tabela 15. Retornos
    Tipo Descrição
    vazio Nenhum(a)

    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 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 - setTitle(título da cadeia de caracteres)

    Define o título do modal.

    Tabela 16. Parâmetros
    Nome Tipo Descrição
    título Cadeia de caracteres Texto a ser exibido no título do modal.
    Tabela 17. Retornos
    Tipo Descrição
    vazio Nenhum(a)

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

    var dialog = new 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 - setWidth(Largura do número/cadeia de caracteres)

    Define o. largura do modal .

    Você também pode definir a largura de um modal ao instanciar a API pela primeira vez usando o. GlideModal - GlideModal (ID da cadeia de caracteres, booliano somente leitura, número/largura da cadeia de caracteres) método.

    Tabela 18. 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 19. Retornos
    Tipo Descrição
    vazio Nenhum(a)

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

    var dialog = new 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 - switchView(cadeia de caracteres newView)

    Mude exibir e recarregue o modal.

    Tabela 20. Parâmetros
    Nome Tipo Descrição
    NoExibição Cadeia de caracteres Exibição a ser usada.
    Tabela 21. Retornos
    Tipo Descrição
    vazio Nenhum(a)

    GlideModal - updateTitle(

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

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

    Tabela 22. Parâmetros
    Nome Tipo Descrição
    Nenhum
    Tabela 23. 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"); 
    // Only updates the 'title' prop, updateTitle() must be called to see change

    modal.updateTitle();
}, 3000);