자습서: 사용자 지정 위젯 빌드

이 튜토리얼에 따라 항목을 표시하는 서비스 카탈로그 사용자 지정 위젯을 빌드하십시오. 이 자습서를 모델로 사용하면 의 고급 스크립팅 기능을 서비스 포털이해하는 데 도움이 됩니다.

이 튜토리얼에서는 빠른 주문 위젯을 생성합니다. 이 위젯의 특징은 다음과 같습니다.

• 검색하기 전에 사용자에게 자주 사용하는 항목을 표시합니다.
• 사용자에게 사용 가능한 옵션을 쿼리 서비스 카탈로그 하고 표시합니다.
• 사용자가 빠른 주문 위젯 내에서 항목을 보고 주문할 수 있는 포함된 SC 카탈로그 항목 위젯이 포함되어 있습니다.
• Angular 공급자를 사용하여 쿼리된 각 항목 옆에 범주 아이콘을 표시합니다.

위젯 생성 및 템플릿 설정

빠른 주문 위젯을 서비스 카탈로그만들어 .

시작하기 전에

필요한 역할: admin 또는 sp_admin

프로시저

1. 다음으로 이동 모두 > 서비스 포털 > 서비스 포털 구성 을 클릭하고 위젯 편집기를 클릭합니다.
2. Create a new widget(새 위젯 만들기)을 클릭합니다.
3. 다음 값을 정의합니다.
   • 위젯 이름: 빠른 주문
   • 위젯 ID: quick_order
   • 테스트 페이지 생성: 활성
   • 페이지 ID: quick_order

   테스트 페이지에 위젯을 추가하면 다음 각 테이블에 기록이 생성됩니다.

   • sp_page
   • sp_container
   • sp_row
   • sp_column
   • sp_instance
   • sp_widget

   주:

   서비스 포털 구성의 페이지 편집기를 사용하여 테스트 페이지의 요소 계층 구조를 볼 수 있습니다.
4. 제출을 클릭합니다.
5. 위젯 편집기에서 빠른 주문 위젯을 엽니다.
6. HTML 필드에 다음과 같은 간단한 템플릿을 추가합니다.

   <div class="panel panel-primary">
    <div class="panel-heading">Request an item from the catalog</div>
    <div class="panel-body">
      My catalog results
    </div>
   </div>
   

7. 저장을 클릭합니다.
8. <yourInstanceUrl>/sp?id=quick_order URL을 사용하여 새 탭에서 테스트 페이지를 미리 봅니다.

   위젯 템플릿이 테스트 페이지에 표시됩니다.

   

인스턴스 테이블을 쿼리하는 서버 스크립트 추가

위젯을 추가하고 기본 템플릿을 생성한 후에는 사용자가 인스턴스 테이블에서 데이터를 쿼리할 수 있는 고급 클라이언트 및 서버 스크립트를 정의할 수 있습니다. 데이터베이스에서 데이터를 쿼리하고, 사용자에게 표시하고, 업데이트를 서버로 다시 전송하여 클라이언트와 서버 간에 데이터 모델을 전달할 수 있습니다.

시작하기 전에

필요한 역할: admin 또는 sp_admin

프로시저

1. 위젯 편집기에서 빠른 주문 위젯을 엽니다.
2. 서버 스크립트를 선택하여 서버 스크립트 필드를 엽니다.
3. 기본 서버 스크립트를 다음 사용자 지정 스크립트로 바꿉니다.

   (function() {
   	if (input.keywords != null && input.keywords != '')
   		data.items = getCatalogItems(input.keywords);
   	
   	function getCatalogItems(keywords) {
   		var sc = new GlideRecord('sc_cat_item');
   		sc.addActiveQuery();
   		sc.addQuery('123TEXTQUERY321', keywords);
   		sc.addQuery('sys_class_name', 'NOT IN', 'sc_cat_item_wizard,sc_cat_item_content');
   		sc.addQuery('sc_catalogs', 'e0d08b13c3330100c8b837659bba8fb4');
   		sc.setLimit(100);
   		sc.orderByDesc("ir_query_score");
   		sc.query();
   		var results = [];
   		while (sc.next()) {
   			if (!$sp.canReadRecord(sc))
   				continue;
   
   			var item = {};
   			$sp.getRecordDisplayValues(item, sc, 'name,price,sys_id');
   			item.category = sc.getValue('category');
   			results.push(item);
   		}
   		return results;
   	}
   })();
   

   이 스크립트는 123TEXTQUERY321 쿼리 메서드를 사용하여 sc_cat_item 테이블에서 키워드 검색을 수행합니다.

