Html templates

From Sense/Net Wiki
Jump to: navigation, search
  •  
  •  
  •  
  •  
  • 100%
  • 6.5.5
  • Enterprise
  • Community
  • Planned

Overview

Templates
Sense/Net ECMS has a flexible Skin System that lets you customize the look and feel of a site or page. One of the key elements of a skin is the templates (html fragments) that we use to generate the final markup when a user visits a page. Templates let you define the markup of certain UI elements (e.g. buttons, links).

In this article portal builders can learn how to work with html templates: where to put them, how to compose them and how to use them on the client side.

Template content

An html template is a content of type HtmlTemplate. It contains an html fragment that defines the html of a UI element - e.g. a link tag with all the subtags and css classes, or a row template of a grid.

<a class="sn-actionlinkbutton btn btn-primary #= class #" #= disabled # href="#= url #" onclick="#= onclick #">
    <span class="fa sn-icon sn-icon-#=iconname# sn-overlay #=overlayclass#"></span>#= text #
</a>

In the example above you can spot variables or parameters. The code that consumes the template (usually on client side) can dynamically fill those placeholders with the actual value - e.g. with the icon corresponding to the action, or the url to put into the href attribute.

#=iconname#
#=url#

In case of custom templates (that you define yourself) the syntax is totally up to you. You can use a different parameter syntax, if you create the necessary client logic to replace those parameters or use a js plugin that is able to work with them (e.g. kendo UI).


Template structure

Templates are stored under the skin, in the templates subfolder. There are multiple types of templates here (e.g. page templates or ascx templates), this article is only about html templates that are accessible on the clienet side. Templates are organized into categories, e.g. action or contentpicker, and you can define custom categories and templates yourself by simply creating the folders and template content here.

Global templates

Local templates

You can override templates defined in the skin with local templates. It is possible to create templates folders and template files in the same structure locally (e.g. under a workspace or even a list) with html markups built differently (e.g. containing different css classes or button texts) than the global ones.

Local templates

These local templates will be displayed only when a user visits this part of the portal - e.g this particular workspace or list.

Client API

Templates will be combined into JSON objects by category, will be cached on the server and served to the client browser as virtual Javascript files.

SN.Templates["action"] = {
   "button.html" : "<a>...</a>",
   "iconlink.html": "<a class=...>...</a>"
}

Usage

As you can see from the example above, you will have globally available objects storing the templates. You can access them by simply referring to these objects anywhere in you js code:

var template = SN.Templates.action["button.html"];

Define references

There are multiple ways to tell the system to generate a script request into the html header that will load a virtual Javascript file containing all the templates in a certain category. It is not possible to load only a single template, it is the category that you state when defining a template request.

You do not have to write template request urls manually, they will be generated by the system using one of the following techniques.

Javascript

In a js file you can state that you need templates in a certain category by adding a header to the js file:

// template action

C# code

You can also register a script request on the server side - for example in a Content View or Portlet using the following line:

// The second parameter is the ASP.NET control that will be used 
// to find the current cacheable portlet if it exists.
UITools.AddTemplateScript("action", control);

Caching

The portal caches the contents of html template files. The generated virtual Javascript files will be invalidated every time you make a change in a template, you do not have to do anything about this. Client side cache works the same way as in case of real Javascript files: the same http headers (e.g. maxage) apply here.

Related links

References

There are no related external articles for this article.