g_modal - 클라이언트

  • 릴리스 버전: Yokohama
  • 업데이트 날짜 2025년 01월 30일
  • 읽기18분
  • g_modal API를 사용하면 모달 창을 표시하여 애플리케이션 기능을 향상시킬 수 있습니다.

    이 API를 사용하여 작업 공간에 모달을 표시합니다.

    이 API를 사용하여 다음을 수행할 수 있습니다.
    • 모달 창에 입력 유형 필드를 표시합니다.
    • UI 페이지 또는 외부 링크와 같은 프레임에 무언가를 표시합니다.
    • 사용자 확인 작업을 수행합니다.
    • 구성요소를 로드합니다.
    • HTML을 사용하여 모달의 내용을 채웁니다.

    g_modal - alert(String title, String message, Function callback, style Object)

    UI 작업과 관련된 경보 메시지를 표시합니다.

    표 1. 매개변수
    이름 유형 설명
    제목 문자열 옵션입니다. 모달의 헤더에 표시할 제목입니다.

    기본값: 경보

    메시지 문자열 모달 본문에 표시할 메시지입니다.
    주:
    매개 변수를 하나만 전달하면 메서드는 이를 message 매개 변수로 처리합니다.
    콜백 함수 옵션입니다. 서버에서 양식을 제출하고 처리한 후 호출할 함수입니다.
    콜백 함수는 callbackFunction(String action_verb, String sys_id, String table, String displayValue) 형식을 갖습니다.
    • action_verb: 실행된 UI 작업의 이름입니다. 예제:
      • sysverb_cancel(취소 버튼)
      • sysverb_insert(제출 버튼)
      • sysverb_save(저장 버튼).
    • sys_id: 영향을 받는 기록의 Sys_id.
    • table: 기록이 포함된 테이블의 이름입니다.
    • displayValue: 양식에 표시되는 값입니다.

    기본값:

    스타일객체옵션입니다. 모달에 표시할 확인 버튼의 스타일입니다.
    "style": {
      "buttonTitle": "String",
      "buttonType": "String"
    }
    style.buttonTitle 문자열 옵션입니다. 확인 버튼에 표시할 텍스트입니다.

    기본값: OK

    style.buttonType 문자열 옵션입니다. 표시할 확인 버튼의 유형입니다.

    기본값: 기본값

    표 2. 반환
    유형 설명
    약속 callback 매개 변수가 전달되면 성공하면 promise를 반환하고 그렇지 않으면 오류를 반환합니다.

    다음 코드 예제에서는 이 메서드를 호출하여 '할당 대상만 이 작업을 종료할 수 있습니다.'라는 경고 메시지를 표시하는 방법을 보여 줍니다.

    function onClick(g_form) {
    
      if (g_user.userID != g_form.getValue('assigned_to')) {
        g_modal.alert('Only the assigned to can end this action.');
        return;
      }
    
      var msg = getMessage("Are you sure you want to take this action?");
      g_modal.confirm(getMessage("Confirmation"), msg, function (confirmed) {
        if (confirmed) {
          g_form.setValue('state', 'closed_complete');
          g_form.save();
        }
      });
    
      return false;
    }

    g_modal - confirm(String title, String message, Function callback, style Object)

    UI 작업과 관련된 확인 메시지를 표시합니다.

    표 3. 매개변수
    이름 유형 설명
    제목 문자열 옵션입니다. 모달의 헤더에 표시할 제목입니다.

    기본값: 확인

    메시지 문자열 모달 본문에 표시할 메시지입니다.
    주:
    매개 변수를 하나만 전달하면 메서드는 이를 message 매개 변수로 처리합니다.
    콜백 함수 옵션입니다. 서버에서 양식을 제출하고 처리한 후 호출할 함수입니다.
    콜백 함수는 callbackFunction(String action_verb, String sys_id, String table, String displayValue) 형식을 갖습니다.
    • action_verb: 실행된 UI 작업의 이름입니다. 예제:
      • sysverb_cancel(취소 버튼)
      • sysverb_insert(제출 버튼)
      • sysverb_save(저장 버튼).
    • sys_id: 영향을 받는 기록의 Sys_id.
    • table: 기록이 포함된 테이블의 이름입니다.
    • displayValue: 양식에 표시되는 값입니다.

    기본값:

    스타일 객체 옵션입니다. 모달에 표시할 확인 및 취소 버튼의 스타일입니다.
    "style": {
      "cancelTitle": "String",
      "cancelType": "String",
      "confirmTitle": "String",
      "confirmType": "String"
    }
    style.cancelTitle 문자열 옵션입니다. 취소 버튼에 표시할 텍스트입니다.

    기본값: 취소

    스타일.cancelType 문자열 옵션입니다. 표시할 취소 버튼의 유형입니다.

    기본값: confirm

    style.confirmTitle 문자열 옵션입니다. 확인 버튼에 표시할 텍스트입니다.

    기본값: OK

    style.confirmType 문자열 옵션입니다. 표시할 확인 버튼의 유형입니다.

    기본값: 기본값

    표 4. 반환
    유형 설명
    약속 callback 매개 변수가 전달되면 성공하면 promise를 반환하고 그렇지 않으면 오류를 반환합니다.

    다음 코드 예제에서는 이 메서드를 호출하여 "이 작업을 수행하시겠습니까?"라는 확인 메시지를 표시하는 방법을 보여 줍니다.

    function onClick(g_form) {
    
      if (g_user.userID != g_form.getValue('assigned_to')) {
        g_modal.alert('Only the assigned to can end this action.');
        return;
      }
    
      var msg = getMessage("Are you sure you want to take this action?");
      g_modal.confirm(getMessage("Confirmation"), msg, function (confirmed) {
        if (confirmed) {
          g_form.setValue('state', 'closed_complete');
          g_form.save();
        }
      });
    
      return false;
    }

    출력:


    코드에서 생성된 확인 모달을 보여주는 스크린샷

    g_modal - confirmDestroy(String title, String message, Function callback, style Object)

    UI 작업과 관련된 확인 메시지를 표시하고 확인 버튼은 파괴적인 스타일로 표시됩니다.

    표 5. 매개변수
    이름 유형 설명
    제목 문자열 옵션입니다. 모달의 헤더에 표시할 제목입니다.

    기본값: 확인

    메시지 문자열 모달 본문에 표시할 메시지입니다.
    주:
    매개 변수를 하나만 전달하면 메서드는 이를 message 매개 변수로 처리합니다.
    콜백 함수 옵션입니다. 서버에서 양식을 제출하고 처리한 후 호출할 함수입니다.
    콜백 함수는 callbackFunction(String action_verb, String sys_id, String table, String displayValue) 형식을 갖습니다.
    • action_verb: 실행된 UI 작업의 이름입니다. 예제:
      • sysverb_cancel(취소 버튼)
      • sysverb_insert(제출 버튼)
      • sysverb_save(저장 버튼).
    • sys_id: 영향을 받는 기록의 Sys_id.
    • table: 기록이 포함된 테이블의 이름입니다.
    • displayValue: 양식에 표시되는 값입니다.

    기본값:

    스타일 객체 옵션입니다. 모달에 표시할 확인 및 취소 버튼의 스타일입니다.
    "style": {
      "cancelTitle": "String",
      "cancelType": "String",
      "confirmTitle": "String",
      "confirmType": "String"
    }
    style.cancelTitle 문자열 옵션입니다. 취소 버튼에 표시할 텍스트입니다.

    기본값: 취소

    스타일.cancelType 문자열 옵션입니다. 표시할 취소 버튼의 유형입니다.

    기본값: confirm

    style.confirmTitle 문자열 옵션입니다. 확인 버튼에 표시할 텍스트입니다.

    기본값: OK

    style.confirmType 문자열 옵션입니다. 표시할 확인 버튼의 유형입니다.

    기본값: destructive

    표 6. 반환
    유형 설명
    약속 callback 매개 변수가 전달되면 성공하면 promise를 반환하고 그렇지 않으면 오류를 반환합니다.

    이 예에서는 ...

    g_modal - richText(String title, String richContent, Function callback, String size, String cancelTitle, String confirmTitle, String cancelType, String confirmType)

    전달된 HTML을 사용하여 모달 내의 컨텐츠를 생성하는 모달을 표시합니다.

    표 7. 매개변수
    이름 유형 설명
    제목 문자열 옵션입니다. 모달의 헤더에 표시할 제목입니다.

    기본값: 비어 있음

    리치 텍스트 문자열 모달에 표시할 HTML 콘텐츠입니다.
    주:
    이 메서드는 ]]> 태그, 인라인 JavaScript 및 보안 악용을 일으킬 수 있는 기타 요소를 제거합니다<![CDATA[<script>.
    콜백 함수 옵션입니다. 서버에서 양식을 제출하고 처리한 후 호출할 함수입니다.
    콜백 함수는 callbackFunction(String action_verb, String sys_id, String table, String displayValue) 형식을 갖습니다.
    • action_verb: 실행된 UI 작업의 이름입니다. 예제:
      • sysverb_cancel(취소 버튼)
      • sysverb_insert(제출 버튼)
      • sysverb_save(저장 버튼).
    • sys_id: 영향을 받는 기록의 Sys_id.
    • table: 기록이 포함된 테이블의 이름입니다.
    • displayValue: 양식에 표시되는 값입니다.

    기본값:

    cancelTitle 문자열 옵션입니다. 취소 버튼에 표시할 텍스트입니다.

    기본값: 취소

    confirmTitle 문자열 옵션입니다. 확인 버튼에 표시할 텍스트입니다.

    기본값: OK

    cancelType 문자열 옵션입니다. 표시할 취소 버튼의 유형입니다.

    기본값: confirm

    confirmType 문자열 옵션입니다. 표시할 확인 버튼의 유형입니다.

    기본값: 기본값

    표 8. 반환
    유형 설명
    약속 callback 매개 변수가 전달되면 성공하면 promise를 반환하고 그렇지 않으면 오류를 반환합니다.

    g_modal - showFields(문자열 제목, 배열 필드, 문자열 명령, 함수 콜백)

    지정된 필드가 포함된 모달 창을 표시합니다. 기본적으로 OK 및 Cancel 버튼을 표시합니다.

    표 9. 매개변수
    이름 유형 설명
    콜백 함수 옵션입니다. 서버에서 양식을 제출하고 처리한 후 호출할 함수입니다.
    콜백 함수는 callbackFunction(String action_verb, String sys_id, String table, String displayValue) 형식을 갖습니다.
    • action_verb: 실행된 UI 작업의 이름입니다. 예제:
      • sysverb_cancel(취소 버튼)
      • sysverb_insert(제출 버튼)
      • sysverb_save(저장 버튼).
    • sys_id: 영향을 받는 기록의 Sys_id.
    • table: 기록이 포함된 테이블의 이름입니다.
    • displayValue: 양식에 표시되는 값입니다.

    기본값:

    cancelTitle 문자열 옵션입니다. 취소 버튼의 레이블입니다.

    기본값: 취소

    cancelType 문자열 옵션입니다. 취소 버튼의 유형입니다.

    기본값: 기본값

    confirmTitle 문자열 옵션입니다. 확인 버튼의 레이블입니다.

    기본값: OK

    confirmType 문자열 옵션입니다. 확인 버튼의 유형입니다 .

    기본값: confirm

    필드 객체 배열 모달에 표시할 필드 목록입니다. 각 필드는 별도의 개체에 정의됩니다. fields 전달하는 매개변수는 지정된 필드(fields.type)의 유형에 따라 다릅니다.
    fields: [
      {
        choices: "String",
        dispalyValue: "String",
        label: "String",
        mandatory: Boolean,
        name: "String",
        reference: "String",
        referringTable: "String",
        referringRecordId: "String",
        type: "String",
        value: "String"
      }
    ]
    필드.선택 객체 배열 매개변수가 fields.type선택으로 설정된 경우 필요합니다. 연결된 목록 필드에 표시할 옵션 목록입니다.
    예:
    choices: [
      {
        displayValue: 'Value 1',
        value: 'Value1'
      },
      {
        displayValue: 'Value 2',
        value: 'Value2'
      }
    ]
    fields.label 문자열 모달에서 이 필드의 레이블로 표시할 텍스트입니다.
    fields.필수 부울 옵션입니다. 필드가 필수인지 여부를 나타내는 플래그입니다.
    유효한 값은 다음과 같습니다.
    • true: 필드가 필수입니다.
    • false: 필드는 선택 사항입니다.

    기본값: false

    fields.name 문자열 필드의 내부 이름입니다. 매개변수가 fields.type참조로 설정된 경우, 이는 검색에 사용되는 현재 기록의 참조 필드입니다.
    fields.reference 문자열 매개변수가 fields.type참조로 설정된 경우 필수입니다. 참조할 테이블의 이름입니다.

    예: sys_user

    fields.referringTable 문자열 매개변수가 fields.type참조로 설정된 경우 필수입니다. 참조하려는 테이블의 이름입니다.

    예: 인시던트

    fields.referringRecordId 문자열 매개변수가 fields.type참조로 설정된 경우 필수입니다. UI 작업 양식에서 호출하는 기록의 Sys_id입니다.
    필드.유형 문자열 모달에 표시할 필드의 유형입니다.

    유효한 값은 다음과 같습니다.

    • 부울
    • 선택
    • glide_list
    • HTML
    • 참조
    • 문자열
    • textarea

    각 필드 유형에는 전달할 수 있는 옵션 세트가 fields.<> 있습니다.

    fields.value 문자열 옵션입니다. 필드에 표시할 값입니다.

    예를 들어 선택 필드의 경우 다음과 같이 사용자 프롬프트를 표시할 수 있습니다.

    값: getMessage(' -- 선택 -- ')

    또는 참조 필드의 경우 연결된 양식에 필드 값을 표시할 수 있습니다.

    g_form.getValue('caller_id')

    기본값: 비어 있음

    명령 문자열 옵션입니다. 모달에 표시할 지침입니다.
    크기 문자열 모달의 크기입니다.
    가능한 모달 CSS 클래스:
    • 경고: 300px
    • SM: 400 픽셀
    • MD: 600 픽셀
    • LG : 900 픽셀
    제목 문자열 옵션입니다. 모달의 헤더에 표시할 제목입니다.

    기본값: 비어 있음

    표 10. 반환
    유형 설명
    약속 성공하면 promise를 반환하고 그렇지 않으면 오류를 반환합니다.

    다음 예시에서는 모달 창을 사용하여 사용자에게 이유를 묻는 메시지를 표시한 다음 이를 기록의 작업 메모 필드로 다시 전달하는 방법을 보여줍니다. then() 메서드는 모달이 반환하는 것을 반환하는 promise를 반환합니다. fieldValues 이 경우. 필드 값이 있는 클라이언트 측의 작업 메모 필드는 updatedFields 배열에 있습니다. 하나의 필드만 반환되기 때문에 이 예에서는 인덱스 위치를 0으로 가정합니다.

    function onClick(g_form) {
        g_modal.showFields({
            title: "Enter your reason",
            fields: [{
                type: 'textarea',
                name: 'work_notes',
                label: getMessage('Reason'),
                mandatory: true
            }],
            size: 'lg'
        }).then(function(fieldValues) {
            g_form.setValue('work_notes', fieldValues.updatedFields[0].value);
            g_form.save();
        });
    }

    출력:

    관련 코드에서 생성된 모달의 스크린샷입니다.

    다음 예시에서는 위의 예시를 확장하여 선택 필드와 참조 필드를 추가합니다.

    function onClick(g_form) {
    
        var fields = [{
            type: 'textarea',
            name: 'work_notes',
            label: getMessage('Reason'),
            mandatory: true
        },
        {
            type: 'choice',
            name: 'reason_code',
            label: getMessage('Reason code'),
            value: getMessage(' -- Select -- '),
            choices: [
              {
                displayValue: 'Duplicate',
                value: 'duplicate'
              },
              {
                displayValue: 'Canceled',
                value: 'canceled'
              }
            ],
            mandatory: true
        },
        {
            type: 'reference',
            name: 'caller_id',
            label: getMessage('What is your name?'),
            mandatory: true,
            reference: 'sys_user',
            referringTable: 'incident',
            referringRecordId: g_form.getUniqueValue(),
    	 value: g_form.getValue('caller_id'),
    	 displayValue: g_form.getDisplayValue('caller_id')
        }
      ];
    
      g_modal.showFields({
        title: "Enter your reason",
        fields: fields,
        size: 'lg'
      }).then(function(fieldValues) {
            g_form.setValue('work_notes', fieldValues.updatedFields[0].value);
            g_form.setValue('caller_id', fieldValues.updatedFields[2].value);
            g_form.save();
      });
    }

    출력:

    관련 코드에서 생성된 모달의 스크린샷입니다.

    g_modal - showFrame(String title, String url, Function callback, String size, String height, String autoCloseOn)

    콘텐츠의 외부 URL 또는 UI 페이지에 대한 링크를 사용하는 모달을 표시합니다.

    표 11. 매개변수
    이름 유형 설명
    제목 문자열 옵션입니다. 모달의 헤더에 표시할 제목입니다.

    기본값: 비어 있음

    URL 문자열 IFrame에 로드할 정보의 URL입니다.
    주:
    하나의 인수만 전달되면 매개변수로 url 처리됩니다.
    콜백 함수 옵션입니다. 서버에서 양식을 제출하고 처리한 후 호출할 함수입니다.
    콜백 함수는 callbackFunction(String action_verb, String sys_id, String table, String displayValue) 형식을 갖습니다.
    • action_verb: 실행된 UI 작업의 이름입니다. 예제:
      • sysverb_cancel(취소 버튼)
      • sysverb_insert(제출 버튼)
      • sysverb_save(저장 버튼).
    • sys_id: 영향을 받는 기록의 Sys_id.
    • table: 기록이 포함된 테이블의 이름입니다.
    • displayValue: 양식에 표시되는 값입니다.

    기본값:

    크기 문자열 모달의 크기입니다.
    가능한 모달 CSS 클래스:
    • 경고: 300px
    • SM: 400 픽셀
    • MD: 600 픽셀
    • LG : 900 픽셀
    height 번호 모달의 높이 입니다.

    단위: 픽셀

    autoCloseOn(자동 닫기) 문자열 옵션입니다. 모달을 자동으로 닫는 조건입니다(예: "URL_CHANGED").

    기본값: 모달을 자동으로 닫지 않습니다.

    표 12. 반환
    유형 설명
    약속 성공하면 promise를 반환하고 그렇지 않으면 오류를 반환합니다. 이 약속은 IFrame 모달이 닫히면 해결됩니다.

    다음 예시에서는 KB 문서 기록의 sys_id와 기준 URL을 사용하여 모델에 KB 문서를 표시하는 방법을 보여줍니다.

    function onClick(g_form) {
      var kbId = '24d9243187032100deddb882a2e3ec33'; //sysId of KB article
      g_modal.showFrame({
        url: '/kb_view.do?sys_kb_id=' + kbId,
        title: 'Test Knowledge Article',
        size: 'lg',
        height: 500
      });
    }

    출력:

    코드에서 생성된 모달 스크린샷

    이 예시에서는 모달을 생성할 때 포함된 UI 페이지를 사용하는 방법을 보여줍니다. iFrame에 있을 때는 UI 페이지에서 g_form API에 액세스할 수 없으므로 UI 페이지에서 window.parent.postMessage()를 사용하여 iFrame의 데이터를 작업 공간으로 다시 전달합니다.

    function onClick(g_form) {
      function proposeMIC(data) {
        var workNotes = data.msg + "\n" + data.workNotes;
        var notes = g_form.getValue('work_notes') + ' ' + workNotes;
        var bi = g_form.getValue('business_impact') + ' ' + data.businessImpact;
        g_form.setValue('work_notes', notes.trim());
        g_form.setValue('business_impact', bi.trim());
        g_form.submit('sysverb_mim_propose');
      }
    	
      function openPopup() {
        if(!g_form.getControl('work_notes')) {
          getMessage('Cannot propose major incident as "Worknotes" is not visible', function(msg) {
    	 g_form.addErrorMessage(msg);
          });
          return false;
        }
    
        var url = "/sn_major_inc_mgmt_mim_propose.do?sysparm_stack=no&sysparm_workspace=" + true;
        g_modal.showFrame({
          title: getMessage("Propose Major Incident"),
          url: url,
          size: 'lg',
          autoCloseOn: 'URL_CHANGED',
          callback: function (ret, data) {
            if (ret)
              proposeMIC(data);
          }
        });
      }
    	
      openPopup();
    }

    출력:


    코드에서 생성된 모달 스크린샷