4. HTML 템플릿을 다음 스크립트로 바꿉니다.

   <div class="panel panel-primary">
    <div class="panel-heading">Request an item from the catalog</div>
    <div class="panel-body">
      <input class="form-control" type="search" placeholder="Start typing here to search the list of catalog items" ng-model="c.data.keywords" ng-change="c.server.update()" ng-model-options="{debounce: 250}" />
      <ul class="list-group result-container">
        <li class="list-group-item" ng-repeat="item in c.data.items">
          <a href>{{item.name}}</a><span class="pull-right">{{item.price}}</span>
        </li>
      </ul>
    </div>
   </div>
   

   이 템플릿은 검색 필드를 추가하고 다음 Angular 지시문을 사용하여 서버 스크립트에서 수행된 쿼리의 결과를 표시합니다. 이러한 지시문에 대한 자세한 내용은 Angular API 참조를 검토하세요.

   표 1. 템플릿에 사용되는 각도 지시문

   각도 지시문	설명
   ng-모델	모델 변수 c.data.keywords에 값 변경 사항을 자동으로 읽고 씁니다.
   ng-모델 옵션	ng-model 동작을 구성합니다. 이 템플릿에서 ng-model은 사용자가 250밀리초 동안 입력을 중지한 후 모델을 업데이트합니다.
   ng-변경	모델 값이 변경된 후 c.server.update() 를 실행합니다. 이 함수는 데이터 객체를 서버 스크립트에 게시합니다. 스크립트가 실행된 후 데이터 객체는 서버에서 생성된 데이터 객체의 새 값으로 자동 업데이트됩니다.
   ng-반복	부모 요소와 자식 요소에서 템플릿을 만듭니다. c.data.items의 각 항목에 대해 템플릿의 인스턴스가 만들어지고 {{item.name}} 및 {{item.price}} 식이 각 항목의 값으로 바뀝니다.

5. CSS - SCSS 필드에 다음 스크립트를 추가합니다.

   .result-container {
    margin-top: 10px;
   }
   

6. 테스트 페이지 미리 보기를 새로 고쳐 변경 내용을 확인합니다.

   검색 상자에 입력하면 일치하는 카탈로그 항목이 나타납니다. ipad를 검색해 보십시오.

   

위젯의 빈 상태 관리

검색어를 입력하기 전에 사용자에게 자주 사용하는 항목 목록을 표시합니다.

시작하기 전에

필요한 역할: admin 또는 sp_admin

이 태스크 정보

위젯이 초기화될 때 검색이 실행되지 않았으므로 서버 입력 변수가 정의되지 않습니다. 이 빈 상태는 사용자가 위젯과 처음 상호 작용할 때 혼동을 일으킬 수 있습니다. 이 문제를 해결하려면 입력 변수가 비어 있을 때 위젯에 표시할 항목을 제공합니다. 이 초기 데이터는 사용자가 위젯과 처음 상호 작용할 때 지침이 될 수 있습니다.

프로시저

