ステップ11: 別のレイアウトのサポート

このステップで、レイアウトをレビューし、これを使用すると、ユーザーはコンポーネントの表示方法を変更できます。

カスタム・コンポーネントは、ユーザーが選択可能ないくつかのレイアウトをサポートできます。これらのレイアウトのそれぞれで、カスタム・コンポーネントの表示方法を変更します。レイアウトは登録データの別の拡張機能です。

サンプル・コードでサポートされている3つのレイアウトをレビューするには、appinfo.jsonファイルの"componentLayouts"エントリをレビューします

    "componentLayouts": [
      {
        "name": "default",
        "displayName": "IMAGE_LEFT_LAYOUT"
      },
      {
        "name": "right",
        "displayName": "IMAGE_RIGHT_LAYOUT"
      },
      {
        "name": "top",
        "displayName": "IMAGE_TOP_LAYOUT"
      }
    ],

「設定」パネルをカスタム・コンポーネントに対して開くと、レイアウトを切り替えるオプションが表示されます。コンポーネントを有効にして選択内容の変更に対応するために、render.jsファイルには、現在選択されている値を取得し、この値の変更内容をリスニングするコードがあります。

render.jsファイルを編集して、SampleComponentViewModelオブジェクトを確認します。

• テンプレートで参照されるlayoutオブザーバブルがあります。

  self.layout = ko.observable();

• この値が変更されるたびに処理する更新関数があります。

      self.updateComponentLayout = $.proxy(function (componentLayout) {
        var layout = componentLayout ? componentLayout : 'default';
        self.layout(layout);
        self.alignImage(layout === 'right' ? 'right' : 'left');
        self.showTopLayout(layout === 'top');
        self.showStoryLayout(layout === 'default' || layout === 'right');
  
        self.componentLayoutInitialized(true);
      }, self);

• 初期化コードでは、レイアウトの元の値を取得し、更新関数をコールします。

  SitesSDK.getProperty('componentLayout', self.updateComponentLayout);

  プロパティの変更リスナーはこのプロパティへの変更を確認し、更新関数をコールします。

  self.updateSettings = function (settings) {
    if (settings.property === 'componentLayout') {
      self.updateComponentLayout(settings.value);
    } else if (settings.property === 'customSettingsData') {
      self.updateCustomSettingsData(settings.value);
    }
  };
  
  SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.SETTINGS_UPDATED, $.proxy(self.updateSettings, self));

  最終的に、sampleComponentTemplateテンプレート・オブジェクトには、この値の変更を反映するためのコードが含まれます。

  '<!-- ko if: alignImage() === \'right\' -->' +

また、これらの変更により、「設定」パネルでレイアウトを選択して、コンポーネントを更新できます。