사용자 정의 위젯 개발

  • 릴리스 버전: Xanadu
  • 업데이트 날짜 2024년 08월 01일
  • 읽기4분

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

    시작하기 전에

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

    필요한 경우 Bootstrap 구성요소에 액세스하여 Bootstrap 템플릿을 기반으로 빌드할 수 있습니다.

    위젯의 일부

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

    HTML 템플릿

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

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

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

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

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

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

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

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

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

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

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

    옵션 스키마

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

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

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

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

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

    • 기록 또는 필터를 변경할 때 위젯을 동기화된 상태로 유지합니다.
    • 위젯 간에 컨텍스트를 공유합니다.
    • 상태를 유지하고 유지합니다.
    • 재사용 가능한 비헤이비어와 UI 구성요소를 만들어 여러 위젯에 삽입합니다.
    의존성

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

    위젯 의존성은 JavaScript 또는 CSS 파일처럼 위젯에 사용되는 외부 자원입니다.

    위젯의 전역 객체

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

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

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

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

    클라이언트 스크립트:

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

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

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

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

    위젯 편집기 사용

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

    HTML 템플릿, CSS, 클라이언트 스크립트 및 서버 스크립트에 대한 스크립트 예제를 보여주는 계산기 위젯이 있는 위젯 편집기