DOTCMS Page Build Best Practice

This document describe best practice when create new page / template / widget in DOTCMS. It contain 4 part of building a page: 

• Template
• Widget
  • JS 
  • CSS

1. Create Template

The purpose of this is define containers within a template (how many Row your template has? How many column of each row?....) 

Go to the site that you want to create template. 

Go to Template tab at Left Menu

Click Option Button at top right of your screen and select Add Template Designer

• Enter your new template title
• Select Theme in correct project (your current project). Theme is included header & footer & standard scripts such as GTM, Everflow....
• IF you dont want to inherit Header & Footer from the site (such as Presale & Index page), you can uncheck Header & Footer checkbox.
• There is one row has been created by default. Add more row if you want by click on "add row" 

As below screenshot, 3 more rows have been added. You can choose how many column of each row. . 

• After added rows, please add Container to each row, otherwise you cant add content/widget to that row / column. 
• Please only choose 1 container among below list of common container, within one page, 1 container can be used once: 
  • [SiteCommon]LargeColumn(100%) - 1, 
  • [SiteCommon]LargeColumn(100%) - 2, 
  • [SiteCommon]LargeColumn(100%) - 3,
  • .... 
  • [SiteCommon]LargeColumn(100%) - 20, 
  • [SiteCommon]HeadTag, (mostly this will be used in Presale & Index page since we did uncheck header & footer when create template as mentioned above) 
  • [SiteCommon]FootTag (mostly this will be used in Presale & Index page since we did uncheck header & footer when create template as mentioned above) 

• After all containers have been added, click on Save and Publish Button to Save Changes & Publish the template. 

You can take a look a demo template in Basesite2 Project → Templates → demo_template 

2.  Create Page using Template 

Step 1: 

3. Create & Add Widget 

• Go to menu Types & Tag → Content Types 

• You can see a screen of all content type & widget as below, click on Add new content type as below screenshot:

Enter required information to create widget

• Type: select Widget
• Name: Should follow this format: [Sitename] Section - Feature Name 
• Description: Put whatever you want to describe this functionality
• Site or Folder: SiteCommon
• Double check all entered information and click Save

After you have a widget, please Add field to widget by click on "add new field"

• Select field type that you need, description about each field type can be found in this document: https://dotcms.com/docs/latest/field-properties

• Enter needed information to create new field then click save. 

• Note: When create widget/content, always create field Site Or Folder to indicate Site when we add widget to site. 

Too add HTML code to this widget, we have to create new VTL file follow below steps: 

1. Create new VTL file, this VTL file shoud be create in Site Common → Widgets Folder. 
   1. 
2. Then go back to our widget properties and Edit Widget Code by click on Edit Icon as below screenshot: 
   1. 

3. Then declare new VTL file by adding below Code: 

   #dotParse("$!{sitecommon_vtlpath}/widgets/demo.vtl"),

• 
• Then Save this field. Now when you edit code in demo.vtl, new code will be reflected in demo widget. 
• More information you can find here: https://dotcms.com/docs/latest/parsing-a-vtl-file

2a. JS for widget

You have to create new JS file in local site (within site folder, you create new js file in SRC/JS/.... as below screenshot) 

Then declare this new js file in demo.vtl to load this js in html. 

2b. CSS for widget

The same for CSS, you should create css file in less folder, and declare in vtl file: