Experimental approaches and reusable components

One of the goals of the Digital Playbook was to experiment with new approaches while reusing as much as possible. The goal was to be platform agnostic, focusing on HTML, CSS and JavaScript while leveraging the Web Experience Toolkit (WET) as much as possible. Where requirements exceeded what was offered through WET, the goal was to develop reusable components that could be contributed back into WET for others to use.

The following sections include examples of experimental approaches and reusable components that resulted from the work on the Digital Playbook.

• Interface components
  • Save form progress to a file
  • Restoring form progress from a file
  • Downloading data as a file or sending it through an HTTP request
  • Generating an HTML table from a multi-dimensional object
  • Add, edit and delete nested data
  • Dynamically calculating results using data in the page
  • Event triggering and handling
  • Conditional logic and resulting actions
• Content authoring and management components
  • Generating a JSON dataset from authored Markdown content
  • Generating different views using content retrieved from a dataset using the structure and tags
  • Remotely retrieving an online dataset and using it to populate a select element

Interface components

The interface components in this section are built using reusable JavaScript functions and are controlled through JSON data nested in HTML markup.

Save form progress to a file

Involved components

• handleEvent (assets-atouts/js/format-gen.js) - If triggered through an event
• outputFile (assets-atouts/js/format-gen.js)
• getFormFieldStatus (assets-atouts/js/format-gen.js) - If the form progress will be retrieved using the current state of the form fields
• retrieveData (assets-atouts/js/format-gen.js) - If the form progress will be retrieved from sessionStorage, localStorage or a data attribute

Example implementations

• Algorithmic Impact Assessment - Retrieving form progress from the current state of the form fields
• Security Categorization Tool - Retrieving form progress from sessionStorage

Restoring form progress from a file

Involved components

• handleEvent (assets-atouts/js/format-gen.js) - If triggered through an event
• inputFile (assets-atouts/js/format-gen.js)
• setFormFieldStatus (assets-atouts/js/format-gen.js) - If restoring progress directly to an HTML form
• storeData (assets-atouts/js/format-gen.js) - If restoring progress through sessionStorage or localStorage (where form state is dependent upon storage)

Example implementations

• Algorithmic Impact Assessment - Restoring progress directly through an HTML form
• Security Categorization Tool - Restoring progress through sessionStorage

Downloading data as a file or sending it through an HTTP request

Involved components

• handleEvent (assets-atouts/js/format-gen.js) - If triggered through an event
• outputFile (assets-atouts/js/format-gen.js)
• retrieveData (assets-atouts/js/format-gen.js) - If retrieving data from sessionStorage, localStorage or a data attribute
• dataToTableArray (assets-atouts/js/format-gen.js) - If converting multi-dimensional data object to CSV (prepares data for use by generateTableRows)
• generateTableRows (assets-atouts/js/format-gen.js) - If outputting stored data as CSV
• htmlToCSV (assets-atouts/js/format-gen.js) - If retrieving data directly from HTML markup and outputting as CSV
• htmlToJSON (assets-atouts/js/format-gen.js) - If retrieving data directly from HTML markup and outputting as JSON

Example implementations

• Algorithmic Impact Assessment - Retrieving data directly from HTML markup and downloading it as a CSV file
• Security Categorization Tool - Retrieving a multi-dimensional data object from sessionStorage and downloading it as a CSV file

Generating an HTML table from a multi-dimensional object

Involved components

• handleEvent (assets-atouts/js/format-gen.js) - If triggered through an event
• inputStorage (assets-atouts/js/format-gen.js)
• retrieveData (assets-atouts/js/format-gen.js)
• dataToTableArray (assets-atouts/js/format-gen.js)
• findData (assets-atouts/js/format-gen.js)
• flattenArray (assets-atouts/js/format-gen.js)
• filterArray (assets-atouts/js/format-gen.js)
• getNestedArrayElementCounts (assets-atouts/js/format-gen.js)
• generateTableRows (assets-atouts/js/format-gen.js)

Example implementations

• Security Categorization Tool - Detailed Report section shows output of all data while Summary Report section shows output of specific parts of the data, including filtering.

Add, edit and delete nested data

Involved components

