포함된 위젯

HTML 템플릿, 서버 스크립트 또는 클라이언트 스크립트에 위젯을 포함합니다.

HTML 템플릿에 위젯 포함

HTML 템플릿에 위젯을 포함하려면 <widget></widget> 요소를 사용합니다. 매개변수로 포함하려는 위젯의 ID를 전달합니다.

<div>
    <widget id="widget-cool-clock"></widget>
</div>

위젯에 옵션 스키마가 있는 경우 JSON 형식으로 인스턴스 옵션을 정의할 수 있습니다.

<widget id="widget-cool-clock" options='{"zone": "America/Los_Angeles","title": "San Diego, CA"}'></widget>

또는 위젯 서버 스크립트에서 옵션을 정의할 수 있습니다.

HTML 템플릿

<widget id="widget-cool-clock" options='data.clockOptions'></widget>

서버 스크립트

(function() {
  data.clockOptions = {"zone": "America/Los_Angeles","title": "San Diego, CA"};
})();

클라이언트 스크립트에 위젯 포함

spUtil.get()을 사용하여 클라이언트 스크립트에서 위젯 모델을 가져옵니다.

spUtil.get("widget-sc-cat-item", {sys_id: "your_catalog_item_sys_id"}).then(function(response) {
    c.catalogItemWidget = response;
});

위젯 클라이언트 스크립트에서 spUtil 클래스를 사용하는 경우 클래스를 클라이언트 스크립트 함수에 삽입해야 합니다. 다음 예제에서는 Cool Clock 위젯을 포함합니다.

클라이언트 스크립트

function(spUtil) {
    var c = this;
    spUtil.get("widget-cool-clock").then(function(response) {
            c.myClockWidget = response;
    });
}

HTML 템플릿

<sp-widget widget="c.myClockWidget"></sp-widget>

서버 스크립트에 위젯 포함

$sp.getWidget()을 사용하여 서버 스크립트에서 위젯 모델을 가져옵니다.

data.catalogItemWidget = $sp.getWidget("widget-sc-cat-item");

다음 예제에서는 Cool Clock 위젯을 포함합니다.

서버 스크립트

(function() {
    var coolClockOptions = {"zone": "America/Los_Angeles","title": "San Diego, CA"}
    data.coolClockWidget = $sp.getWidget('widget-cool-clock', coolClockOptions);
})();

HTML 템플릿

<sp-widget widget="data.coolClockWidget"></sp-widget>

위젯 모델 속성

다른 위젯 내에서 위젯 모델을 호출하면 HTML 템플릿, 클라이언트 스크립트 및 링크 함수가 sp_widget 레코드에 있는 것처럼 로드됩니다. 데이터 속성은 위젯 서버 스크립트 실행의 결과입니다. 서버의 데이터 개체에 넣은 모든 항목을 클라이언트의 데이터 개체에서 사용할 수 있습니다.

속성 이름	유형	설명
client_script	문자열	위젯 클라이언트 스크립트 필드입니다.
CSS	문자열	위젯에 대한 SASS 필드에서 컴파일된 CSS 출력입니다.
데이터	객체	위젯 서버 스크립트의 키와 값을 포함하는 데이터 객체입니다.
의존성	배열	위젯이 실행되기 전에 로드할 외부 공급업체 라이브러리입니다.
옵션	객체	위젯을 초기화하는 데 사용되는 옵션입니다.
템플릿	문자열	위젯의 HTML 템플릿 필드입니다.

사용자 지정 옵션으로 위젯을 여러 번 포함

사용자 지정 옵션을 사용하여 멋진 시계 위젯을 여러 번 포함합니다.

시작하기 전에

필요한 역할: admin 또는 sp_admin

이 태스크 정보

각각 다른 시간대와 제목을 사용하여 시원한 시계 위젯의 여러 인스턴스를 포함하는 위젯을 만듭니다. 위젯 편집기에서 냉각 시계 위젯을 열어 HTML 템플릿 및 클라이언트 스크립트에서 참조된 위젯 옵션을 확인합니다.

그림 1. 옵션이 강조 표시된 Cool Clock 위젯

프로시저

1. Embedded clock이라는 이름의 Cool Clock 위젯을 복제합니다.
2. 코드 블록을 다음으로 바꿉니다.
   HTML 템플릿

   <div class="panel panel-default">
     <div class="panel-heading">Time across the US</div>
     <div class="panel-body">
       <div class="row">
         <div class="col-sm-3" ng-repeat="myClock in c.data.clocks">
           <sp-widget widget="myClock"></sp-widget>
         </div>
       </div>
     </div>
   </div>

   CSS

   .panel {
       margin-top: 10px;
   }

   클라이언트 스크립트

   function() {
       // nothing to do here...
   }

   서버 스크립트

   (function() {
       var options = [
           {zone: "America/Los_Angeles", title: "San Diego"},
           {zone: "America/Denver", title: "Denver"},
           {zone: "America/Chicago", title: "Chicago"},
           {zone: "America/New_York", title: "New York"}
       ];
   
       data.clocks = [];
       for (var i in options) {
           data.clocks.push($sp.getWidget("widget-cool-clock", options[i]));
       }
   })();

결과

내장된 시계 위젯에 있는 시계의 각 인스턴스는 서로 다른 시간대로 표시됩니다.

그림 2. 샘플 클럭 옵션