1. 위젯 편집기에서 빠른 주문 위젯을 엽니다.
2. 기존 서버 스크립트를 다음 스크립트로 바꿉니다.

   (function() {
   	if (input.keywords != null && input.keywords != '')
   		data.items = getCatalogItems(input.keywords);
   	else data.items = getPopularItems();
   
   	function getCatalogItems(keywords) {
   		var sc = new GlideRecord('sc_cat_item');
   		sc.addActiveQuery();
   		sc.addQuery('123TEXTQUERY321', keywords);
   		sc.addQuery('sys_class_name', 'NOT IN', 'sc_cat_item_wizard,sc_cat_item_content');
   		sc.addQuery('sc_catalogs', 'e0d08b13c3330100c8b837659bba8fb4');
   		sc.setLimit(100);
   		sc.orderByDesc("ir_query_score");
   		sc.query();
   		var results = [];
   		while (sc.next()) {
   			if (!$sp.canReadRecord(sc))
   				continue;
   
   			var item = {};
   			$sp.getRecordDisplayValues(item, sc, 'name,price,sys_id');
   			item.category = sc.getValue('category');
   			results.push(item);
   		}
   		return results;
   	}
   	
   	function getPopularItems() {
   		var items = [];
   		var count = new GlideAggregate('sc_req_item');
   		count.addAggregate('COUNT','cat_item');
   		count.groupBy('cat_item');
   		count.addQuery('cat_item.sys_class_name', 'NOT IN', 'sc_cat_item_guide,sc_cat_item_wizard,sc_cat_item_content');
   		count.addQuery('cat_item.sc_catalogs', 'e0d08b13c3330100c8b837659bba8fb4');
   		count.orderByAggregate('COUNT', 'cat_item');
   		count.query();
   		while (count.next() && items.length < 9) {
   			if (!$sp.canReadRecord("sc_cat_item", count.cat_item.sys_id.getDisplayValue()))
   				continue; // user does not have permission to see this item
   
   			var item = {};
   			item.name = count.cat_item.name.getDisplayValue();
   			item.category = count.cat_item.category.toString();
   			item.price = count.cat_item.price.getDisplayValue();
   			item.sys_id = count.cat_item.sys_id.getDisplayValue();
   			items.push(item);
   		}
   		return items;
   	}
   })();
   

   이 스크립트는 입력 변수가 비어 있을 때 데이터베이스를 쿼리하고 인기 있는 항목을 반환하는 새로운 함수 getPopularItems()를 도입합니다.

3. HTML 템플릿을 다음 스크립트로 바꿉니다.

   <div class="panel panel-primary">
     <div class="panel-heading">Request an item from the catalog</div>
     <div class="panel-body">
       <input class="form-control" type="search" placeholder="Start typing here to search the list of catalog items" ng-model="c.data.keywords" ng-change="c.server.update()" ng-model-options="{debounce: 250}" />
       <h5 ng-if="!c.data.keywords">Showing the most popular items</h5>
       <ul class="list-group result-container">
         <li class="list-group-item" ng-repeat="item in c.data.items">
           <a href>{{item.name}}</a><span class="pull-right">{{item.price}}</span>
         </li>
       </ul>
     </div>
     <div class="panel-footer" ng-if="c.data.keywords">
       <ng-pluralize count="c.data.items.length"
                    when="{'0': 'No items found for ',
                        '1': 'One item matching ',
                        'other': 'Found {} items matching '}">
       </ng-pluralize>
       {{c.data.keywords}}
     </div>
   </div>
   

   이 스크립트는 서버 스크립트에서 반환된 자주 사용하는 항목을 표시하는 템플릿을 제공합니다.

4. 테스트 페이지 미리 보기를 새로 고쳐 변경 내용을 확인합니다.

   이 위젯은 검색 입력 전에 사용자에게 인기 있는 항목을 표시합니다.

   

기존 위젯 포함

SC 카탈로그 항목 위젯을 포함하여 사용자가 빠른 주문 위젯에서 항목을 보고 구매할 서비스 카탈로그 수 있도록 합니다.

시작하기 전에

필요한 역할: admin 또는 sp_admin

이 태스크 정보

코드를 복제하는 대신 위젯을 포함하여 기존 기능을 활용할 수 있습니다. SC 카탈로그 항목 위젯은 사용자가 항목을 보고 구매할 서비스 카탈로그 수 있는 기본 시스템 위젯입니다.

프로시저

