Referencing JS/CSS and Image Files

You can use static resources in your Viewport templates. Before using CSS and Javascript libraries, you have to include them in the <head> section of your Velocity template. To do so, you can use the '$theme.baseUrl' variable, which will be automatically resolved to the path of your template directory when the page is loaded. How to upload the files is covered in the getting started guide.

Using static resources

HTML/XML

<head>
   	<link href="${theme.baseUrl}/css/main.css" rel="stylesheet" media="all" type="text/css">
   	<script src="${theme.baseUrl}/js/jquery.min.js"></script>
   	<script src="${theme.baseUrl}/js/custom.js"></script>
    <link rel="shortcut icon" href="${theme.baseUrl}/favicon.png">
</head>

Images can be referenced and used as follows anywhere in your <body>:

Using images

HTML/XML

<img src="${theme.baseUrl}/images/image.png" />

Embedding external scripts

Using external scripts, styles and other files works just as well. In this case, you need to omit the baseUrl:

Example for jQuery:

XML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

CDN stands for Content Delivery Network. They help you let your users download a library like jQuery way faster, by providing the file from a server close to them. If you do not want to depend on external resources, you can always download the file yourself and put it online on your own viewport.

Order of includes

If you use jQuery plugins, it is important to reference jQuery before you include further plugins.

It is recommended to put styles at the top of the source code (within the <head> element) and scripts at the end (within the <body>) of the source. If you have many scripts and styles, this helps improve page performance.

Using Confluence Macros and components

Sometimes, a macro requires an extra script to work. Most of the macros work by implementing $page.resources in your template within the <head> element:

CODE

<head>
    $page.resources.js
    $page.resources.css
</head>

While most features will work with these two lines, additional resources have to be implemented for advanced Confluence features like dialogs.

How to see what resources you need

On each of the documented pages of the components, you can see whether it is already included in the AUI Core. (With the code snippet above, you include the AUI Core)

For these that are not in the AUI Core, you have to include them with their Web resource key:

CODE

<head>
	$page.resources.require('com.atlassian.auiplugin:dialog2')
    $page.resources.require('com.atlassian.auiplugin:aui-progress-indicator')
</head>