Examples of Extension Visuals

We provide additional examples for extension visuals.

In the following examples, the definitions for Print Dashboard and Download Dashboard as PDF shows how to perform these actions through an extension visual. We implemented them together, as described in #visual-extension-example__print-and-pdf, as a visual that serves as an action panel within the dashboard.

Print Dashboard

The following extension definition builds a Print button with an icon. You can use this within a dashboard, and print this dashboard from View mode.

<div id="extension-print-btn">
  <button class="btn btn-xs btn-primary" 
  onclick="window.print();return false;">
  <span class="fa fa-print"></span> Print</button>
</div>

Download Dashboard as PDF

The following extension definition builds a Download PDF button with an icon. You can use this within a dashboard, and save the dashboard to PDF format from View mode.

<div id="extension-pdf-btn">
  <button class="pdf-download btn btn-xs btn-primary">
  <span class="fa fa-download"></span> Download PDF</button>
  <div class="image-dropdown-submenu"/>
</div>

Print Dashboard and Download PDF

Using the following definition in an extension visual creates two buttons:

  • Print button with an icon, Print
  • Download PDF button with an icon, Download PDF
<div id="extension-print-and-pdf-btn">
  <button class="btn btn-xs btn-primary" 
  onclick="window.print();return false;">
  <span class="fa fa-print"></span> Print</button>

  <button class="pdf-download btn btn-xs btn-primary">
  <span class="fa fa-download"></span> Download PDF</button>
  <div class="image-dropdown-submenu"/>
</div>

When you add this extension visual to the dashboard, it would look similar to this (in View mode).

Dashboard with Print and Download Buttons
Dashboard with Print and Download Buttons