GlideModal - 클라이언트

Zurich API 참조

Release

zurich

ft:locale

ko-KR

ft:publication_title

Zurich API 참조

ft:clusterId

crapiref

bundleId

crapiref

workflow

Creator

GlideModal - 클라이언트

릴리스 버전: Zurich

업데이트 날짜 2025년 07월 31일

소요 시간: 22분

GlideModal API는 모달이라고 하는 컨텐츠 오버레이를 표시하는 메서드를 제공합니다. 모달은 페이지 위에 표시되며 사용자가 작업을 수행하면 닫히는 대화형 창입니다. 모달을 사용하여 정보를 표시하거나, 질문을 하거나, 작업을 수행할 수 있습니다.

클라이언트 측 JavaScript를 사용할 수 있는 모든 위치에서 스크립트에 GlideModal 메서드를 사용합니다. 이러한 메서드는 클라이언트 확인란이 선택된 UI 작업에서 가장 자주 호출됩니다.

UI의 모달 옵션 및 호환성 구성 가능 작업 공간 에 넥스트 경험 대해서는 다음을 참조하십시오.

모달에는 다음과 같은 다양한 유형의 컨텐츠가 포함될 수 있습니다.

정적 텍스트
동적 텍스트
양식
이미지
단추

이 API를 사용하여 다음을 수행할 수 있습니다.

기존 모달을 가져옵니다.
UI 페이지 또는 전달된 HTML에서 모달 컨텐츠를 작성합니다.
모달에서 제목을 설정합니다.
모달의 너비를 설정합니다.
기본 설정을 얻고 구성합니다.
모달 뷰를 전환합니다.

UI에 모달을 표시하려면 렌더링 메서드 중 하나를 호출해야 합니다.

다음 코드 예제에서는 UI 페이지 "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();

이 코드 예제에서는 renderWithContent() 메서드와 HTML을 사용하여 모달의 내용을 정의하여 모달을 만들고 렌더링하는 방법을 보여 줍니다.

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
}

주:

이는 GlideWindow 및 GlideDialogWindow API를 대체하는 모든 기능을 제공합니다.

GlideModal - GlideModal(문자열 ID, 부울 읽기 전용, 숫자/문자열 너비)

GlideModal 클래스의 인스턴스를 만듭니다.

표 1. 매개변수
이름	유형	설명
ID	문자열	모달에 로드할UI 페이지의 이름입니다. 기본 시스템에 제공된 `glide_modal_confirm` 또는 `glide_modal_info` 모달을 지정할 수도 있습니다. 테이블: UI 페이지 [sys_ui_page]
readOnly	부울	옵션입니다. 모달의 컨텐츠가 읽기 전용인지 여부를 나타내는 플래그입니다. 유효한 값은 다음과 같습니다. true: 컨텐츠가 읽기 전용입니다. false: 사용자가 컨텐츠를 수정할 수 있습니다. 기본값: false
width	숫자 또는 문자열	옵션입니다. 모달의 너비(픽셀 단위) 또는 모달 CSS 클래스입니다. 픽셀 너비가 전달되면 지정된 너비가 해당 CSS 클래스와 정렬됩니다. 가능한 모달 CSS 클래스: modal-alert : (300px) 지정된 너비가 0에서 349 픽셀 인 경우 할당됩니다. modal-sm: (400픽셀) 지정된 너비가 350에서 449픽셀인 경우 할당됩니다. modal-md: (600픽셀) 지정된 너비가 450에서 649픽셀인 경우 할당됩니다. modal-lg: (900픽셀) 지정된 너비가 650에서 900픽셀인 경우 할당됩니다. 기본값: modal-md 최대 너비: 900픽셀 주: setWidth() 메서드를 사용하여 모달 너비를 설정할 수도 있습니다.

다음 코드 예제에서는 기존 UI 페이지를 사용하여 GlideModal 개체를 만드는 방법을 보여 줍니다.

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

다음 코드 예제에서는 glide_modal_confirm 파일을 사용하여 GlideModal 객체를 만드는 방법을 보여 줍니다.

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

현재 모달을 닫습니다.

표 2. 매개변수
이름	유형	설명
없음	없음	없음

표 3. 반환
유형	설명
없음	없음

다음 코드 예제에서는 destroy() 메서드를 사용하여 모달을 닫는 방법을 보여 줍니다.

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
}

다음 코드 예제는 GlideModal.get().destroy() 를 사용하여 모달을 닫는 방법을 보여줍니다.

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

지정된 UI 페이지 이름으로 식별되는 GlideModal 객체를 반환합니다.

이 메서드를 사용하여 GlideModal.get().destroy()와 같은 다른 GlideModal 작업에 사용할 GlideModal 객체를 가져옵니다.

표 4. 매개변수
이름	유형	설명
ID	문자열	모달과 연결된UI 페이지의 이름입니다. 기본 시스템에 제공된 `glide_modal_confirm` 또는 `glide_modal_info` 모달을 지정할 수도 있습니다. 테이블: UI 페이지 [sys_ui_page]

표 5. 반환
유형	설명
GlideModal	요청된 GlideModal 객체입니다.

이 예제에서는 get() 메서드를 사용하여 destroy() 메서드를 사용하여 닫으려는 모달을 가져오는 방법을 보여 줍니다.

// 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(문자열 이름)

지정된 기본 설정(속성)의 값을 반환합니다.