1. SC 카탈로그 항목 위젯을 검사합니다.
   SC 카탈로그 항목 위젯을 포함하기 전에 위젯을 검사하여 어떤 데이터에 액세스해야 하는지 파악하십시오. 포함된 위젯에 올바른 데이터가 전달되도록 빠른 주문 위젯 클라이언트 또는 서버 스크립트를 업데이트해야 할 수 있습니다.
   1. <yourInstanceURL>/sp_config?id=widget_editor로 이동합니다.
   2. SC 카탈로그 항목 위젯을 엽니다.
   3. 위젯 ID는 widget-sc-cat-item입니다.
      이 ID를 사용하여 클라이언트 스크립트에 위젯 모델을 포함합니다.
   4. 서버 스크립트를 검토합니다.

      data 개체에는 input 또는 options 개체로 채워진 sys_id 속성이 포함되어 있습니다. 입력이나 옵션에 sys_id가 포함되어 있지 않은 경우 $sp.getParameter() 메서드는 요청 쿼리 문자열에서 sys_id 검색합니다.

      

      입력 객체를 채우려면 빠른 주문 위젯 클라이언트 스크립트에서 sys_id 카탈로그 항목을 전달할 수 있습니다.

2. 위젯 편집기에서 빠른 주문 위젯을 엽니다.
3. 빠른 주문 위젯 클라이언트 스크립트를 다음 스크립트로 대체합니다.

   function($location, spUtil) {
     var c = this;
   	
   	c.select = function(item_id) {
   		if (c.openItem == item_id) {
   			c.openItem = null;
   			return;
   		}
   		
   		renderCatalogItemWidget(item_id);
   	}
   	
   	function renderCatalogItemWidget(item_id) {
   		c.catalogItemWidget = null;
   		spUtil.get("widget-sc-cat-item", {sys_id: item_id}).then(function(response){
   			c.catalogItemWidget = response;
   			c.openItem = item_id;
   		});
   	}
   }
   

   이 스크립트는 spUtil.get() 을 사용하여 ID(widget-sc-cat-item)로 위젯 모델을 검색하고 {sys_id: item_id} 개체를 정의합니다. 이 개체는 서버 스크립트에 입력으로 게시됩니다.

4. HTML 템플릿을 다음 스크립트로 바꿉니다.

   <div class="panel panel-primary">
     <div class="panel-heading">Request an item from the catalog</div>
     <div class="panel-body">
       <input class="form-control" type="search" placeholder="Start typing here to search the list of catalog items" ng-model="c.data.keywords" ng-change="c.server.update()" ng-model-options="{debounce: 250}" />
       <h5 ng-if="!c.data.keywords">Showing the most popular items</h5>
       <ul class="list-group result-container">
         <li class="list-group-item" ng-repeat="item in c.data.items">
           <a href ng-click="c.select(item.sys_id)">{{item.name}}</a><span class="pull-right">{{item.price}}</span>
           <div class="catalog-item" ng-if="item.sys_id == c.openItem">
               <sp-widget ng-if="c.catalogItemWidget" widget="c.catalogItemWidget" />
           </div>
         </li>
       </ul>
     </div>
     <div class="panel-footer" ng-if="c.data.keywords">
       <ng-pluralize count="c.data.items.length"
                    when="{'0': 'No items found for ',
                        '1': 'One item matching ',
                        'other': 'Found {} items matching '}">
       </ng-pluralize>
       {{c.data.keywords}}
     </div>
   </div>

   이 템플릿의 특징은 다음과 같습니다.

   • ng-click 지시문을 사용하여 클릭 시 동작을 추가합니다.
   • sp-widget 지시문을 사용하여 포함된 SC 카탈로그 항목 위젯을 표시합니다.
5. CSS를 다음 스크립트로 바꿉니다.

   .result-container {
     margin-top: 10px;
   }
   
   .catalog-item {
     background-color: #f5f5f5;
     padding: 10px;
     @include border-top-radius($panel-border-radius);
     @include border-bottom-radius($panel-border-radius);
   }
   

6. 테스트 페이지 미리 보기를 새로 고쳐 변경 내용을 확인합니다.

   검색 결과를 선택하면 포함된 SC 카탈로그 항목 위젯에서 항목이 열립니다.

   

재사용 가능한 지시문을 작성하여 위젯에 추가

Angular 제공자는 여러 위젯에 추가할 수 있는 재사용 가능한 구성 요소입니다. 위젯 Angular 제공자 테이블을 사용하여 빠른 주문 위젯의 각 결과 옆에 범주 아이콘을 표시하는 지침을 생성합니다.

시작하기 전에

필요한 역할: admin 또는 sp_admin

이 태스크 정보

