Introduction to the CDTS

What is the CDTS?

CDTS stands for Centrally Deployed Templates Solution.

A JavaScript templating solution hosted on a Content Delivery Network (CDN) that uses Google Closure Templates (GCT).


<script src="https://www.canada.ca/etc/designs/canada/cdts/gcweb/v4_0_31/cdts/compiled/soyutils.js"></script>
<script src="https://www.canada.ca/etc/designs/canada/cdts/gcweb/v4_0_31/cdts/compiled/wet-en.js"></script>

Why was the CDTS created?

  • To keep pace with the frequency of Canada.ca updates.
    • Aligned to Government of Canada (GoC) Web Renewal Initiative.
    • Aligned to Canada.ca look and feel (Information Architecture standard).
    • Includes versioning process for Web Experience Toolkit (WET) updates.

Who uses the CDTS?

  • The majority of ESDC web applications both internal and external.
  • Various GoC departments (ISED, TBS, CIHR).
  • Me!
    • Prototypes and WET examples.

CDTS and WET

WET releases

When WET releases and makes changes to the framework, the CDTS updates all the supporting files on our server so you don't have to.

  • ./js/..
  • ./css/..
  • ./fonts/..
  • ./assets/..

WET version 4.0.31 – Language toggle link

<ul class="list-inline margin-bottom-none">
	<li>
		<a href="content-fr.shtml" lang="fr">Français</a>
	</li>
</ul>

WET version 4.0.32 – Language toggle link

<ul class="list-inline margin-bottom-none">
	<li>
		<a hreflang="fr" href="content-fr.shtml" lang="fr">Français</a>
	</li>
</ul>

CDTS release cycle

We usually release two weeks after a WET release.

Canada.ca / GCWeb template

screen shot of Canada.ca page. See notes for description

Components from the top of the page controlled by the CDTS:

  • FIP
  • Search
  • Menu
  • Language
  • Breadcrumbs
screen shot of Canada.ca page. See notes for description

Components from the bottom of the page controlled by the CDTS:

  • Report a problem on this page
  • Share this page
  • Date modified
  • Footer
  • About this site list
screen shot of Canada.ca page. See notes for description

Sections of the source code controlled by the CDTS JavaScript:

  • refTop
  • top
  • preFooter
  • footer
  • refFooter

refTop

Used to control the components in the head element.

<script>
	document.write(wet.builder.refTop({
		"cdnEnv": "prod",
		"jqueryEnv" : "external",
		"webAnalytics" : [{
			"environment" : "production",
			"version" : 2
		}],
		"isApplication" : true
	}));
</script>

top

Used to control the components in the header and before the main.

<script>
	var defTop = document.getElementById("def-top");
	defTop.outerHTML = wet.builder.top({
		"cdnEnv" : "prod",
		"lngLinks" : [{
			"lang" : "fr",
			"href" : "content-fr.shtml",
			"text" : "Français"
		}],
		"breadcrumbs": [{
			"title": "Home",
			"href": "https://www.canada.ca/en/index.html"
		},{
			"title": "CDTS",
			"acronym": "Centrally Deployed Templates Solution",
			"href": "https://www.canada.ca/en/index.html"
		}],
		"showPreContent": true
	});
</script>

preFooter

Used to control the template content right above the footer.

<script>
	var defPreFooter = document.getElementById("def-preFooter");
	defPreFooter.outerHTML = wet.builder.preFooter({
		"cdnEnv": "prod",
		"dateModified": "2019-07-31",
		"showShare": [
			"email",
			"facebook",
			"linkedin",
			"twitter"
		],
		"showFeedback": "https://www.domain.gc.ca"
	});
</script>

footer

Used to control the template content in the footer.

<script>
	var defFooter = document.getElementById("def-footer");
	defFooter.outerHTML = wet.builder.footer({
		"cdnEnv": "prod",
		"contactLinks": "https://www.department.gc.ca/en/contact.html"
	});
</script>

refFooter

Used to control the template content that is placed after the footer, such as scripts and elements hidden from the user.

<script>
	document.write(wet.builder.refFooter({
		"cdnEnv": "prod",
		"webAnalytics" : true,
		"exitScript": true,
		"exitURL": "https://wwww.domain.gc.ca/out.html",
		"exitMsg": "You are about to leave a secure site, do you wish to continue?",
		"exitDomains": "https://wwwwdomain.gc.ca",
		"displayModal": false,
		"jqueryEnv": external
	}));
</script>

Other CDTS templates

GCWeb additional templates

GCWeb application templates

GCIntranet template

GCIntranet application template

Intranet custom themes

Implementation templates

  • DotNetTemplates
  • JavaTemplates

For Application Developers

Why use these?

They implement the CDTS configurations for you!

Basically, they add classes to your project that allow a developer to customize and manipulate the configurations of CDTS with the back end code, with practically no setup.

Features

  • Static Fallbacks - If CDTS goes down, you stay up!
  • Language switch built in
  • Settings configuration (web.config)
  • Programmable classes, attached though a implementable base class
  • Templates - pre-designed (Default, Left-Menu, Transactional, Application & Error)

Supported frameworks

DotNetTemplates

  • .NET Framework (4.6.1) - MVC
  • .NET Framework (4.6.1) - WebForms
  • .NET Core (2.1 & 3.0 & 3.1) - MVC

Java Templates (Java 8+)

  • Struts 2 MVC
  • Spring Boot

Built and Released with hierarchy, you can add your own sub components if we don't provide it.

Get started

Both projects are managed and supported through GCcode.

Conclusion / Future

nCDTS is:

  • Open source
  • nodeJS
  • ECMAScript 6
  • WebPack
  • babel
  • TypeScript

Resources

Contact us