모달을 생성하는 작업을 호출하면 일반적으로 메서드를 사용하여 GlideModal - setPreference(문자열 이름, 문자열 값) 모달에 필요한 기본 설정도 생성됩니다. 그런 다음 UI 페이지 클라이언트 스크립트는 이 메서드를 사용하여 이러한 기본 설정을 사용할 수 있습니다.

표 6. 매개변수
이름	유형	설명
이름	문자열	검색할 기본 설정 값의 이름입니다. 이 값은 setPreference() 메서드를 사용하여 모달에서 이전에 설정되었어야 합니다.

표 7. 반환
유형	설명
문자열	지정된 기본 설정 값입니다.

이 예시에서는 기본 설정을 설정한 후 지정된 모달에서 해당 기본 설정을 검색하는 간단한 경우를 보여줍니다.

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

모달에서 API가 인스턴스화될 때 지정된 UI 페이지를 렌더링합니다. UI에 표시할 모달을 정의한 후 이 메서드를 호출해야 합니다.

UI 페이지를 사용하여 모달의 컨텐츠를 생성할 때 이 메서드를 호출합니다. 모달 내에 HTML을 표시하려면 모달을 렌더링하기 위해 호출합니다 GlideModal - renderWithContent(String html) .

표 8. 매개변수
이름	유형	설명
없음

표 9. 반환
유형	설명
void	없음

다음 코드 예제에서는 UI 페이지 "UI_dialog_name"를 사용하여 GlideModal 개체를 인스턴스화하고, 모달의 제목과 너비를 설정한 다음, UI(렌더링)에 모달을 표시하는 방법을 보여 줍니다.

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(String html)

지정된 문자열 기반 HTML 컨텐츠로 모달을 표시합니다.

HTML에서 모달 내용을 파생할 때 render() 메서드 대신 renderWithContent() 메서드를 사용합니다.

표 10. 매개변수
이름	유형	설명
HTML	문자열	모달에 표시할 HTML 콘텐츠입니다.

표 11. 반환
유형	설명
void	없음

이 코드 예제에서는 사용자가 선택할 수 있는 선택 목록이 포함된 전달된 HTML 문자열을 사용하여 생성된 모달을 표시하는 방법을 보여 줍니다.

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(문자열 이름, 문자열 값)

현재 양식의 지정된 필드를 지정된 값으로 설정합니다.

표 12. 매개변수
이름	유형	설명
이름	문자열	업데이트할 양식 필드의 이름입니다. 이 필드가 현재 양식에 없으면 요청이 무시됩니다.
값	문자열	지정된 양식 필드에 저장할 값입니다.

표 13. 반환
유형	설명
void	없음

다음 코드 예제에서는 기본 설정을 'task'로 설정하고 name 기본 설정을 'value'로 설정하는 table 방법을 보여 줍니다.

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(배열 속성)

지정된 기본 설정을 설정한 후 모달을 다시 로드합니다.

표 14. 매개변수
이름	유형	설명
속성	배열	기본 설정으로 설정할 이름-값 쌍.

표 15. 반환
유형	설명
void	없음

GlideModal - setTitle(문자열 제목)

모달의 제목을 설정합니다.

표 16. 매개변수
이름	유형	설명
직위	문자열	모달 제목에 표시할 텍스트입니다.

표 17. 반환
유형	설명
void	없음

다음 코드 예제에서는 모달 제목을 "업데이트할 테이블"로 설정하는 방법을 보여 줍니다.

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(숫자/문자열 너비)

모달의 너비를 설정합니다.

메서드를 사용하여 API를 처음 인스턴스화할 때 모달의 너비를 GlideModal - GlideModal(문자열 ID, 부울 읽기 전용, 숫자/문자열 너비) 설정할 수도 있습니다.

표 18. 매개변수
이름	유형	설명
width	숫자 또는 문자열	모달의 너비(픽셀 단위) 또는 모달 CSS 클래스입니다. 픽셀 너비가 전달되면 지정된 너비가 해당 CSS 클래스와 정렬됩니다. 가능한 모달 CSS 클래스: modal-alert : (300px) 지정된 너비가 0에서 349 픽셀 인 경우 할당됩니다. modal-sm: (400픽셀) 지정된 너비가 350에서 449픽셀인 경우 할당됩니다. modal-md: (600픽셀) 지정된 너비가 450에서 649픽셀인 경우 할당됩니다. modal-lg: (900픽셀) 지정된 너비가 650에서 900픽셀인 경우 할당됩니다. 최대 너비: 900픽셀

표 19. 반환
유형	설명
void	없음

다음 코드 예제에서는 모달 너비를 550픽셀로 설정하는 방법을 보여 줍니다.

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(String newView)

뷰를 변경하고 모달을 다시 로드합니다.

표 20. 매개변수
이름	유형	설명
새 뷰	문자열	사용할 뷰입니다.

표 21. 반환
유형	설명
void	없음

GlideModal - updateTitle(

GlideModal setTitle() 메서드를 사용하여 지정된 제목을 업데이트합니다.

변경 내용을 커밋하려면 항상 updateTitle()을 사용하여 모달 제목을 지정하려면 먼저 호출 GlideModal(넥스트 경험) - setTitle(String title) 해야 합니다.

표 22. 매개변수
이름	유형	설명
없음

표 23. 반환
유형	설명
없음

다음 예제에서는 setTitle() 및 updateTitle() 을 각각 호출하여 모달의 제목을 설정하고 업데이트하는 방법을 보여줍니다.

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