Angular 공급자를 사용하면 클라이언트 스크립트 컨트롤러에 삽입할 수 있는 각도 지시문 및 서비스를 빌드할 수 있습니다. Provider의 코드는 특정 모듈에 추가되지 않고 익명이어야 하기 때문에 일반적인 Angular 지시문 또는 서비스와 다릅니다.

프로시저

1. 다음으로 이동 모두 > 서비스 포털 > 서비스 포털 구성 > 포털 테이블 > 위젯 Angular 제공자.
   위젯 Angular 제공자 테이블이 열립니다.
2. 새로 만들기를 선택하여 새 기록을 생성합니다.
3. 양식을 작성합니다.
   1. 유형과 이름을 추가합니다.
      • 유형: 지시문
      • 이름: categoryIcon
   2. 클라이언트 스크립트를 추가합니다.

      function() {
        return {
          template: '<span class="fa fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-{{::icon}} fa-stack-1x fa-inverse"></i></span>',
          restrict: 'E',
          replace: true,
          scope: {
            category: '='
          },
          link: function(scope, element) {
      					
      var _iconMap = {
      		"b06546f23731300054b6a3549dbe5dd8": "tablet", /* Tablets */
      		"15706fc0a0a0aa7007fc21e1ab70c2f": "question", /* Can we help you? */
      		"d68eb4d637b1300054b6a3549dbe5db2": "mobile-phone", /* Mobiles */
      		"109cdff8c6112276003b17991a09ad65": "print", /* Office and Print */
      		"5d643c6a3771300054b6a3549dbe5db0": "print", /* Printers */
      		"2c0b59874f7b4200086eeed18110c71f": "plug", /* Peripherals */
      		"2809952237b1300054b6a3549dbe5dd4": "desktop" /* Software */
      	};
      			
      	scope.icon = _iconMap[scope.category] || "shopping-cart";
          }
        }
      }

      이 스크립트는 범주 기록의 sys_id 항목과 서비스 카탈로그 연결합니다. 표시되는 아이콘은 의 서비스 카탈로그범주 기록에 정의된 아이콘입니다.

   3. 저장을 선택합니다.
4. 새 Angular 지침을 빠른 주문 위젯과 연결합니다.
   1. 다음으로 이동 모두 > 서비스 포털 > 위젯.
   2. 빠른 주문 위젯을 엽니다.
   3. 관련 목록에서Angular 공급자를 선택합니다.
   4. Angular 제공자 목록에서 편집 을 선택하고 categoryIcon Angular 제공자를 빠른 주문 위젯과 연결합니다.
   5. 저장을 선택합니다.
5. 빠른 주문 HTML 템플릿에 categoryIcon 지시문을 추가합니다.
   1. 위젯 편집기에서 빠른 주문 위젯을 엽니다.
   2. HTML 템플릿을 다음 스크립트로 바꿉니다.

      <div class="panel panel-primary">
        <div class="panel-heading">Request an item from the catalog</div>
        <div class="panel-body">
          <input class="form-control" type="search" placeholder="Start typing here to search the list of catalog items" ng-model="c.data.keywords" ng-change="c.server.update()" ng-model-options="{debounce: 250}" />
          <h5 ng-if="!c.data.keywords">Showing the most popular items</h5>
          <ul class="list-group result-container">
            <li class="list-group-item" ng-repeat="item in c.data.items">
              <a href ng-click="c.select(item.sys_id)"><category-icon category="item.category" style="margin-right: 10px"></category-icon>{{item.name}}</a><span class="pull-right">{{item.price}}</span>
              <div class="catalog-item" ng-if="item.sys_id == c.openItem">
                  <sp-widget ng-if="c.catalogItemWidget" widget="c.catalogItemWidget" />
                </div>
            </li>
          </ul>
        </div>
        <div class="panel-footer" ng-if="c.data.keywords">
          <ng-pluralize count="c.data.items.length"
                       when="{'0': 'No items found for ',
                           '1': 'One item matching ',
                           'other': 'Found {} items matching '}">
          </ng-pluralize>
          {{c.data.keywords}}
        </div>
      </div>
      

6. 테스트 페이지 미리 보기를 새로 고쳐 변경 내용을 확인합니다.

   각 결과 옆에 범주 아이콘이 표시됩니다.