Windows Azure Pack Management Portal Client-Side Extension Templates

Applies To: Windows Azure Pack

Hello World Sample Visual Studio Project Paths: Microsoft.WAP.Samples.HelloWorld.TenantExtension\Templates and Microsoft.WAP.Samples.HelloWorld.AdminExtension\Templates

HTML required by your extension should be put into templates and defined in the manifest. This will load the template into the browser when the Windows Azure Pack for Windows Server management portal loads.

HTML in an extension is processed by the jsRender templating engine (see http://borismoore.github.com/jsviews/demos/index.html and relevant blog posts on http://www.borismoore.com/ ). If you don’t use any of the template tags ({{ and }} ) then the HTML in the template is output as-is.

Templates are rendered within containing elements (usually a div). Be sure to have HTML snippets that are valid residing in a containing element. The processing of templates occurs within the context of a data object which is used when looking up values to substitute into the template. The following is an example of template markup within a div element:

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

Rendering Templates

Templates in an extension are referred to by the name attribute in the template manifest. The context object can be explicit or implicit. For example, defining the tabs for an extension involves setting up an array of tab definitions such as in the following:

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

Note the “template” parameter, which matches a name attribute value in the template manifest. The context object will be set implicitly by the client-side framework to be an empty object if it is a top-level tab, that is it is not drilled-in to an item, or it will be the item previously selected if it is a drilled-in tab.

Some functions can take an explicit context object to render with. For example, to create a simple 1-step wizard:

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" });

The data parameter is used as the context object for the template “createStep1”. This results in jsRender looking at the properties of the data object when resolving variables.

See Also

Windows Azure Pack Management Portal User Interface Extensions