Centrally Deployed Templates Solution (CDTS)

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_32/cdts/compiled/soyutils.js"></script>
<script src="https://www.canada.ca/etc/designs/canada/cdts/gcweb/v4_0_32/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 release every 4 months.

v1.0.0 will be released in April.

What is version 1.0.0?

Open source on Github.com
Builds with NodeJS
CI/CD pipeline based on WET

Canada.ca / GCWeb template

GCWeb visual look at the top part of the template

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

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

Search
Application title bar
Menu
Language
Breadcrumbs

GCWeb visual look at the bottom half of the template

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

GCWeb different template parts

Sections of the source code controlled by the CDTS JavaScript:

refTop
appTop
preFooter
appFooter
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>

appTop

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

<script>
	var defTop = document.getElementById("def-top");
	defTop.outerHTML = wet.builder.appTop({
		"appName": [{
			"text": "Application name",
			"href": "./"
		}],
		"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>

Notes: preFooter

showPostContent: Used by the Principal Publisher to insert content into the post content space of your page. By default this is ALWAYS shown on all pages.
showShare: Used to specify the share button of your page. Can either be false or use an array oject to define which share options you want to add.
showFeedback: Used to specify the “Report a problem on this page” button of your page. By default this button is shown with the default Canada.ca URL. You can customize the URL or simply hide the button.
dateModified: Used to specify the date modified of your page. Could also use screenIdentifier or versionIdentifier
pagedetails: Used to remove the <div class="pagedetails"> when using the server message page template.

appFooter

Used to control the template content in the footer.

<script>
	var defFooter = document.getElementById("def-footer");
	defFooter.outerHTML = wet.builder.appFooter({
		"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>

Notes: refFooter

webAnalytics: Used to inject the Adobe Analytics code at the end of the page
exitScript: Used if you want to warn the users they are leaving a secured session.
exitURL: Specify the URL where the users will be redirected to leave their secured session.
exitMsg: Specify the message the users will get before being redirected and leaving their secured
exitDomains: Specify the additional domains that should not be checked for secure exit.
displayModal: Use this variable if you want to skip the modal dialog to confirm the exit notice. Keep in mind this will not display the exit notice to the user.
jqueryEnv: Used to specify which environment you want to pull the jQuery files from. By default they are loaded locally from the WET build. Otherwise use the following to load from Google CDN

Other CDTS templates

GCWeb additional templates

GCWeb application templates

More GCWeb examples

GCIntranet template

GCIntranet application template

Intranet custom themes

More GCIntranet examples

Conclusion / Future

nCDTS is:

Open source
nodeJS
WebPack
babel
TypeScript