사용자 지정 위젯 개발

  • 릴리스 버전: Yokohama
  • 업데이트 날짜 2025년 01월 30일
  • 읽기4분

    • AngularJS, 부트스트랩 및 API를 사용하여 포털용 사용자 지정 위젯을 개발합니다 ServiceNow .

    시작하기 전에

    위젯을 개발하려면 다음을 위한 API 경험이 필요합니다 ServiceNow .
    • 서버에서 레코드 쿼리를 실행합니다.
    • 기록을 생성하고 업데이트합니다.
    다음을 수행하려면 AngularJS 경험이 필요합니다.
    • 클라이언트 컨트롤러에 변수를 바인딩합니다.
    • 위젯에서 서버 객체에 액세스합니다.
    • 사용자 입력을 수집합니다.

    선택적으로, 부트스트랩 구성요소에 액세스하여 부트스트랩 템플릿을 기반으로 빌드할 수 있습니다.

    위젯의 파트

    Angular 지시문과 마찬가지로 위젯은 페이지 내에서 서비스 포털 지정된 동작을 실행합니다. 위젯에는 필수 및 선택적 스크립팅 구성요소가 포함되어 있습니다.

    HTML 템플릿

    필수 위젯 구성요소입니다.

    HTML 템플릿을 사용하려면 데이터를 표시하고 수집하기 위해 AngularJS에 대한 지식이 필요합니다. HTML 템플릿을 사용하여 다음을 수행합니다.

    • 모델 및 컨트롤러의 정보를 사용하여 브라우저에서 사용자에게 표시되는 동적 뷰를 렌더링합니다.
    • 클라이언트 스크립트 변수를 태그업에 바인딩합니다.
    • 최종 사용자로부터 데이터를 수집합니다.
    클라이언트 스크립트

    필수 위젯 구성요소입니다.

    클라이언트 스크립트를 사용하려면 클라이언트 컨트롤러를 만들기 위해 API와 AngularJS에 ServiceNow 대한 지식이 모두 필요합니다. 클라이언트 스크립트를 사용하여 다음을 수행합니다.

    • JavaScript 및 JSON 객체의 서버 데이터를 클라이언트 객체에 매핑합니다.
    • 데이터를 렌더링하기 전에 처리합니다.
    • 데이터를 HTML 템플릿에 전달합니다.
    • 처리를 위해 사용자 입력 및 데이터를 서버로 다시 전달합니다.
    서버 스크립트

    필수 위젯 구성요소입니다.

    서버 스크립트에서 기록 데이터를 사용하려면 API에 대한 ServiceNow 지식이 필요합니다. 서버 스크립트를 사용하여 다음을 수행합니다.

    • 위젯의 초기 상태를 설정합니다.
    • 데이터 변수를 사용하여 기록 데이터를 위젯 클라이언트 스크립트로 보냅니다.
    • 서버 쪽 쿼리를 실행합니다.
    링크 기능

    선택적 위젯 구성요소입니다.

    링크 함수를 사용하려면 AngularJS에 대한 지식이 필요합니다. 연결 기능을 사용하여 DOM을 직접 조작할 수 있습니다.

    옵션 스키마

    선택적 위젯 구성요소입니다.

    관리자가 위젯을 서비스 포털 구성할 수 있습니다. 옵션 스키마를 사용하여 다음을 수행합니다.

    • 위젯에 대한 매개변수를 지정합니다.
    • 관리 사용자가 위젯 인스턴스에 대한 인스턴스 옵션을 정의할 수 있도록 허용합니다.
    • 유연하고 재사용 가능한 위젯을 개발합니다.
    Angular 제공자

    선택적 위젯 구성요소입니다.

    Angular 제공자는 AngularJS에 대한 지식이 필요합니다. Angular 제공자를 사용하여 다음을 수행할 수 있습니다.

    • 기록 또는 필터를 변경할 때 위젯을 동기화 상태로 유지합니다.
    • 위젯 간에 컨텍스트를 공유합니다.
    • 상태를 유지하고 유지합니다.
    • 재사용 가능한 동작과 UI 구성요소를 생성하여 여러 위젯에 삽입합니다.
    종속성

    선택적 위젯 구성요소입니다.

    위젯 의존성은 JavaScript 또는 CSS 파일과 같은 위젯에서 사용하는 외부 자원입니다.

    위젯의 전역 객체

    페이지에서 위젯이 처음으로 렌더링을 시작하면 서버 스크립트가 먼저 실행되어 입력, 옵션 및 데이터의 세 가지 전역 객체에 액세스합니다. 입력 변수는 클라이언트 스크립트에서 전송된 데이터 객체이므로 처음 초기화될 때 이 변수는 정의되지 않습니다.

    서버 및 클라이언트 스크립트 전역에서 사용 가능한 변수

    위젯이 처음 인스턴스화되면 서버 스크립트는 다음을 수행합니다.

    1. 빈 데이터 객체를 초기화합니다.
    2. 클라이언트 컨트롤러에서 보낸 데이터로 입력 개체를 초기화하거나, 위젯을 초기화하는 데 사용되는 데이터로 옵션 개체를 초기화합니다.
    3. 데이터 객체를 JSON으로 클라이언트 컨트롤러에 전송합니다.

    클라이언트 스크립트:

    1. c.data를 사용하여 서버 데이터 객체에 액세스합니다.

      주:
      기본적으로 위젯은 c 변수를 사용하여 컨트롤러를 구문으로 사용하는 컨트롤러 인스턴스를 나타냅니다. 위젯을 생성하거나 복제할 때 이 변수를 변경할 수 있습니다.

    2. server.update()를 사용하여 데이터 모델에 변경 사항을 게시합니다. 이 메서드는 입력 개체를 사용하여 서버 스크립트를 업데이트합니다.

      주:
      server.update()를 호출한 후 클라이언트 스크립트 데이터 객체는 서버 스크립트 데이터 객체에 의해 자동으로 덮어쓰여집니다.
    3. c.options를 사용하여 서버에서 위젯을 호출하는 데 사용되는 값에 액세스합니다. 이 개체는 읽기 전용입니다.

    위젯 편집기 사용

    위젯을 만들면 sp_widget 테이블에 기록이 생성됩니다. 그러나 구성의 위젯 편집기를 서비스 포털 스크립팅 환경으로 사용할 수 있습니다. 위젯 편집기는 IDE와 유사한 전체 페이지 애플리케이션입니다. 위젯에서 편집하고 싶은 부분은 표시하고 나머지는 숨길 수 있으며, 변경 내용을 실시간으로 미리 볼 수 있습니다.

    주:
    서버 측 스크립트의 경우 애플리케이션이 ES5 표준 모드 또는 호환성 모드를 사용하는 경우 ECMAScript 2021(ES12) JavaScript 모드를 사용하여 켤 수 있습니다. JavaScript 모드가 ECMAScript 2021(ES12)로 설정된 애플리케이션의 스크립트는 기본적으로 ECMAScript 2021(ES12)을 사용합니다. 자세한 내용은 Turn on ECMAScript 2021 (ES12) mode for a script 문서를 참조하십시오.

    위젯 편집기 IDE