Part 3 - Building the Admin dashboard

Overview

In this section, we will build a dashboard for the Admin.

the first step will be building an information panel that displays recently created surveys
the second step will be adding a pie chart that displays the result of the surveys

Source code

The following source code is shared using Confluence Storage Format - the XHTML-based format that Confluence uses to store the content of pages, page templates, blueprints, blog posts and comments.

For more information on how to use this source code on your Confluence, read the following article - How do I use Recipes that use the Storage Format with the Confluence Source Editor?

  <ac:structured-macro ac:macro-id="d877b510-29c6-47a9-b3ad-7aaa6195dc3d" ac:name="show-if" ac:schema-version="1">
  <ac:parameter ac:name="user">
    <ri:user ri:userkey="2c91808357cb99ba0157cbcea4030004"/>
  </ac:parameter>
  <ac:parameter ac:name="atlassian-macro-output-type">INLINE</ac:parameter>
  <ac:rich-text-body>
    <ac:emoticon ac:name="information"/> As <a href="https://demo.servicerocket.io/"> <strong>demo.admin</strong> </a>you can see the survey report. Try to login as <strong>
      <a href="https://demo.servicerocket.io/">demo.user</a> </strong>to see a different view on this page.<p>
      <br/>
    </p>
    <ac:structured-macro ac:macro-id="bcb83059-d493-4d00-bc96-44820621a1fe" ac:name="panel" ac:schema-version="1">
      <ac:parameter ac:name="bgColor">#00B8D9</ac:parameter>
      <ac:parameter ac:name="borderWidth">0</ac:parameter>
      <ac:rich-text-body>
        <h2 style="text-align: center;">
          <span style="color: rgb(51,51,51);">Surveys created in the last 24h</span>
        </h2>
        <ac:structured-macro ac:macro-id="5ce2d14b-3234-4e66-8a0c-2ea0078cf45b" ac:name="report-block" ac:schema-version="1">
          <ac:parameter ac:name="atlassian-macro-output-type">INLINE</ac:parameter>
          <ac:rich-text-body>
            <ac:structured-macro ac:macro-id="1f91ea42-55d5-4bbd-8210-ac7b8038b9fe" ac:name="local-reporter" ac:schema-version="1">
              <ac:parameter ac:name="">page:children</ac:parameter>
              <ac:rich-text-body>
                <p>
                  <ac:structured-macro ac:macro-id="78391abf-0a96-462c-ab75-048a279ff564" ac:name="date-filter" ac:schema-version="1">
                    <ac:parameter ac:name="minValue">-1d</ac:parameter>
                    <ac:parameter ac:name="">content:creation date</ac:parameter>
                  </ac:structured-macro>
                </p>
              </ac:rich-text-body>
            </ac:structured-macro>
            <ac:structured-macro ac:macro-id="b81d9955-cac0-48b2-b439-fdd12ebcaeb0" ac:name="report-header" ac:schema-version="1">
              <ac:rich-text-body>
                <h1 style="text-align: center;">
                  <span style="color: rgb(51,51,51);"> <ac:structured-macro ac:macro-id="639aa3c0-cc0d-4a80-9ba7-01bb65e0f585" ac:name="report-info" ac:schema-version="1">
                      <ac:parameter ac:name="">report:query&gt;collection:size</ac:parameter>
                    </ac:structured-macro> Surveys</span>
                </h1>
              </ac:rich-text-body>
            </ac:structured-macro>
            <ac:structured-macro ac:macro-id="7f12049d-f107-4f44-8c47-fff669a74a2c" ac:name="report-body" ac:schema-version="1">
              <ac:rich-text-body>
                <ac:structured-macro ac:macro-id="9ca89724-cee8-4f46-952d-2102941a193d" ac:name="hidden-data" ac:schema-version="1">
                  <ac:parameter ac:name="atlassian-macro-output-type">INLINE</ac:parameter>
                  <ac:rich-text-body>
                    <h1>
                      <span style="color: rgb(51,51,51);"> <ac:structured-macro ac:macro-id="6297c13e-0f4a-40f1-a13b-8623e5310f95" ac:name="report-info" ac:schema-version="1">
                          <ac:parameter ac:name="">content:title</ac:parameter>
                        </ac:structured-macro> </span>
                    </h1>
                  </ac:rich-text-body>
                </ac:structured-macro>
              </ac:rich-text-body>
            </ac:structured-macro>
            <ac:structured-macro ac:macro-id="93ca1aec-1602-4433-8e2b-b235432eecc2" ac:name="report-empty" ac:schema-version="1">
              <ac:rich-text-body>
                <h1 style="text-align: center;">
                  <span style="color: rgb(51,51,51);">0 Surveys</span>
                </h1>
              </ac:rich-text-body>
            </ac:structured-macro>
          </ac:rich-text-body>
        </ac:structured-macro>
        <p>
          <br/>
        </p>
        <p>
          <br/>
        </p>
      </ac:rich-text-body>
    </ac:structured-macro>
    <ac:structured-macro ac:macro-id="9e59e8f5-87b5-427c-9a5e-cc765858c390" ac:name="table-chart" ac:schema-version="1">
      <ac:parameter ac:name="innerlabels">Percentage</ac:parameter>
      <ac:parameter ac:name="dataorientation">Vertical</ac:parameter>
      <ac:parameter ac:name="legend">right</ac:parameter>
      <ac:parameter ac:name="column">Rating</ac:parameter>
      <ac:parameter ac:name="aggregation">Rating</ac:parameter>
      <ac:parameter ac:name="is3d">true</ac:parameter>
      <ac:parameter ac:name="align">Center</ac:parameter>
      <ac:parameter ac:name="separator">Point (.)</ac:parameter>
      <ac:parameter ac:name="version">3</ac:parameter>
      <ac:parameter ac:name="colors">#3572b0,#8eb021,#d04437</ac:parameter>
      <ac:parameter ac:name="datepattern">dd M yy</ac:parameter>
      <ac:parameter ac:name="pieKeys">5 - Very good‚4 - Good‚3 - Neither good nor poor</ac:parameter>
      <ac:parameter ac:name="id">1568191239498_-1184837541</ac:parameter>
      <ac:parameter ac:name="worklog">5|8|w d h m|w d h m</ac:parameter>
      <ac:parameter ac:name="formatVersion">3</ac:parameter>
      <ac:rich-text-body>
        <ac:structured-macro ac:macro-id="3fb6254a-1e6e-47ef-8647-3b6974290219" ac:name="report-table" ac:schema-version="1">
          <ac:rich-text-body>
            <ac:structured-macro ac:macro-id="889ed87f-6b7f-47c5-839f-2e5bdbe33894" ac:name="local-reporter" ac:schema-version="1">
              <ac:parameter ac:name="">page:children</ac:parameter>
              <ac:rich-text-body>
                <p>
                  <br/>
                </p>
              </ac:rich-text-body>
            </ac:structured-macro>
            <ac:structured-macro ac:macro-id="0bd6db7e-3b1b-4ff5-92fe-067f75b3f870" ac:name="report-column" ac:schema-version="1">
              <ac:parameter ac:name="title">Rating</ac:parameter>
              <ac:rich-text-body>
                <p>
                  <ac:structured-macro ac:macro-id="46240190-07b1-43ec-9fe5-03a6bfcbac1b" ac:name="report-info" ac:schema-version="1">
                    <ac:parameter ac:name="">data:rate</ac:parameter>
                  </ac:structured-macro>
                </p>
              </ac:rich-text-body>
            </ac:structured-macro>
            <ac:structured-macro ac:macro-id="9ce5566a-8747-4493-985c-984f29781944" ac:name="report-column" ac:schema-version="1">
              <ac:parameter ac:name="title">Suggestions</ac:parameter>
              <ac:rich-text-body>
                <p>
                  <ac:structured-macro ac:macro-id="107aea77-5fa7-4561-b6fc-9e3c240a42dc" ac:name="report-info" ac:schema-version="1">
                    <ac:parameter ac:name="render">richtext</ac:parameter>
                    <ac:parameter ac:name="">data:comment</ac:parameter>
                  </ac:structured-macro>
                </p>
              </ac:rich-text-body>
            </ac:structured-macro>
          </ac:rich-text-body>
        </ac:structured-macro>
      </ac:rich-text-body>
    </ac:structured-macro>
  </ac:rich-text-body>
