Transactional Page

A transactional page is to be used under specific scenarios. Treasury Board defines this as follows:

Users are engaged in a transactional process where allowing them to navigate away from the current page would interrupt the intended flow and result in errors, loss of data or accidental termination of the session

Basically, you avoid having external links to prevent users from losing data if they was to navigate away.

Implementation

There are a few modifications required in order to make your page truly transactional. All of these changes are mandatory unless stated otherwise.

In the top section:

• Hide the search bar

defTop.outerHTML = wet.builder.top({
...
    "search": false
...
});
                

• Hide the site menu

defTop.outerHTML = wet.builder.top({
...
    "siteMenu": false
...
});
                

• Breadcrumbs need to be replaced with a link to exit the transaction that directs users to a safe point where they can abandon the current transaction and restart it should they wish.

defTop.outerHTML = wet.builder.top({
...
    "breadcrumbs": [{
        "title": "Exit secure transaction",
        "href": "https://www.canada.ca/en/index.html"
    }]
...
});
                

• Hide the content inserted into the pre-content space of your page

defTop.outerHTML = wet.builder.top({
...
    "showPreContent": false
...
});
                

In the preFooter section:

• Hide the content inserted into the post content space of your page

defPreFooter.outerHTML = wet.builder.preFooter({
...
    "showPostContent": false
...
});
                

• Hide the "Report a problem or mistake on this page" button

defPreFooter.outerHTML = wet.builder.preFooter({
...
    "showFeedback": false
...
});
                

• Hide the "Share this page" button

defPreFooter.outerHTML = wet.builder.preFooter({
...
    "showShare": false
...
});
                

In the footer section:

Note: To see all the features for the footer, please visit the footer sample page here.

• Hide the content inside the footer

    defFooter.outerHTML = wet.builder.footer({
    ...
        "showFooter": false
    ...
    });
                

• Optional: Override the 'Terms and Conditions' link and the 'Privacy' located at the bottom of the page. An optional newWindow parameter can be set to true if you would like the link to open in a new window.
• Terms and conditions link

defFooter.outerHTML = wet.builder.footer({
...
    "termsLink": {
        "href": "https://www.canada.ca/en/transparency/terms.html",
        "newWindow": true
    }
...
});
                

• Privacy link

defFooter.outerHTML = wet.builder.footer({
...
    "privacyLink": {
        "href": "https://www.canada.ca/en/transparency/privacy.html",
        "newWindow": true
    }
...
});