ServiceNow UI 페이지를 표시하는 위젯 만들기

  • 릴리스 버전: Zurich
  • 업데이트 날짜 2025년 07월 31일
  • 소요 시간: 3분
  • 웹 페이지를 표시하는 ServiceNow UI 페이지를 만들 수 있습니다. 그런 다음 대시보드에 추가할 수 있는 위젯에 해당 UI 페이지를 추가할 수 있습니다.

    시작하기 전에

    필요한 역할: 관리자

    이 태스크 정보

    UI 페이지는 목록이나 양식이 아닌 페이지입니다 ServiceNow . 모든 UI 페이지가 위젯에 들어갈 수는 없습니다. 외부 사이트 위젯 또는 가젯과 같은 일부 UI 페이지는 대시보드에 배치할 때 제대로 표시되지 않습니다.

    프레임워크 페이지 템플릿을 사용하지 않고 UI 페이지를 만드는 방법에 대한 자세한 내용은 커뮤니티에서 ServiceNow 개발자가 게시한 프레임워크 페이지 템플릿 블로그 게시물을 참조하십시오.

    주:
    이 기능을 사용하려면 JavaScript에 대한 지식이 필요합니다.

    프로시저

    1. 위젯으로 표시할 ServiceNow UI 페이지를 만들거나 찾습니다.
      4단계에서 사용할 이 UI 페이지의 이름을 기록해 둡니다. UI 페이지 이름은 UI 페이지의 컨텐츠를 정의하는 양식의 이름 필드 값입니다.
    2. 다음으로 이동 시스템 UI > 위젯 을 클릭하고 신규를 클릭합니다.
      위젯 기록은 위젯 범주 기록이지 개별 위젯에 대한 기록이 아닙니다. 대시보드에 위젯을 추가할 때 먼저 범주를 선택한 다음 위젯을 선택합니다. 4단계에서 지정하는 JavaScript에는 해당 범주에 포함할 위젯 목록이 포함되어 있습니다.
    3. 다음 필드에 내용을 입력합니다.
      필드설명
      이름 이 위젯 범주의 이름입니다. 대시보드에 위젯을 추가할 때 이 범주를 선택합니다.
      렌더러 유형 JavaScript를 선택합니다.
      활성 위젯을 대시보드에 추가할 수 없도록 하려면 이 필드의 선택을 취소합니다.
      역할 대시보드에 위젯을 추가할 때 이 범주를 볼 수 있는 역할을 선택합니다. 아무 역할도 선택하지 않으면 모든 역할이 범주를 볼 수 있습니다.
    4. 스크립트 필드에 다음 JavaScript를 추가하고 지정된 대로 바꿉니다.
      return 문에는 이 위젯 범주에 나열된 위젯이 포함되어 있습니다.
      주:
      이 단계의 코드 스니펫은 범위가 지정되지 않은 애플리케이션에서 작동합니다. 범위가 지정된 애플리케이션에 대해 5단계의 코드 스니펫을 사용합니다.
      표 1.
      widget_name 대시보드에 위젯을 추가할 때 사용자가 위젯 선택기에서 선택하는 위젯의 이름입니다. 이 문자열은 위젯 헤더에도 나타납니다. 이 값은 3단계에서 구성하는 이름입니다.
      UI_page_name 위젯에 표시할 1단계의 UI 페이지 이름입니다.
      function sections() {
          return {
              'widget_name': { 'uiPageName' : 'UI_page_name'},
              'widget_name2': {'uiPageName': 'UI_page_name_2'}
          };
      }
      
      function render() {
          var uiPageName = renderer.getPreferences().get("uiPageName");
          return renderer.getRenderedPage(uiPageName);
      }
      
      function getEditLink() {
          var uiPageName = renderer.getPreference('uiPageName');
          return 'sys_ui_page.do?sysparm_query=' + encodeURIComponent('name=' + uiPageName);
      }
    5. 옵션: 범위가 지정된 애플리케이션에 대해 다음 코드 예제를 사용합니다.
      function sections() {
          return {
          'Widget': {
          'type': 'widgetname'
          }
          };
      }
      
      function render() {
          var scope = gs.getCurrentScopeName();
          scope = (scope == "rhino.global" ? "" : scope + "_");
          var page = renderer.getPreference('type');
          return renderer.getRenderedPage(scope + page);
      }
      
      function getEditLink() {
          var scope = gs.getCurrentScopeName();
          scope = (scope == "rhino.global" ? "" : scope + "_");
          var page = renderer.getPreference('type');
          return "sys_ui_page.do?sysparm_query=name=" + scope + page;
      }
    6. 제출을 클릭합니다.

    다음에 수행할 작업

    응답 대시보드 편집