埋め込みウィジェット

  • リリースバージョン: Xanadu
  • 更新日 2024年08月01日
  • 所要時間：5分

    • HTML テンプレート、サーバー スクリプト、またはクライアント スクリプトにウィジェットを埋め込みます。

    HTML テンプレートへのウィジェットの埋め込み

    <widget></ widget> 要素を使用し、HTML テンプレートにウィジェットを埋め込みます。埋め込もうとしているウィジェットの 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 クラスをウィジェット クライアント スクリプトで使用している場合、クラスをクライアント スクリプト関数に挿入する必要があります。次の例では、クール クロック ウィジェットを埋め込みます。

    クライアントスクリプト
    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");

    次の例では、クール クロック ウィジェットを埋め込みます。

    サーバースクリプト
    (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 レコードと同じようにロードされます。data プロパティは、ウィジェット サーバー スクリプトの実行結果です。サーバー上のデータ オブジェクトに置いたものはすべて、クライアント上のデータ オブジェクトで使用できます。

    プロパティ名 タイプ 説明
    client_script 文字列 ウィジェット クライアント スクリプト フィールド
    css 文字列 ウィジェットの SASS フィールドからコンパイルされた CSS 出力
    データ オブジェクト ウィジェット サーバー スクリプトのキーと値を含むデータ オブジェクト
    dependencies アレイ ウィジェットが実行される前にロードするサードパーティライブラリ
    オプション オブジェクト ウィジェットの初期化に使用するオプション
    template 文字列 ウィジェットの HTML テンプレート フィールド

    カスタム オプションを使用したウィジェットの複数回の埋め込み

    カスタム オプションを使用してクール クロック ウィジェットを複数回埋め込みます。

    始める前に

    必要なロール：admin または sp_admin

    このタスクについて

    クール クロック ウィジェットの複数のインスタンスを埋め込むウィジェットを作成します。それぞれタイムゾーンとタイトルが異なります。ウィジェット エディターでクール クロック ウィジェットを開いて、HTML テンプレートとクライアント スクリプトで参照されるウィジェット オプションを表示します。

    図 : 1. オプションがハイライト表示されたクール クロック ウィジェット
    c.options.title、c.options.c_color、および c.options.zone が強調表示されたクールクロックウィジェット

    手順

    1. クール クロック ウィジェットを、埋め込みクロックという名前でクローンします。
    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. サンプル クロック オプション
    4 つの異なるタイムゾーンを持つ 4 つの埋め込みウィジェットを含む埋め込みクロック