Azure Pack 管理ポータルClient-Side拡張機能テンプレートのWindows

 

適用対象: Azure Pack Windows

Hello Worldサンプル Visual Studio Project パス: Microsoft.WAP.Samples.HelloWorld.TenantExtension\Templates と Microsoft.WAP.Samples.HelloWorld.AdminExtension\Templates

拡張機能で必要な HTML はテンプレートに配置し、マニフェストで定義する必要があります。 これにより、Windows Server 管理ポータル用の azure Pack Windowsが読み込まれると、ブラウザーにテンプレートが読み込まれます。

拡張機能の HTML は、jsRender テンプレート エンジンによって処理されます (関連するブログ投稿http://www.borismoore.com/を参照)。http://borismoore.github.com/jsviews/demos/index.html テンプレート タグ ({{ と }} を使用しない場合、テンプレート内の HTML はそのまま出力されます。

テンプレートは、含まれる要素 (通常は div) 内にレンダリングされます。 含まれている要素に存在する有効な HTML スニペットがあることを確認します。 テンプレートの処理は、テンプレートに置き換えるために値を参照するときに使用されるデータ オブジェクトのコンテキスト内で発生します。 div 要素内のテンプレート マークアップの例を次に示します。

<div class="aux-readonlyvalue">
  {{if domain.hasExpiry == true}}
    <span>Expiration data</span>
    <div>{{>domain.ExpiryDate}}</div>
  {{/if}}
</div>

レンダリング テンプレート

拡張機能のテンプレートは、テンプレート マニフェストの name 属性によって参照されます。 コンテキスト オブジェクトは、明示的または暗黙的に指定できます。 たとえば、拡張機能のタブを定義するには、次のようなタブ定義の配列を設定する必要があります。

navigation = {
  tabs: [
    {
      id: "domains",
      displayName: "domains",
      template: "domainsTab",
      activated: loadDomainsTab
    }
  ]
}

テンプレート マニフェストの名前属性値と一致する "template" パラメーターに注意してください。 コンテキスト オブジェクトは、クライアント側フレームワークによって、最上位のタブである場合は空のオブジェクトに暗黙的に設定されます。つまり、アイテムにドリルインされていないか、ドリルイン タブの場合は以前に選択した項目になります。

一部の関数では、明示的なコンテキスト オブジェクトを使用してレンダリングできます。 たとえば、簡単な 1 ステップ ウィザードを作成するには、次のようにします。

cdm.stepWizard({
    extension: "DomainTenantExtension",
    steps: [{
      template: "createStep1",
      data: data,
      onStepCreated: function () {
        wizard = this;
      },
      onStepActivate: step1Activate,
      onNextStep: function () {
        return Shell.UI.Validation.validateContainer("#dm-create-step1");
      }
    }]
  },
  { size: "mediumplus" });

データ パラメーターは、テンプレート "createStep1" のコンテキスト オブジェクトとして使用されます。 これにより、jsRender は変数を解決するときにデータ オブジェクトのプロパティを確認します。

参照

Azure Pack 管理ポータルのユーザー インターフェイス拡張機能のWindows