GlideModal - Cliente
. 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 encerram 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. Esses métodos são chamados com mais frequência a partir de uma ação de IU com Cliente caixa de seleção marcada.
Usando o. GlideModal API Você pode criar modais personalizados ou aproveitar modais existentes do sistema base.
GlideModal não funciona no espaço, em vez disso, use o. g_modal API.
- Texto estático
- Texto dinâmico
- Formulários
- Imagens
- Botões
- Recupere um modal do sistema base, como
glide_confirm,glide_info, ouglide_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 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
}Modais do sistema de base
Uma base ServiceNowA instância 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 OK e um ícone de informações ou aviso.-
glide_ask_standard: Um modal de confirmação com Sim e. Não botões. -
glide_confirm: Um modal de confirmação com Não salve , Cancelar e. Salvar botões. -
glide_confirm_basic: Um modal de confirmação com um OK e. Cancelar botão, sem um ícone. -
glide_confirm_standard: Um modal de confirmação com um 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 OK a largura da janela modal. -
glide_progress_standard: Um modal de informações com um Fechar um botão, um ícone de informações ou aviso e uma barra de andamento de rolagem. A barra de andamento é uma imagem GIF animada 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 informações ou aviso e uma barra de andamento de rolagem. A barra de andamento é uma imagem GIF animada e não pode ser atualizada como uma barra de andamento típica. -
glide_prompt: Um modal com uma caixa de texto de prompt e um OK e. Cancelar botão. -
glide_warn: Um modal simples com um OK botão, 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 o. SetPreference() ou SetPrefAndReload() métodos para definir um valor de preferência. Em seguida, você usa o. GlideModal - getPreference (nome da cadeia de caracteres)método para recuperar uma preferência definida.
Para recuperar preferências em uma página de IU, use a seguinte função: RP.getWindowProperties().get('preference_name') .
- Foco automático: Sinalizador que indica se o modal recebe foco automaticamente depois que é renderizado. Definido como verdadeiro quando o modal for inicializado.
- Corpo: Define o conteúdo passado no corpo do modal.
- ButtonClass: Define a classe do botão.
- ButtonClassCancel: Define a classe para o botão cancelar no modal.
- ButtonClassComplete: Define a classe para o botão OK (concluído) no modal.
- ButtonLabel Define o rótulo do botão.
- ButtonLabelCancel: Define o rótulo do botão cancelar no modal.
- ButtonLabelComplete: Define o rótulo para o botão OK (concluído) no modal.
- CallbackParam: Define um parâmetro de retorno de chamada.
- FocusTrap: Sinalizador que indica se todas as interações fora do modal devem ser bloqueadas enquanto abertas. Definido como falso quando o modal é inicializado.
- Modal_title: Define o título do modal. Usado pelo SetTitle() método.
- OnPromptCancel: Define uma função a ser chamada quando o usuário seleciona o. Cancelar botão.Por exemplo:
dialog.setPreference("onPromptCancel", function() { return false; }); - OnPromptComplete: Define uma função a ser chamada quando o usuário seleciona o. OK botão.Por exemplo:
dialog.setPreference("onPromptComplete", function () { gsftSubmit(null, g_form.getFormElement(), 'check_button'); });
GlideModal - GlideModal (ID da cadeia de caracteres, booliano somente leitura, número/largura da cadeia de caracteres)
Cria uma instância do GlideModal classe.
| Nome | Tipo | Descrição |
|---|---|---|
| id | Cadeia de caracteres | Nome do Th e Página de IU para carregar 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 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:
Padrão: Modal-md Largura máxima: 900 pixels Nota: Você também pode definir a largura modal usando GlideModal - setWidth(Largura do número/cadeia de caracteres)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_confirm arquivo.
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()
Fecha o modal atual.
| Nome | Tipo | Descrição |
|---|---|---|
| Nenhum |
| 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 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.
// 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 - Obter (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() .
| Nome | Tipo | Descrição |
|---|---|---|
| id | Cadeia de caracteres | Nome do Página de IU associado ao modal. Você também pode especificar o. modais do sistema de base que são fornecidos em uma instância 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. 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_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 (nome da cadeia de caracteres)
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 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 e a seguinte função: RP.getWindowProperties().get('preference_name') .
| 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 GlideModal - setPreference (nome da cadeia de caracteres, valor da cadeia de caracteres)método. |
| 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 - render()
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 o. GlideModal - renderWithContent (objeto 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 GlideModal Objeto que usa as páginas de IU glide_confirm e. glide_info , Defina várias preferências e exiba 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 (objeto html)
Exibe um modal usando o conteúdo HTML baseado em objeto especificado.
Use o. RenderWithContent() método em vez de renderizar() Método 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 |
Th E Seguindo o exemplo 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. RenderWithContent() método em vez de renderizar() Método 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 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 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 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();O exemplo a seguir mostra como definir preferências de base 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 da matriz)
Define as preferências especificadas e recarrega o modal.
| Nome | Tipo | Descrição |
|---|---|---|
| propriedades | Matriz | Pares nome-valor a serem definidos como preferências. |
| Tipo | Descrição |
|---|---|
| vazio |
Este exemplo mostra como criar e renderizar um modal e atualizar o. corpo e recarregando 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(título da cadeia de caracteres)
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 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.
| 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:
Largura máxima: 900 pixels |
| Tipo | Descrição |
|---|---|
| vazio |
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 o. exibição e recarregue o modal.
| Nome | Tipo | Descrição |
|---|---|---|
| Nova exibição | Cadeia de caracteres | Exibição a ser usada. |
| Tipo | Descrição |
|---|---|
| vazio |
Este exemplo é como a.