GlideModal - Cliente
A API GlideModal 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 fecham quando um usuário realiza uma ação. Você pode usar um modal para exibir informações, fazer perguntas ou executar ações.
Use os métodos GlideModal em scripts em qualquer lugar em que você possa usar JavaScript do lado do cliente. Esses métodos são chamados com mais frequência a partir de uma ação de IU com a caixa de seleção Cliente marcada.
Usando a API GlideModal, você pode criar modais personalizados ou aproveitar os modais do sistema de base existentes.
GlideModal não funciona no espaço. Em vez disso, use a API g_modal.
- Texto estático
- Texto dinâmico
- Formulários
- Imagens
- Botões
- Recupere um modal do sistema de base, como
glide_confirm,glide_infoouglide_alert. - Crie conteúdo modal a partir de uma página de IU ou de HTML aprovado.
- Defina o título no modal.
- Defina o conteúdo do corpo do modal.
- Defina a largura do modal.
- Obter e definir preferências.
- Alternar exibições modais.
var dialog = new GlideModal("my_modal");
//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 o método renderWithContent() 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
}Modais do sistema de base
Uma instância base ServiceNow fornece os seguintes modais, definidos como páginas de IU, que você pode usar ao exibir um modal com GlideModal:
glide_alert_standard: um modal de alerta com um botão OK e um ícone de aviso ou informação.-
glide_ask_standard: um modal de confirmação com botões Sim e Não. -
glide_confirm: um modal de confirmação com os botões Não salvar, Cancelare Salvar. -
glide_confirm_basic: um modal de confirmação com um botão OK e Cancelar, sem um ícone. -
glide_confirm_standard: um modal de confirmação com um botão OK e Cancelar e um ícone de informações ou aviso. -
glide_info: um modal de informações com um ícone de informações e um botão OK na largura da janela do modal. -
glide_progress_standard: um modal de informações com um botão Fechar, um ícone de aviso ou de informações e uma barra de andamento de rolagem. A barra de andamento é uma imagem de GIF animado e não pode ser atualizada como uma barra de andamento típica. -
glide_progress_no_button: um modal de informações com um ícone de aviso ou informação e uma barra de andamento de rolagem. A barra de andamento é uma imagem de GIF animado e não pode ser atualizada como uma barra de andamento típica. -
glide_prompt: um modal com uma caixa de texto de aviso e um botão OK e Cancelar. -
glide_warn: um modal simples com um botão OK, mas sem ícone.
Preferências
As preferências de modal fornecem uma maneira de passar dados para o modal que está sendo renderizado. Você usa os métodos setPreference() ou setPrefAndReload() para definir um valor de preferência. Em seguida, use o método GlideModal – getPreference(String name) para recuperar uma preferência de conjunto.
Para recuperar preferências em uma página de IU, use a seguinte função: RP.getWindowProperties().get('preference_name').
- autoFocus: sinalizador que indica se o modal recebe automaticamente o foco depois de renderizado. Defina como verdadeiro quando o modal for inicializado.
- corpo: define o conteúdo passado no corpo do modal.
- botãoClasse: define a classe do botão.
- botãoClassCancel: define a classe do botão Cancelar no modal.
- botãoClassComplete: define a classe do botão OK (concluído) no modal.
- botãoLabel Define o rótulo do botão.
- botãoLabelCancel: define o rótulo do botão Cancelar no modal.
- botãoLabelComplete: define o rótulo do botão OK (concluído) no modal.
- callbackParam: define um parâmetro de retorno de chamada.
- focoTrap: sinalizador que indica se todas as interações fora do modal devem ser bloqueadas enquanto aberto. Defina como falso quando o modal for inicializado.
- modal_title: define o título do modal. Usado pelo método setTitle().
- onPromptCancel: define uma função a ser chamada quando o usuário seleciona o botão Cancelar.Por exemplo:
dialog.setPreference("onPromptCancel", function() { return false; }); - onPromptComplete: define uma função a ser chamada quando o usuário seleciona o botão OK.Por exemplo:
dialog.setPreference("onPromptComplete", function () { gsftSubmit(null, g_form.getFormElement(), 'check_button'); });
GlideModal – GlideModal (Id de cadeia de caracteres, Booliano somente leitura, Número/largura de cadeia de caracteres)
Cria uma instância da classe GlideModal.
| Nome | Tipo | Descrição |
|---|---|---|
| id | Cadeia de caracteres | Nome dapágina de IU a ser carregada no modal. Você pode encontrar a lista de páginas de IU disponíveis em |
| readOnly | Booliano | Opcional. Sinalizador que indica se o conteúdo no modal é somente leitura. Valores válidos:
Padrão: falso |
| largura | Número ou cadeia de caracteres | Opcional. Largura do modal em pixels ou na classe CSS do modal. Se uma largura de pixel for passada, ela alinha a largura especificada com a classe CSS correspondente. Possíveis classes CSS modais:
Padrão: modal-md Largura máxima: 900 pixels Nota: Você também pode definir a largura do modal usando o método GlideModal – setWidth(Número/largura da cadeia de caracteres). |
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 arquivo glide_confirm.
var dialog = new GlideModal('glide_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()
Encerra o modal atual.
| Nome | Tipo | Descrição |
|---|---|---|
| Nenhum |
| Tipo | Descrição |
|---|---|
| Nenhum(a) |
O exemplo de código a seguir mostra como usar o método destruir() 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().
| Nome | Tipo | Descrição |
|---|---|---|
| id | Cadeia de caracteres | Nome dapágina de IU associada ao modal. Você também pode especificar os modais do sistema de base que são fornecidos em uma instância de base. Você pode encontrar a lista de páginas de IU disponíveis em . |
| Tipo | Descrição |
|---|---|
| GlideModal | Objeto GlideModal solicitado. |
Este exemplo mostra como usar o método get() para obter o modal que você deseja fechar usando o método destruir().
// If the modal was initially created like this:
var dialog = new GlideModal("glide_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_confirm");
glideModal.destroy();
// You could also code it like this:
GlideModal.prototype.get("glide_confirm").destroy();GlideModal – getPreference(String name)
Retorna o valor da preferência especificada (propriedade). Use as preferências para passar dados para a página que está sendo renderizada.
Invocar ações que criam o modal normalmente também cria as preferências necessárias para o modal usando o método GlideModal – setPreference(cadeia de caracteres nome, cadeia de caracteres valor). O client script da página de IU pode consumir essas preferências usando este método e a seguinte função: RP.getWindowProperties().get('preference_name').
| Nome | Tipo | Descrição |
|---|---|---|
| nome | Cadeia de caracteres | Nome do valor preferencial a ser recuperado. Este valor deve ter sido definido anteriormente no modal usando o método GlideModal – setPreference(cadeia de caracteres nome, cadeia de caracteres valor). |
| Tipo | Descrição |
|---|---|
| Cadeia de caracteres | Valor da preferência especificada. |
Este exemplo mostra um caso simples de definição de uma preferência e, em seguida, recuperação dessa 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 ao usar uma página de IU para gerar o conteúdo em seu modal. Se você quiser exibir HTML em um modal, chame GlideModal – renderWithContent(Object html) ou GlideModal – renderWithContent(cadeia de caracteres html) para renderizar o modal.
| Nome | Tipo | Descrição |
|---|---|---|
| Nenhum |
| Tipo | Descrição |
|---|---|
| vazio |
O exemplo de código a seguir mostra como instanciar um objeto GlideModal usando as páginas de IU glide_confirm e glide_info, definir várias preferências e exibir o modal apropriado na IU (renderização).
var UpdateSetClient = Class.create({
mergeConfirm: function () {
var filterCriteriaMsg = "Please select filter criteria matching two or more update sets to merge";
var messageMap = new GwtMessage().getMessages([filterCriteriaMsg, "Confirmation",
"Are you sure you want to merge these {0} update sets? You will not be able to undo this action",
"Invalid selection", "OK", "Cancel"]);
var list = GlideList2.get('sys_update_set');
var dialog;
if (list.totalRows == 0 || list.totalRows == 1) {
dialog = new GlideModal('glide_info', true, 300);
dialog.setPreference('focusTrap', true);
dialog.setTitle(messageMap["Invalid selection"]);
dialog.setPreference('body', messageMap[filterCriteriaMsg]);
dialog.setPreference('buttonLabel', messageMap["OK"]);
dialog.render();
return;
}
dialog = new GlideModal('glide_confirm', true, 300);
dialog.setTitle(messageMap["Confirmation"]);
dialog.setPreference('focusTrap', true);
dialog.setPreference('body', new GwtMessage().format(
messageMap["Are you sure you want to merge these {0} update sets? You will not be able to undo this action"],
list.totalRows));
dialog.setPreference('buttonLabelComplete', messageMap["OK"]);
dialog.setPreference('onPromptComplete', this.merge);
dialog.setPreference('buttonLabelCancel', messageMap["Cancel"]);
dialog.setPreference('onPromptCancel', this.mergeExit);
dialog.render();
},
merge: function () {
var list = GlideList2.get('sys_update_set');
var query = list.getQuery();
var name = $('update_set_name').value;
var comments = $('update_set_comments').value;
var gurl = new GlideAjax('AngularProcessor','angular.do');
gurl.addParam('sysparm_type', 'hub_client');
gurl.addParam('type', 'merge_update_sets');
gurl.addParam('name', name);
gurl.addParam('comments', comments);
gurl.addParam('query', query);
gurl.getXML(function (response) {
var data = response.responseText.evalJSON();
var p = data.progress;
if (p) {
var progressId = p.progress_id;
var map = new GwtMessage().getMessages(["Close", "Update Set Merge"]);
var dialogClass = window.GlideModal ? GlideModal : GlideDialogWindow;
var dd = new dialogClass("hierarchical_progress_viewer", false, "40em", "10.5em");
dd.setPreference('focusTrap', true);
dd.setTitle(map["Update Set Merge"]);
dd.setPreference('sysparm_renderer_execution_id', progressId);
dd.setPreference('sysparm_renderer_expanded_levels', '0'); // collapsed root node by default
dd.setPreference('sysparm_button_close', map["Close"]);
dd.render();
//when all trackers are completed
dd.on("executionComplete", function(trackerObj) {
if (trackerObj.state == "2") {
var redirectUrl = new GlideURL('sys_update_set_list.do');
window.location.replace(redirectUrl.getURL());
return;
}
var closeBtn = $("sysparm_button_close");
if (closeBtn) {
closeBtn.onclick = function() {
dd.destroy();
};
}
});
}
});
},
mergeExit: function () {
// Do nothing interesting...
}
});GlideModal – renderWithContent(Object html)
Exibe um modal usando o conteúdo HTML baseado em objeto especificado.
Use o método renderWithContent() em vez do método render() ao derivar o conteúdo modal do HTML.
| Nome | Tipo | Descrição |
|---|---|---|
| html | Objeto | Conteúdo HTML a ser exibido no modal. |
| Tipo | Descrição |
|---|---|
| vazio |
Oexemplo a seguir mostra como exibir "Olá, mundo" no modal.
var dialog = new GlideModal();
dialog.renderWithContent('<div>Hello World</div>');GlideModal – renderWithContent(cadeia de caracteres html)
Exibe um modal com o conteúdo HTML baseado em cadeia de caracteres especificado.
Use o método renderWithContent() em vez do método render() ao derivar o conteúdo modal do HTML.
| Nome | Tipo | Descrição |
|---|---|---|
| html | Cadeia de caracteres | Conteúdo HTML a ser exibido no modal. |
| Tipo | Descrição |
|---|---|
| vazio |
Este exemplo de código mostra como exibir um modal que é construído usando a cadeia de caracteres HTML passada 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(cadeia de caracteres nome, cadeia de caracteres valor)
Define o valor da preferência especificada (propriedade). Use as preferências para passar dados para a página que está sendo renderizada.
Para recuperar preferências em uma página de IU, use a seguinte função: RP.getWindowProperties().get('preference_name'). Para obter informações adicionais sobre preferências, consulte GlideModal - Cliente.
| Nome | Tipo | Descrição |
|---|---|---|
| nome | Cadeia de caracteres | Nome da preferência cujo valor será definido. |
| valor | Cadeia de caracteres | Valor a ser armazenado na preferência especificada. |
| Tipo | Descrição |
|---|---|
| vazio |
O exemplo de código a seguir mostra como definir a preferência table como 'tarefa' e a preferência name como '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();O exemplo a seguir mostra como definir preferências básicas em um modal glide_confirm.
var dialog = new GlideModal('glide_confirm', true, 300);
dialog.setTitle('Example Title');
dialog.setPreference('body', 'Example Body');
dialog.setPreference('focusTrap', true);
dialog.setPreference('callbackParam', 'exampleParameter');
dialog.setPreference('buttonClassComplete', 'btn-primary');
dialog.setPreference('onPromptComplete', function(param) {
console.log('Prompt completed with param: ' + param);
});
dialog.setPreference('onPromptCancel', function(param) {
console.log('Prompt cancelled with param: ' + param);
});
dialog.render();GlideModal – setPreferenceAndReload(propriedades de matriz)
Define as preferências especificadas e recarrega o modal.
| Nome | Tipo | Descrição |
|---|---|---|
| propriedades | Matriz | Pares de nome-valor a serem definidos como preferências. |
| Tipo | Descrição |
|---|---|
| vazio |
Este exemplo mostra como criar e renderizar um modal e, em seguida, atualizar a preferência do corpo e recarregar o modal.
var dialog = new GlideModal('glide_confirm');
dialog.setPreference('body', 'This is a test modal body');
dialog.setTitle('This is a test modal title');
dialog.render();
...
dialog.setPreferenceAndReload({'body': 'this is another body'})GlideModal – setTitle(cadeia de caracteres título)
Define o título do modal.
| Nome | Tipo | Descrição |
|---|---|---|
| título | Cadeia de caracteres | Texto a ser exibido no título do modal. |
| Tipo | Descrição |
|---|---|
| vazio |
O exemplo de código a seguir mostra como definir o título do 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(Número/largura da cadeia de caracteres)
Define a largura do modal.
Você também pode definir a largura de um modal ao instanciar a API pela primeira vez usando o método GlideModal – GlideModal (Id de cadeia de caracteres, Booliano somente leitura, Número/largura de cadeia de caracteres).
| Nome | Tipo | Descrição |
|---|---|---|
| largura | Número ou cadeia de caracteres | Largura do modal em pixels ou na classe CSS do modal. Se uma largura de pixel for passada, ela alinha a largura especificada com a classe CSS correspondente. Possíveis classes CSS modais:
Largura máxima: 900 pixels |
| Tipo | Descrição |
|---|---|
| vazio |
O exemplo de código a seguir mostra como definir a largura do 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 a exibição e recarregue o modal.
| Nome | Tipo | Descrição |
|---|---|---|
| novaExibição | Cadeia de caracteres | Exibição a ser usada. |
| Tipo | Descrição |
|---|---|
| vazio |
Este exemplo écomo é um