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

    Para obter opções modais e compatibilidade em Espaço configurável em Next Experience IU, consulte o seguinte:
    Figura 1. Modal de exemplo
    Exemplo de sobreposição
    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 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() Método e 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:
    Esta é uma substituição completa do GlideWindow 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 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 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 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().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 {
    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().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 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 GlideModal().get("glide_modal_confirm");
glideModal.destroy();

//You could 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 client script 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 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 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 - 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 da matriz)

    Define as preferências especificadas e recarrega o modal.

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

    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(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 - 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 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 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 ( Next Experience 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"); // will only update the `title` prop, updateTitle() must be called to see change
			modal.updateTitle();
		}, 3000);