Fork me on GitHub
2sxc 8.9 for DNN 7 to 9
Website Builder, Content Manager, App-System: free and amazing - done your way
You are here: Home  >  Learn  >  Token Templates and Views

Create Templates and Views using Tokens

Tokens are a simple, safe (meaning no-code on the server) way to design your output. You work with trivial placeholders like [Content:Title] within your HTML, and that's it :). 

Download Tutorial App and view Demo

We believe that playing with real examples is the best way to learn - so we prepared an extensive App for you containing all sample codes. 

Download that app here - you will find many examples from trivial to advanced. 

The App itself is installed here so you can see the output - but to learn it you should install the demos. 

Token Basics

You can simply mix your HTML with placeholders - all looking like [Source:Property]. Some common sources are:

  1. App - containing important paths like [App:Path]
    1. App:Settings - contains settings this app has
    2. App:Resources - contains resources (usually multi-lingual text fragments like "Thank you")
  2. Content - containing the content-item to be show like [Content:Title]
    1. Content:Presentation - contains output design settings (if enabled in the template)
  3. ListContent - this is the list-header-item if you enable lists - so this one stays the same across the entire template, while you would normally repeat across the Content-Item
    1. ListContent:Presentation - contains the design settings which apply to the entire list
  4. Tab - containing things like [Tab:FullUrl] 
  5. Module - everything about the current Module
  6. Portal - Infos about the current site
  7. DateTime - only has "Now" as a property, to show current date/time
  8. QueryString - stuff from the URL
  9. User Information
    1. User - user login infos like User:DisplayName
    2. Profile - user profile like User:Birthday (if known)
    3. Membership - info about the login, like Membership:Approved
  10. and 2-3 more. A full list of all sources and properties can be found here

Content - your most important Token

The Content-Token has all the properties you had configured in your Content-Item. So if your content-item has the following properties

  1. Title
  2. Description
  3. Image

Then you'll have the following tokens:

<div>
    <h1>[Content:Title]</h1>
    <img src="[Content:Image]">
    <div>[Content:Description]</div>
</div>

Content:Presentation for Design-Configuration

If you template has a Presentation-item configured (see feature Separate Presentation Settings from real Content) then it means that your content-item can have special design-rules to display it here. 

To understand the example, let's assume you have simple content, and sometimes the title should be blue, magenta or green. This information doesn't really go with the simple-content, because if you re-use this content elsewhere, it may need other presentation-settings there. So in this example, your Presentation-Item has the following fields:

  • Color

The token would then be

    [Content:Presentation:Color]

And a simple use case would be (see also in the Demo-App the simple example with Presentation)

 
<h3 style="color: [Content:Presentation:Color]">[Content:Title]</h3>

Sub-Properties of related Content

If a content item has related content - for example a Product in which you can configure the Supplier (which is an item from another list). Then you can show information about the supplier (the sub-property) using the same syntax, as follows

 
[Content:Supplier:Name]
[Content:Supplier:Address]

Note that this only works for the first item in a related-items drop-down. So if you had a product with many Tags, then [Content:Tag:Name] would only show the name of the first tag. If you want to work with multiple sub-properties (like show a list of tags) you'll have to use Razor. 

Formating Dates, Numbers, etc.

Inside a Token you can specifiy more formatting specs, like

[...|format]

So you could use [Content:Title|Title: {0}]. This doesn't make much sense - but for numbers, dates etc. it's very helpful. Just research .net formatting strings to find out date-formats and similar. 

Text example 

[Content:Title|This text is before the title, and now comes the title: {0}]

this will only show hello if the user-name is known
[User:DisplayName|Hello {0}]
this example shows a welcome-back xyz or hello-guest
[User:Displayname|Welcome Back,{0}|Hello Guest]

For more on string-formatting read the full documentation of MSDN

Standard Date Examples 

Short Date in current culture: [Book:Published|d]
Long time in current culture: [Book:Published|T]

For more on date-formatting read the full documentation at MSDN.

Custom Date Examples 

1999-01-01: [Company:Birthday|yyyy-MM-dd] 
Weekday in user language: [DateTime:Now|dddd]
Month in user language: [DateTime:Now|MMMMM]
Short Month: [DateTime:Now|MMMM]

For more on special date-formatting read the full documentation at MSDN.

Standard Number Examples

$3,741.00 [Book:Price|C]
3741.000 [Book:Price|F3]
92.28 % [Book:Rating|P] 

For more on normal number formatting read the MSDN documentation.

Custom Number Formating Examples

3741 [Book:Price|#####.##]
03741.00 [Book:Price|00000.00]
3,741.00 [Book:Price|#,###,###.00] 

For more on custom number formatting read the MSDN documentation.

Showing a list of Content-Items

If your view/template receives a list of items, then these are found in Data:Default or in advanced cases in Data:YourNameHere. To loop through these, check out the example in the Demo App, which does the following:

 
<ol>
  <repeat repeat="Feedback in Data:Default">
  <li class="sc-element">
    <strong>[Feedback:Subject]</strong>: 
    [Feedback:Message] 
    - Category: [Feedback:Category:Title] ([Feedback:Category:EntityId])
    [Feedback:Toolbar]
    </li>
  </repeat>
</ol>

Note that the repeat="Feedback in Data:Default" means that within the loop you'll find a token called [Feedback:...] which contains the item currently shown in the loop. 

Toolbars

Content-Items offer a toolbar - the exact details you can find in Menus / Toolbars inline and hovering

  • use like this if not using lists / repeaters: [Content:Toolbar]

and when using lists

 
<repeat repeat="Feedback in Data:Default">
  <li class="sc-element">[Feedback:Title] [Feedback:Toolbar]</li>
</repeat>

Notes

  • depending on where the content-items come from, the toolbar will adjust automatically and show/hide certain buttons. 
  • if you have a toolbar inside a html-tag with class="sc-element" then the toolbar will auto-float. Otherwise it's inline. 

Repeater-Helpers to number the output or change colors

Whenever you have a <repeat repeat="XXX in Data:StreamName> ... </repeat> tag then within that tag the [XXX:] token is extended with a Repeater property - on which you find helpers to number your list or do alternate row-colorings. You would use it like this:

 

<repeat repeat="Feedback in Data:Default">
  [Feedback:Repeater:Index] [Feedback:Subject]
</repeat>

Here the full list of properties on the repeater: 

  • [XXX:Repeater:Count] - the total amount of items in the list, for things like "this is number ... in [XXX:Repeater:Count]"
  • [XXX:Repeater:Index] - shows Zero-based numbering like 0, 1, 2, 3, 4, 5, 6, etc.
  • [XXX:Repeater:Index1] - shows One-based numbering like 1, 2, 3, 4, 5, 6, 7, etc.
  • [XXX:Repeater:Alternator2] - shows 0, 1, 0, 1, 0, 1 for things like alternating row-colors class="row-color-[Content:Repeater:Alternator2]"
  • [XXX:Repeater:Alternator3] - shows 0, 1, 2, 0, 1, 2 - for 3-step alternation
  • [XXX:Repeater:Alternator4] - shows 0, 1, 2, 3, 0, 1, 2 - for 4-step alternation
  • [XXX:Repeater:Alternator5] - shows 0, 1, 2, 3, 4, 0, 1, 2 - for 5-step alternation
  • [XXX:Repeater:IsFirst] - shows "First" on the first item - for things like class="special-[Feedback:Repeater:IsFirst]"
  • [XXX:Repeater:IsLast] - shows "Last" on the last item - for things like class="Is[Feedback:Repeater:IsLast]"

Repeating through Multiple Lists

When a template has multiple in-streams (use the visual query designer to achieve that) you can repeat over all of them separately. So let's assume you have 2 streams

  1. Categories
  2. Items

This is how you would repeat across the categories first (to link to sub-pages) and then through the items (the ones which were returned by the query, filtered by this category):

 

<ol>
  <repeat repeat="Category in Data:Categories">
  <li class="sc-element">
    <a href="Category/[Category:Name]">[Category:Name]</a> 
    </li>
  </repeat>
</ol>

<ol>
  <repeat repeat="Item in Data:Items">
  <li class="sc-element">
    <div><strong>[Item:Subject]</strong></div>
    <div>[Item:Body]</div> 
    </li>
  </repeat>
</ol>

Repeating / Looping through sub-properties

Sometimes you have a list of related content-items - like a list or assigned Tags. A common wish is to output these nicely - which requires looping through these. 

This is currently not possible yet. To do this, please use Razor or JavaScript. 

Fallback Values if Token is Empty

If a token is empty you can always show something else, like

  [Content:Title||Title not found]

Write your fallback-value after two pipe-signs ||

Token Stacking

Tokens can be written inside other tokens - which is especially useful when handling empty results. 

Say you want to do the following:

  1. Show the author of the current content
  2. ...but if the author is not defined, show a message which is stored in the App-Resources (in many languages)

Do it like this:

[Content:Author:FirstName||[App:Resources:AuthorNotFound]]

You can also stack multiple ones, like this

[Book:Price||[App:Resource:PriceUnknown||???]]

Special Content-Item Properties

Content-Items have a few system-properties which may be helpful. They are:

  1. EntityId (the internal ID of the data) - use like [Feedback:EntityId]
  2. EntityTitle (the field of the entity, which is marked as the title) - use like [Content:EntityTitle]
  3. Modified
  4. IsDraft
  5. IsPublished

File Paths in Tokens (Images, JavaScripts etc.)

In general you'll have files from 2 places

  1. Edited Content usually links images / pdfs
  2. App-resources like JavaScripts or CSS files

User edited content basically takes care of itself, so a reference to File:72 is automatically resolved. 

When you want to use a path to a App-specific resource, use the [App:Path]/assets/xyz.js syntax (more here). Remember to also add enable Bundling/Minification if you want to.

Conditions in Tokens (IF, IF-ELSE, SWITCH, CASE)

This is currently not possible with tokens. The reason is that a simple <if> tag would be easy to implement, but creating the rules engine allowing for various kinds of comparisons (like comparing dates with strings, if-x-and-y etc. is very complex - and at some point would introduce new security issues. So for the moment you will need to use JavaScript or Razor to do conditional statements. 

Including Other Token Files (Partial Templates)

Sometimes people express a wish to place parts of a template in a separate file for re-use. This is currently not possible with Tokens - please use Razor if this is important to you. 

Older Training Videos

[Token] Lists

Learn how to create your first, very simple list using Tokens. Explains the and typical beginners mistakes.
See results here.

Create Token Lists

The demo-output and code can be found here or get App.

Create a Token-list with a Lightbox

Whenever you add interactive things like sliding areas, lightboxes or similar things, you need to learn a new trick.
See results here.

Create a Token-list with a Lightbox

The demo-output and code can be found here or get App.

Leverage List-Information [ListContent]

Use the [ListContent] - the header item - to create configurable lists and add intro messages.
See results here.

Leverage List-Information [ListContent]

The demo-output and code can be found here or get App.

Adding numbers and alternate styles

Simple tokens let you add numbering, alternate colors, first/last item, and 3-5 items side-by-side.
See results here.

Adding numbers and alternate styles

Very simple tokens allow you to add numbering, alternate row colors and even complex logic like first-item, last-item and 3-5 items side-by-side. The demo-output and code can be found here or get App.
2serve . 2invent . 2create is 2be.