• handleEvent (assets-atouts/js/format-gen.js) - If triggered through an event
• outputStorage (assets-atouts/js/format-gen.js)
• retrieveData (assets-atouts/js/format-gen.js)
• retrieveValue (assets-atouts/js/format-gen.js)
• findData (assets-atouts/js/format-gen.js)
• storeData (assets-atouts/js/format-gen.js)

Example implementations

• Security Categorization Tool - Adding, saving, editing and deleting items.

Dynamically calculating results using data in the page

Involved components

• handleEvent (assets-atouts/js/calcul.js) - If triggered through an event
• iterate (assets-atouts/js/calcul.js)
• calculate (assets-atouts/js/calcul.js)

Example implementations

• Algorithmic Impact Assessment - Caculating the % of questionnaire completed, the score and % for each criteria as well as the resulting impact level.
• Is Agile Right for My Project? - Calculating the % of questionnaire completed, the agile, hybrid score and non-agile scores as well as the final recommendation.
• Right Cloud Decision Tool - Calculating the % of questionnaire completed as well as the public, private and non-coloud scores.

Event triggering and handling

Involved components

• handleEvent (assets-atouts/js/format-gen.js, assets-atouts/js/calcul.js)
• calculate (assets-atouts/js/calcul.js) - For triggering events

Example implementations

• Algorithmic Impact Assessment - Managing the order of updates to the the intial results and final result sections, updating the quesionnaire completed, navigating between form sections, showing/hiding questions and handling other changes to the form.
• Security Categorization Tool - Navigating between form sections, handling add, remove, edit and delete functionality, updating the detailed and summary reports as well as handling save, restore and download functionality.

Conditional logic and resulting actions

Involved components

• handleEvent (assets-atouts/js/calcul.js) - If triggered through an event
• calculate (assets-atouts/js/calcul.js)

Example implementations

• Algorithmic Impact Assessment - Showing/hiding questions through checkbox changes, determining the impact level, controlling the query string of the filtered link to the Directive on Automated Decision Making.
• Is Agile Right for My Project? - Determing the final recommendation.
• Right Cloud Decision Tool - Determining whether mandatory requirements were met and displaying the result.
• Security Categorization Tool - Enabling/disabling interface buttons and controlling the results of button clicks and showing/hinding current location links.

Content authoring and management components

The content authoring and management components in this section are implemented using Jekyll, Liquid and Ruby but could be ported to any other server-side scripting language.

Generating a JSON dataset from authored Markdown content

Involved components

• convert-to-data-set.rb
• en/*.md and /fr/*.md (both Front Matter and content)
• Select content retrieved from:
  • views-vues/automated-decision-automatise/en/automated-decision.md
  • views-vues/automated-decision-automatise/fr/decision-automatise.md
  • views-vues/gc-earb-ceai/gc-earb.md
  • views-vues/gc-earb-ceai/ceai-gc.md

Example implementations

• _data/guide.json - Generated from /fr/*.md
• _data/playbook.json - Generated from /en/*.md

Generating different views using content retrieved from a dataset using the structure and tags

Involved components

• _data/guide.json - French
• _data/playbook.json - English
• _includes/functions/class-from-tags.html
• _includes/functions/filtered-standard-guideline-content.html
• _includes/functions/find-array-match.html
• _includes/functions/find-relevant-content.html
• _includes/functions/find-relevant-standards-guidelines.html
• _includes/functions/generate-id.html
• _includes/functions/guideline-links.html
• _includes/functions/output-content-array.html
• _includes/functions/output-content-details.html
• _includes/functions/output-guidelne.html
• _includes/functions/output-section-content.html
• _includes/functions/output-section-heading.html
• _includes/functions/output-sections.html
• _includes/functions/output-standard.html
• _includes/functions/page-title.html
• _includes/functions/retrieve-data.html
• _includes/functions/standard-links.html
• _includes/functions/store-data.html

Example implementations

• 1. Design with users
• Digital Standards - Single page view
• Development stages

Remotely retrieving an online dataset and using it to populate a select element

Involved components

• import-department-name.rb
• departments.json - Generated by import-department-name.rb

Example implementations

• Algorithmic Impact Assessment - Department select (question 3)

• Give feedback about this page
• View content source on GitHub
• View template source on GitHub
• Show filters