Skip to main content
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: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>

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 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

Leverage List-Information [ListContent]

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

See results here

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