Index.ftl structure

Canvas is a single page application SPA. Each Canvas application has a single web page which swaps and loads its different contents, depending on what the user click. All HTML pages are loaded in the container (blue). A single page (red) is loaded, that is why you see a “#” between the URL and the HTML path:

The red area is defined by the index.ftl file and the blue area is your HTML page. The index.ftl file is used to update everything that you find in the red area such as logo, headers, menu and homepage.

Prior v1.2, to update the logo or add a custom library you had to update the index.ftl in the following folder:

• C:CWASwebapps<application name>WEB-INFpages

We moved the index.ftl to the following new folder:

• C:CWASwebapps< application name>WEB-INFpagessystem

So updating you logo is now done through the navigation.logo.ftl file.

Important: If you upgrade your existing Canvas application to Canvas v1.2. You will have to migrate all changes you made from your index.ftl (WEB-INFpages) into the different new ftl files (WEB-INFpages). The index.ftl file which is used by the Canvas application is in WEB-INFpagessystem.

We did this in order to split the index.ftl file between the area you can update and the area you should not update. Starting with v1.2, the WEB-INFpagessystemindex.ftl file should not be updated anymore. The area you can update is now separated into different files that you can find in WEB-INFpages. The new index.ftl will include these new customizable ftl file during application load.

There are now 9 ftl files:

• header.library.ftl: To add links to your custom libraries.
•  header.script.init.ftl: For configuring your SSO and adding your angular modules.
• header.script.others.ftl: Configure your accounting.js settings and other initializations.
•  navigation.body.custom.ftl: Make your own navigation body.
• navigation.logo.ftl: Update the logo.
• navigation.top.left.ftl: For adding items into the top left navigation bar.
•  navigation.top.right.ftl: For adding items into the top right navigation bar.
• page.footer.ftl: Add your custom page footer.
• page.header.ftl: Add your custom page header.

The contents of these files get inserted into the index.ftl file when your Canvas application loads. Should you want to know more about the expected content of each FTL file, you can check out the index.ftl file to see where these files will be inserted and what HTML elements are near it.