</ac:structured-macro>

Step 1

Let's build the first component of the Admin dashboard where a Confluence admin can immediately view recently created surveys.

Something that looks like this:

On the draft page

add a Show If macro
- set the group parameter to "confluence-administrators" OR set the user parameter to specific admin account as you preferred
create a panel
- insert text "Surveys created in the last 24h" within this panel

We're going to retrieve survey count that is created within 24 hours. The following macros are added in the body of the panel macro. Refer to the macro structure below to see this visually.

create a Report Block macro

In the Report Block macro

create a Local Reporter macro
- set the Key parameter to "page:children"

In this Local Reporter macro

create a Date Filter macro
- set Key parameter to "content:creation date"
- set Minimum Value parameter to "-1d"

Now back within the Report Block macro

create a Report Header macro

In this Report Header macro

create a Report Info macro
- set Key parameter to "report:query>collection:size"
add text "Surveys" next to this macro

Back within the Report Block

create a Report Body macro

In this Report Body macro

create a Hidden Data macro

In this Hidden Data macro

create a Report Info macro
- set the Key parameter to "content:title"

After Report Body macro

add Report Empty macro and insert text "0 Surveys" within this macro

When there is no survey created, the report will display message "0 Surveys".

Step 2

Now let's add a pie chart showing the result of surveys.

By the end of this section you will have something that looks like this:

On the draft page, below the panel macro (containing the macros added in Step 1)

add a Chart from Table macro
- set Aggregation to "Rating"

create a Report Table macro

Within the Report Table macro

create a Local Reporter macro
- set the Key parameter to "page:children"

Now within the Report Table macro

create two Report Column macros
- for the first Report Column macro
  - set the title as "Rating"
- add a Report Info macro
  - set the Key parameter to "data:rate"
- for the second Report Column macro
  - set the title as "Suggestions"
- add a Report Info macro
  - set the Key parameter to "data:comment"

Part 3 - Building the Admin dashboard

Overview

Source code

Step 1

Step 2

Macro structure

Next