In PocketQuery, you have full control over how your data should be presented. After your data is fetched from your Datasource, and processed by a Converter, it is piped into a Template. The Template is responsible to render your data into HTML which can then be displayed in a Confluence page. So, let’s go ahead and create one.

Similarly to Converters, Templates are code snippets written in the Velocity Templating Language (VTL). VTL comes with some powerful features such as loops, conditionals, and variables. You can see the code that we are going to use for this Template below. Notice how in line 14 we are rendering an <img /> tag instead of just the plain value of the Flag column. This is the line responsible for displaying actual flags instead of just the links.

#set($tableRows = $PQ.toList($result))
#set($tableHeaders = $tableRows.get(0).keySet())
<table class="aui">
  <thead>
    <tr>
      #foreach ($header in $tableHeaders)
        <th>$!header</th>
      #end
    </tr>
  </thead>
  <tbody>
    #foreach ($row in $tableRows)
      <tr>
	  	<td><img src="$row.Flag" height="20" /></td>
		<td>$row.Name</td>
		<td>$row.Code</td>
		<td>$row.Capital</td>
		<td>$row.Population</td>
      </tr>
    #end
  </tbody>
</table>
CODE

Paste the code into the editor and create your Template. Just like with our Converter, we then need to tell our Query to use this Template.

Update your Query, return to your page, and see for yourself:

Wow! Flags everywhere! As you can see, you can render arbitrary HTML with PocketQuery, which means in Templates you can do just about everything that you can do on a normal website! πŸš€

And what do the coolest websites all have in common? Exactly, charts! So, flags are nice and all, but if you want to learn how you can use PocketQuery to present your external data as charts inside Confluence pages, you just need to read the last part of our getting started guide!

Continue with β€œVisualizing your PocketQuery results with chartsβ€œ