Templating - an introduction
This introductory article covers most front end development techniques as they work in Dynamicweb, e.g. working with custom designs, layouts and templates, using Razor to work with logic (If/Else, For, switch statements), and controlling which and where content should be rendered.
Dynamicweb is a very implementer-friendly system:
- All new installations of Dynamicweb are created with a default design – and with example templates for all parts of the system.
- Going from static mockup to dynamic design (i.e. making content created in the Dynamicweb backend appear in frontend) takes only a few minutes
- You have access to the full power of ASP.NET Razor from within Dynamicweb, making it easy to e.g.
- Loop through content
- Use if statements and other conditional expressions
- Features an extensive TemplateTag system to retrieve all sorts of dynamic information from the backend and use it in frontend
Here’s a very general overview to get you started with design and implementation in Dynamicweb – and links to places where you can learn more.
Designs & Layouts
A layout is a dynamic HTML file containing the full page markup which makes up an entire webpage layout.
A design is a collection of layouts, e.g.:
Each layout is made dynamic by adding Dynamicweb-classes – dwcontent and dwnavigation – and an ID and a title to the relevant markup elements – which then retrieve their content from the paragraphs created in the backend under the content placeholder with the name matching the title (Figure 2.1), or from e.g. items published in the template using Razor-loops and tags.
A layout is a kind of template – but they’re far from the only templates in Dynamicweb.
Read more about deploying a design and making it dynamic in the Designs & Layouts article.
Dynamicweb makes extensive use of templates – for layout, paragraph, and module output and styling.
All templates are located in the /Files/Templates folder – both the templates you create, and the templates created by us or your Dynamicweb partners:
- Layout templates are located in Files/Templates/Designs/MyDesign
- Paragraph templates may be available across all designs – Files/Templates/Designs/Paragraph – or may be tied to a particular design or layout – Files/Templates/Designs/MyDesign/Paragraph or Files/Templates/Designs/MyDesign/Index/Paragraph.
- Module templates are located in Files/Templates/ModuleName by default, but like paragraph templates may be associated with a particular design or layout template.
You can access (and edit) layout and paragraph templates from the file manager – or from:
- The layout tab in page properties
- The layout dropdown when editing a paragraph
- Using one of the template selectors (Figure 3.1) available when configuring a module
You can also edit templates in Visual Studio - or another developing environment of your choice.
Template Tags & Loops
To make template content dynamic, you can use template tags to output data from Dynamicweb – and loops to loop through data, like products, variants, countries, etc.
Dynamicweb template tags come in two flavors – HTML-tags and Razor-tags.
We recommend you use Razor-tags, as ASP.NET Razor provides you with a lot more options than HTML. HTML tags in Dynamicweb have very limited scripting capabilities and require .NET based add-ins to do more advanced rendering logic, whereas Razor based templates can use all of the Dynamicweb and .NET APIs.
To use a Razor-tag, use a Get*-method in combination with a tag name – and a @ if starting a new code block:
These Get-methods return safe values – meaning i.e. GetInteger will ALWAYS return a valid integer. If the passed tag name does not exist or is not an integer, it will return 0.
To use an HTML tag, use the <!--@TagName--> format.
You can search for, read about and see examples of all out template tags and loops in the template tag documentation.
For performance reasons, not all tags are available in all template contexts.
However, you can use the Dynamicweb helper tags to get a list of the template tags and loops available in the template you’re currently working in.
You’re going to do that a lot, trust me!
The helper tags are:
- @TemplateTags() in Razor
- <!--@DwTemplateTags--> in HTML
If using Razor (which we recommend), you can limit the tag-output by using a string inside the parentheses: @TemplateTags(“price”) will find only tags with the string ‘price’ in them.
In addition to tags, Dynamicweb contains a number of loops which allow you to, well, loop through data – items, products, variants, images and so forth.
To use a loop, you use a method called GetLoop(), as in:
Then, to get the value of a loop item, use the GetValue() method inside the loop:
And to round things off, you can use the TemplateTags() helper tag inside a loop to return a list of template tags and loops available for a loop item:
A loop in HTML begins with LoopStart(loop name) and ends with LoopEnd(loop name).
Conditional statements are available in Dynamicweb templates, either as a Dynamicweb specific syntax (HTML conditionals) or as regular .NET syntax (C# or VB), for full programming capabilities in templates.
You can therefore use IF and IF…ELSE in all Dynamicweb templates to make conditional statements.
The following operators are supported in conditional statements:
Syntax for Razor conditionals
This is a basic example of the syntax for conditionals in Razor:
Don't forget to use a Get*-method and testvalue appropriate to the data type returned by the template tag.
Syntax for HTML conditionals
This is the syntax for HTML conditionals:
Download, deploy and apply a design
To get you started, why not download our newDesign training design and play around with that for a while?
To deploy and apply a design;
- Upload the design files to the Files/Templates/Designs folder
- Right click on your website in the content tree and click edit (Figure 11.1) to open the website settings
- Go the layout tab, click the Layout dropdown menu (Figure 11.2) and select the layout file you want to use as the default layout - if using newDesign, only index.html exists
Please note: newDesign is already “hooked up” to the Dynamicweb backend using the content placeholder classes dwnavigation and dwcontent.
If you want to play with another design, see the Designs & Layouts documentation to learn how to make your static design dynamic.