Sample Page Code

Introduction

Having a sample page for an App, specifically when it provides page macros, is a very useful thing. It gives you a quick way to check on the App’s functionality when you get Incident reports about it from your users or after you upgraded your Confluence version.

This page describes a quick and easy way to create such a page and provides the complete code for it.

Requirement

In order to us this code you need the free “Confluence Source Editor” plugin from Atlassian installed on your site. You can find it here:

https://marketplace.atlassian.com/apps/1210722/confluence-source-editor?hosting=server&tab=overview

It will add a little button to the page editor menu bar (top right) that allows you to directly edit the page’s source code.

Steps to create the sample page

1. Create a new page. Give it a title and save it (the Confluence Source Editor only works on existing/saved pages)

2. Add the sample image (see below) as an attachment to the page.

3. Edit the page again

4. Click the Confluence Source Editor button. A new editor window will open on top.

5. Paste the sample code (see below). Tip: Expand the code and double-click in it. That will select all the code to copy to your clipboard.

6. Apply the source code editor

7. Save the page

Sample Code

<ac:layout>
  <ac:layout-section ac:type="two_equal">
    <ac:layout-cell>
      <h1 class="auto-cursor-target">Bar Chart</h1>
      <ac:structured-macro ac:macro-id="14fa8a6b-83a6-4dec-bfb6-07958e558fe7" ac:name="chartjs-bar-chart" ac:schema-version="1">
        <ac:parameter ac:name="FillLineArea">true</ac:parameter>
        <ac:parameter ac:name="LegendPosition">bottom</ac:parameter>
        <ac:rich-text-body>
          <p class="auto-cursor-target">
            <br/>
          </p>
          <table class="wrapped">
            <colgroup> <col/> <col/> <col/> <col/> <col/> <col/> <col/> <col/> </colgroup>
            <tbody>
              <tr>
                <th>Series</th>
                <th colspan="1">Type</th>
                <th colspan="1">Color</th>
                <th>Apples</th>
                <th>Oranges</th>
                <th colspan="1">Bananas</th>
                <th colspan="1">Mangos</th>
                <th colspan="1">Grapes</th>
              </tr>
              <tr>
                <td>Maximum</td>
                <td colspan="1">bar</td>
                <td colspan="1">red</td>
                <td>19</td>
                <td>29</td>
                <td colspan="1">40</td>
                <td colspan="1">34</td>
                <td colspan="1">24</td>
              </tr>
              <tr>
                <td>Minimum</td>
                <td colspan="1">line</td>
                <td colspan="1">blue</td>
                <td>10</td>
                <td>12</td>
                <td colspan="1">20</td>
                <td colspan="1">14</td>
                <td colspan="1">4</td>
              </tr>
            </tbody>
          </table>
          <p class="auto-cursor-target">
            <br/>
          </p>
        </ac:rich-text-body>
      </ac:structured-macro>
      <p class="auto-cursor-target">
        <br/>
      </p>
      <ac:structured-macro ac:macro-id="d132dbde-b795-4409-a80d-7959556a0e3f" ac:name="chartjs-bar-chart" ac:schema-version="1">
        <ac:parameter ac:name="LegendPosition">bottom</ac:parameter>
        <ac:parameter ac:name="Id">MyBarChartStacked</ac:parameter>
        <ac:parameter ac:name="StackBars">true</ac:parameter>
        <ac:rich-text-body>
          <p class="auto-cursor-target">
            <br/>
          </p>
          <table class="wrapped">
            <colgroup> <col/> <col/> <col/> <col/> <col/> <col/> <col/> <col/> </colgroup>
            <tbody>
              <tr>
                <th>Series</th>
                <th colspan="1">Type</th>
                <th colspan="1">Color</th>
                <th>Apples</th>
                <th>Oranges</th>
                <th colspan="1">Bananas</th>
                <th colspan="1">Mangos</th>
                <th colspan="1">Grapes</th>
              </tr>
              <tr>
                <td>Maximum</td>
                <td colspan="1">bar</td>
                <td colspan="1">red</td>
                <td>19</td>
                <td>29</td>
                <td colspan="1">42</td>
                <td colspan="1">34</td>
                <td colspan="1">24</td>
              </tr>
              <tr>
                <td colspan="1">Medium</td>
                <td colspan="1">bar</td>
                <td colspan="1">green</td>
                <td colspan="1">10</td>
                <td colspan="1">12</td>
                <td colspan="1">20</td>
                <td colspan="1">14</td>
                <td colspan="1">95</td>
              </tr>
              <tr>
                <td>Minimum</td>
                <td colspan="1">bar</td>
                <td colspan="1">blue</td>
                <td>3</td>
                <td>4</td>
                <td colspan="1">9</td>
                <td colspan="1">7</td>
                <td colspan="1">3</td>
              </tr>
            </tbody>
          </table>
          <p class="auto-cursor-target">
            <br/>
          </p>
        </ac:rich-text-body>
      </ac:structured-macro>
      <p class="auto-cursor-target">
        <br/>
      </p>
    </ac:layout-cell>
    <ac:layout-cell>
      <h1>Bubble Chart</h1>
      <ac:structured-macro ac:macro-id="26b968b6-461f-4125-83c9-0743ab8ced4f" ac:name="chartjs-bubble-chart" ac:schema-version="1">
        <ac:parameter ac:name="LegendPosition">left</ac:parameter>
        <ac:rich-text-body>
          <p class="auto-cursor-target">
            <br/>
          </p>
          <table class="wrapped">
            <colgroup> <col/> <col/> <col/> <col/> <col/> </colgroup>
            <tbody>
              <tr>
                <th>Series</th>
                <th>x</th>
                <th>y</th>
                <th>r</th>
                <th colspan="1">Color</th>
              </tr>
              <tr>
                <td colspan="1">2016</td>
                <td colspan="1">-23</td>
                <td colspan="1">-19</td>
                <td colspan="1">12</td>
                <td colspan="1">maroon</td>
              </tr>
              <tr>
                <td colspan="1">2016</td>
                <td colspan="1">-17</td>
                <td colspan="1">-4</td>
                <td colspan="1">16</td>
                <td colspan="1">maroon</td>
              </tr>
              <tr>
                <td colspan="1">2016</td>
                <td colspan="1">13</td>
                <td colspan="1">-13</td>
                <td colspan="1">13</td>
                <td colspan="1">maroon</td>
              </tr>
              <tr>
                <td colspan="1">2016</td>
                <td colspan="1">-16</td>
                <td colspan="1">16</td>
                <td colspan="1">16</td>
                <td colspan="1">maroon</td>
              </tr>
              <tr>
                <td>2017</td>
                <td>12</td>
                <td>-4</td>
                <td>11</td>
                <td colspan="1">blue</td>
              </tr>
              <tr>
                <td>2017</td>
                <td>-6</td>
                <td>19</td>
                <td>13</td>
                <td colspan="1">blue</td>
              </tr>
              <tr>
                <td>2017</td>
                <td>23</td>
                <td>12</td>
                <td>16</td>
                <td colspan="1">blue</td>
              </tr>
              <tr>
                <td>2017</td>
                <td>34</td>
                <td>14</td>
                <td>22</td>
                <td colspan="1">blue</td>
              </tr>
              <tr>
                <td>2018</td>
                <td>-11</td>
                <td>7</td>
                <td>9</td>
                <td colspan="1">olive</td>
              </tr>
              <tr>
                <td>2018</td>
                <td>9</td>
                <td>8</td>
                <td>10</td>
                <td colspan="1">olive</td>
              </tr>
              <tr>
                <td>2018</td>
                <td>11</td>
                <td>-11</td>
                <td>11</td>
                <td colspan="1">olive</td>
              </tr>
              <tr>
                <td>2018</td>
                <td>16</td>
                <td>12</td>
                <td>13</td>
                <td colspan="1">olive</td>
              </tr>
              <tr>
                <td>2019</td>
                <td>6</td>
                <td>23</td>
                <td>17</td>
                <td colspan="1">teal</td>
              </tr>
              <tr>
                <td>2019</td>
                <td>-12</td>
                <td>-23</td>
                <td>6</td>
                <td colspan="1">teal</td>
              </tr>
              <tr>
                <td>2019</td>
                <td>-4</td>
                <td>-21</td>
                <td>12</td>
                <td colspan="1">teal</td>
              </tr>
              <tr>
                <td>2019</td>
                <td>-22</td>
                <td>17</td>
                <td>14</td>
                <td colspan="1">teal</td>
              </tr>
            </tbody>
          </table>
          <p class="auto-cursor-target">
            <br/>
          </p>
        </ac:rich-text-body>
      </ac:structured-macro>
      <p class="auto-cursor-target">
        <br/>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <p>
        <br/>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="two_equal">
    <ac:layout-cell>
      <h1>Doughnut Chart</h1>
      <ac:structured-macro ac:macro-id="a2c1f4ae-43bc-4d12-8286-22c72890cca3" ac:name="chartjs-pie-doughnut-chart" ac:schema-version="1">
        <ac:parameter ac:name="ShowAsDoughnut">true</ac:parameter>
        <ac:parameter ac:name="ChartTitle">My Chart.js Doughnut Chart</ac:parameter>
        <ac:parameter ac:name="Id">MyDoughnutChart</ac:parameter>
        <ac:rich-text-body>
          <p class="auto-cursor-target">
            <br/>
          </p>
          <table class="wrapped">
            <colgroup> <col/> <col/> <col/> <col/> <col/> <col/> </colgroup>
            <tbody>
              <tr>
                <th>Series</th>
                <th>Apples</th>
                <th>Oranges</th>
                <th colspan="1">Bananas</th>
                <th colspan="1">Mangos</th>
                <th colspan="1">Grapes</th>
              </tr>
              <tr>
                <td colspan="1">Color</td>
                <td colspan="1">forestgreen</td>
                <td colspan="1">orange</td>
                <td colspan="1">darksalmon</td>
                <td colspan="1">dodgerblue</td>
                <td colspan="1">firebrick</td>
              </tr>
              <tr>
                <td>Maximum</td>
                <td>19</td>
                <td>29</td>
                <td colspan="1">40</td>
                <td colspan="1">34</td>
                <td colspan="1">24</td>
              </tr>
              <tr>
                <td>Minimum</td>
                <td>10</td>
                <td>12</td>
                <td colspan="1">20</td>
                <td colspan="1">14</td>
                <td colspan="1">4</td>
              </tr>
            </tbody>
          </table>
          <p class="auto-cursor-target">
            <br/>
          </p>
        </ac:rich-text-body>
      </ac:structured-macro>
      <p class="auto-cursor-target">
        <br/>
      </p>
    </ac:layout-cell>
    <ac:layout-cell>
      <h1>Line Chart (straight lines)</h1>
      <ac:structured-macro ac:macro-id="6f8fa262-738c-4413-a71f-2903a753caf0" ac:name="chartjs-line-chart" ac:schema-version="1">
        <ac:parameter ac:name="StraightLines">true</ac:parameter>
        <ac:rich-text-body>
          <p class="auto-cursor-target">
            <br/>
          </p>
          <table class="wrapped">
            <colgroup> <col/> <col/> <col/> <col/> <col/> <col/> <col/> </colgroup>
            <tbody>
              <tr>
                <th>Series</th>
                <th colspan="1">Color</th>
                <th>Apples</th>
                <th>Oranges</th>
                <th colspan="1">Bananas</th>
                <th colspan="1">Mangos</th>
                <th colspan="1">Grapes</th>
              </tr>
              <tr>
                <td>Maximum</td>
                <td colspan="1">dodgerblue</td>
                <td>19</td>
                <td>29</td>
                <td colspan="1">40</td>
                <td colspan="1">34</td>
                <td colspan="1">24</td>
              </tr>
              <tr>
                <td>Minimum</td>
                <td colspan="1">red</td>
                <td>10</td>
                <td>12</td>
                <td colspan="1">20</td>
                <td colspan="1">14</td>
                <td colspan="1">4</td>
              </tr>
            </tbody>
          </table>
          <p class="auto-cursor-target">
            <br/>
          </p>
        </ac:rich-text-body>
      </ac:structured-macro>
      <p class="auto-cursor-target">
        <br/>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <p>
        <br/>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="two_equal">
    <ac:layout-cell>
      <h1>Pie Chart</h1>
      <ac:structured-macro ac:macro-id="44bd2a04-6d99-49e7-afd5-e0d524a37d25" ac:name="chartjs-pie-doughnut-chart" ac:schema-version="1">
        <ac:rich-text-body>
          <p class="auto-cursor-target">
            <br/>
          </p>
          <table class="wrapped">
            <colgroup> <col/> <col/> <col/> <col/> <col/> <col/> </colgroup>
            <tbody>
              <tr>
                <th>Series</th>
                <th>Apples</th>
                <th>Oranges</th>
                <th colspan="1">Bananas</th>
                <th colspan="1">Mangos</th>
                <th colspan="1">Grapes</th>
              </tr>
              <tr>
                <td colspan="1">Color</td>
                <td colspan="1">forestgreen</td>
                <td colspan="1">orange</td>
                <td colspan="1">darksalmon</td>
                <td colspan="1">dodgerblue</td>
                <td colspan="1">firebrick</td>
              </tr>
              <tr>
                <td>Maximum</td>
                <td>19</td>
                <td>29</td>
                <td colspan="1">40</td>
                <td colspan="1">34</td>
                <td colspan="1">24</td>
              </tr>
              <tr>
                <td>Minimum</td>
                <td>10</td>
                <td>12</td>
                <td colspan="1">20</td>
                <td colspan="1">14</td>
                <td colspan="1">4</td>
              </tr>
            </tbody>
          </table>
          <p class="auto-cursor-target">
            <br/>
          </p>
        </ac:rich-text-body>
      </ac:structured-macro>
      <p class="auto-cursor-target">
        <br/>
      </p>
    </ac:layout-cell>
    <ac:layout-cell>
      <h1>Line Chart (Filled)</h1>
      <ac:structured-macro ac:macro-id="8255fcb7-bed4-49a3-8f84-d9a119bac289" ac:name="chartjs-line-chart" ac:schema-version="1">
        <ac:parameter ac:name="FillLineArea">true</ac:parameter>
        <ac:parameter ac:name="Id">MyLineChart2</ac:parameter>
        <ac:rich-text-body>
          <p class="auto-cursor-target">
            <br/>
          </p>
          <table class="wrapped">
            <colgroup> <col/> <col/> <col/> <col/> <col/> <col/> <col/> </colgroup>
            <tbody>
              <tr>
                <th>Series</th>
                <th colspan="1">Color</th>
                <th>Apples</th>
                <th>Oranges</th>
                <th colspan="1">Bananas</th>
                <th colspan="1">Mangos</th>
                <th colspan="1">Grapes</th>
              </tr>
              <tr>
                <td>Maximum</td>
                <td colspan="1">dodgerblue</td>
                <td>19</td>
                <td>29</td>
                <td colspan="1">40</td>
                <td colspan="1">34</td>
                <td colspan="1">24</td>
              </tr>
              <tr>
                <td>Minimum</td>
                <td colspan="1">red</td>
                <td>10</td>
                <td>12</td>
                <td colspan="1">20</td>
                <td colspan="1">14</td>
                <td colspan="1">4</td>
              </tr>
            </tbody>
          </table>
          <p class="auto-cursor-target">
            <br/>
          </p>
        </ac:rich-text-body>
      </ac:structured-macro>
      <p class="auto-cursor-target">
        <br/>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="single">
    <ac:layout-cell>
      <p>
        <br/>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
  <ac:layout-section ac:type="two_equal">
    <ac:layout-cell>
      <h1>Polar Area Chart</h1>
      <ac:structured-macro ac:macro-id="6ffbe95c-5ff0-4720-ba9f-7876c45536ae" ac:name="chartjs-polar-area-chart" ac:schema-version="1">
        <ac:rich-text-body>
          <p class="auto-cursor-target">
            <br/>
          </p>
          <table class="wrapped">
            <colgroup> <col/> <col/> <col/> <col/> <col/> <col/> </colgroup>
            <tbody>
              <tr>
                <th>Series</th>
                <th>Apples</th>
                <th>Bananas</th>
                <th>Mangos</th>
                <th>Oranges</th>
                <th>Cherries</th>
              </tr>
              <tr>
                <td colspan="1">Color</td>
                <td colspan="1">random</td>
                <td colspan="1">orange</td>
                <td colspan="1">darksalmon</td>
                <td colspan="1">dodgerblue</td>
                <td colspan="1">firebrick</td>
              </tr>
              <tr>
                <td>Series</td>
                <td>12</td>
                <td>14</td>
                <td>19</td>
                <td>7</td>
                <td>8</td>
              </tr>
            </tbody>
          </table>
          <p class="auto-cursor-target">
            <br/>
          </p>
        </ac:rich-text-body>
      </ac:structured-macro>
      <p class="auto-cursor-target">
        <br/>
      </p>
    </ac:layout-cell>
    <ac:layout-cell>
      <h1>Radar Chart</h1>
      <ac:structured-macro ac:macro-id="ce2b298d-67c4-4549-b91d-1ca6ff2e1cef" ac:name="chartjs-radar-chart" ac:schema-version="1">
        <ac:parameter ac:name="LegendPosition">bottom</ac:parameter>
        <ac:rich-text-body>
          <p class="auto-cursor-target">
            <br/>
          </p>
          <table class="wrapped">
            <colgroup> <col/> <col/> <col/> <col/> <col/> <col/> <col/> <col/> </colgroup>
            <tbody>
              <tr>
                <th>Series</th>
                <th colspan="1">Color</th>
                <th>Apples</th>
                <th>Bananas</th>
                <th>Mangos</th>
                <th>Oranges</th>
                <th>Cherries</th>
                <th colspan="1">Coconuts</th>
              </tr>
              <tr>
                <td>Series1</td>
                <td colspan="1">orange</td>
                <td>12</td>
                <td>10</td>
                <td>19</td>
                <td>7</td>
                <td>8</td>
                <td colspan="1">16</td>
              </tr>
              <tr>
                <td colspan="1">Series2</td>
                <td colspan="1">dodgerblue</td>
                <td colspan="1">9</td>
                <td colspan="1">11</td>
                <td colspan="1">12</td>
                <td colspan="1">14</td>
                <td colspan="1">19</td>
                <td colspan="1">10</td>
              </tr>
            </tbody>
          </table>
          <p class="auto-cursor-target">
            <br/>
          </p>
        </ac:rich-text-body>
      </ac:structured-macro>
      <p class="auto-cursor-target">
        <br/>
      </p>
    </ac:layout-cell>
  </ac:layout-section>
</ac:layout>