Page Template

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

Overview

Page templates allow you to define consistent layout and design for your pages in Sense/Net. With page templates you can customize your Sense/Net GUI easily. A page template contains areas (zones) where portlets can appear. You can also define css and javascript files that you want to use on every page that use the given page template. If you change a page template, every page that relied on it will change immediately. Every page has a page template so they are important building blocks of the system.

Details

Page templates for customizations

In Sense/Net the look of all the content, pages, etc. are highly customizable. If you want to make a custom html layout, page templates help you to achieve it. You can define different columns and rows in every template and place your portlets within these zones, so if you want you can make a different kind of layout and design for every page on your site.

All your pages can use different css and javascript files if they are defined in page templates. E.g. if you want to use many javascript files on the gallery page but only one on the main page, make two separate page templates, one for the main page and one for the gallery.

Static content in page templates

Some things on your pages are static or rarely change (logo, site title, menu in the footer area, etc. appear on every page and without page templates you should define them on every single page). You can place them in the html code of the page template, so these predefined elements appear on every page where you use this template.

Page templates and master pages

After you add a new page template to the system an ASP.NET master page is automatically created and when editing one of the templates its master page changes as well. In the master page "asp:contentplaceholder" controls are created. When you add a new page with the page template in the background the master page is used on the content page. The system adds some internal, Sense/Net related controls to the master page (e.g. style manager, script manager, portlet manager, portlet editor zone), so you get these features automatically when using Sense/Net portlet pages (e.g. the portlet editing and drag&drop functionality will automatically work on every page).

Where to find page templates

Pagetemplate folder in Content Explorer

Page templates are in the /Root/Global/pagetemplates folder. Here can you add, edit or delete them. A page template is a separate content type in the system. You have to create or upload a new page template in the Content Explorer. Do not forget to upload as page template.

From version 6.5.2. Pagetemplates can be skin-related contents, and can be placed under a specific skin-folder. Save it to the /Root/Skins/your-skin/pagetemplates folder

How to choose a page template

Choose page template

When you create a new portlet page choose a template in the page template control. If you want to change the page template of a page, edit the page with Portal Remote Control or in the Content Explorer and on the page properties pick a new page template.

Switching the page template of an existing page

Sense/Net allows you to switch the page template of a page after creation, whenever you want. There is one important thing you will have to remember when switching page templates: the target page template must define all zones that were used in the original page template - by using we mean portlets were put into the zones. Zones are identified by their name attributes.

If you switch to a page template that does not contain a zone with a name that was contained in the original page template, and the zone in the original page templated contained portlets, ghost portlets will appear on pages with the new page template. This means that these portlets will not be visible and will not be editable/removable, but their logic will be running in the background leading to hindered performance and possibly strange, undiscoverable bugs!

Sample

Page template

In head section of a page template html you can define the usual html elements (title, meta tags, favicon, etc.). Putting the css and javascript references in the head section is not forbidden, but not recommended.

<head>
  <title>Sense/Net 6.1 Demo Site</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="imagetoolbar" content="no" />
  <sn:BaseTag ID="BaseTagControl1" runat="server" />
  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
</head>

The recommended place of the css and javascript references is the body section. You must place sn:CssRequest or sn:ScriptRequest controls in this section to include the css and javascript files. These files can refer to static urls like /Root/skins/ExampleSkin/styles/example.css or they can refer to dynamic urls, that take into account the skin of the current page (e.g. $skin/styles/example.css). We recommend that you palce javascript files at the beginning or at the end of the body section depending on when they will be used. More about skins on the The Skin System - for Portal builders wiki page.

<body class="sn-body sn-layout3 sn-layout-inter sn-inter-<%=snLang%>">
  <sn:CssRequest CSSPath="$skin/styles/jqueryui/jquery-ui.css" ID="pageTemplateUIStyleReq" runat="server" />
  <sn:CssRequest CSSPath="$skin/styles/sn-layout.css" ID="snLayoutCss" runat="server" />
  <sn:CssRequest CSSPath="$skin/styles/skin.css" ID="pageTemplateCssRequest1" runat="server" />
...
<sn:ScriptRequest runat="server" Path="$skin/scripts/init.js" />
</body>

You can configure the system to bundle all of your css or javascript files into one file. You can read more about this topic on the Bundling css and js files wiki page.

In the body section of the page templates you can define zones where the user can place portlets. They can drag and drop the portlets between zones. Usually zones define the basic layout of the page (header, left column, right column, footer, etc.). The zones have a unique name and a HeaderText property (this will be displayed in the header of the zone when the user edits the page). You can put portlets in zones in the page template directly as well. You can also add a portlet in the page template outside of a zone. If you put them in zones users will be able to change them (edit their properties) while they are editing the page. Portlets that are defined in page templates with markup cannot be removed using the UI, only by changing the page template.

  <div class="sn-layout-container ui-helper-clearfix">
    <div class="sn-columns ui-helper-clearfix">
      <div class="sn-column sn-column1">
        <div class="sn-pt-body-border ui-widget-content">
          <div class="sn-pt-body">
            <div class="sn-breadcrumb">
              <snpe:BreadCrumbPortlet BindTarget="CurrentContent" ID="BreadCrumb" runat="server" Separator=" / " ShowSite="True" SiteDisplayName="Home" />
            </div>
          </div>
        </div>
 
        <snpe-zone name="WideCol" HeaderText="Wide Column" PartChromeType="TitleAndBorder"/>
        <div class="sn-columns ui-helper-clearfix">
            <div class="sn-column sn-column1"><snpe-zone name="LeftCol" HeaderText="Left Column" PartChromeType="TitleAndBorder"/></div>
            <div class="sn-column sn-column2"><snpe-zone name="RightCol" HeaderText="Right Column" PartChromeType="TitleAndBorder"/></div>
        </div>
        <snpe-zone name="WideColBottom" HeaderText="Wide Column (Bottom)" PartChromeType="TitleAndBorder"/>
        </div>
        <div class="sn-copyright">
          <a href="/legal/">Legal</a><span class="sn-separator"> &bull; </span>
          Powered by <a href="http://www.sensenet.com" title="www.sensenet.com">Sense/Net 6.1</a>
        </div>
      </div>
    </div>
  </div>

The Portal Remote Control must be defined in the page template too if you want to enable the end users to edit the page. Put the snpe:PortalRemoteControl control in the template at the end of the body section.

<body>
...
<snpe:PortalRemoteControl ID="RemoteControl" runat="server" Groups="/Root/IMS/Demo/Developers;/Root/IMS/BuiltIn/Portal/Administrators" />
</body>

Example/Tutorials

Related links

References