Report components Actions

HTML

Nunjucks

      <div class="moj-button-menu">
    
        <button type="submit" class="govuk-button moj-button-menu__item govuk-button--secondary {{ button.id }}" data-module="govuk-button" id="dpr-button-printable" data-href="#" aria-label="print report">
          Print
        </button>
    
        <button type="submit" class="govuk-button moj-button-menu__item govuk-button--secondary {{ button.id }}" data-module="govuk-button" id="dpr-button-sharable" data-href="mailto:?subject=Product Name - Variant Name&amp;body=link/to/report" aria-label="Email report link">
          Share
        </button>
    
        <button type="submit" class="govuk-button moj-button-menu__item govuk-button--secondary {{ button.id }}" data-module="govuk-button" id="dpr-button-copy" data-href="url/of/report" aria-label="report request">
          Copy
        </button>
    
      </div>
    
      <div class="dpr-display-none"></div>
    </div>

Nunjucks macro options

| Name| Type| Required| Description| | -------------| ---------| --------| ----------------------| | id| string| Yes| The action id| | disabled| boolean| no| The disabled state| | text| string| Yes| The button name| | ariaLabelText| string| No| The aria label text| | href| string| No| The action button href|

    {% from "dpr/components/_reports/report-heading/report-actions/view.njk" import dprReportActions %}
    
    {%
      set actions = [
        {
          id: "dpr-button-printable",
          disabled: false,
          text: "Print",
          ariaLabelText: "print report",
          href: "#"
        },
        {
          id: "dpr-button-sharable",
          disabled: false,
          text: "Share",
          ariaLabelText: "Email report link",
          href: "mailto:?subject=Product Name - Variant Name&body=link/to/report"
        },
        {
          id: "dpr-button-copy",
          disabled: false,
          text: "Copy",
          ariaLabelText: "report request",
          href: "url/of/report"
        }
      ]
    %}
    
    {{ dprReportActions(actions) }}```
  
  </div>
    
  

</div>

</div>


## Overview

Report actions are designed to allow users to perform basic and most commonly used tasks on a report.

### When to use

Use the Actions component when report users need to:

- Print a report
- Share a report with another user
- Copy the report URL

## Availabe actions

- [Print screen](#print-screen)
- [Copy](#copy)
- [Share](#share)
- [Refresh](#refresh) (requires platform integration)
- [Download](#download) (requires platform integration)

## How to use

### Basic



<div class="app-example">
  <span class="app-example__new-window">
    <a href="/examples/report/actions" target="_blank"
      >Open this example <span class="govuk-visually-hidden">(Report actions (example))</span> in a new window</a
    >
  </span>
  <iframe class="app-example__frame" height="170" src="/examples/report/actions" title="Report actions (example)"></iframe>
</div>
<div class="app-tabs" data-module="app-tabs">
  

  

  <div class="govuk-tabs" data-module="govuk-tabs">
  <h2 class="govuk-tabs__title">
    Contents
  </h2>

  <ul class="govuk-tabs__list">
    
          <li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
      <a class="govuk-tabs__tab" href="#blank-tab">
        _
      </a>
    </li>
      
    
          <li class="govuk-tabs__list-item">
      <a class="govuk-tabs__tab" href="#htmldefault">
        HTML
      </a>
    </li>
      
    
          <li class="govuk-tabs__list-item">
      <a class="govuk-tabs__tab" href="#nunjucksdefault">
        Nunjucks
      </a>
    </li>
      
    
  </ul>
  
      <div class="govuk-tabs__panel" id="blank-tab">
  
  </div>
    
  
      <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="htmldefault">
  
```html <div class="report-actions" data-dpr-module="report-actions">
      <div class="moj-button-menu">
    
        <button type="submit" class="govuk-button moj-button-menu__item govuk-button--secondary {{ button.id }}" data-module="govuk-button" id="dpr-button-printable" data-href="#" aria-label="print report">
          Print
        </button>
    
        <button type="submit" class="govuk-button moj-button-menu__item govuk-button--secondary {{ button.id }}" data-module="govuk-button" id="dpr-button-sharable" data-href="mailto:?subject=Product Name - Variant Name&amp;body=link/to/report" aria-label="Email report link">
          Share
        </button>
    
        <button type="submit" class="govuk-button moj-button-menu__item govuk-button--secondary {{ button.id }}" data-module="govuk-button" id="dpr-button-copy" data-href="url/of/report" aria-label="report request">
          Copy
        </button>
    
      </div>
    
      <div class="dpr-display-none"></div>
    </div>

Nunjucks macro options

    {% from "dpr/components/_reports/report-heading/report-actions/view.njk" import dprReportActions %}
    
    {%
      set actions = [
        {
          id: "dpr-button-printable",
          disabled: false,
          text: "Print",
          ariaLabelText: "print report",
          href: "#"
        },
        {
          id: "dpr-button-sharable",
          disabled: false,
          text: "Share",
          ariaLabelText: "Email report link",
          href: "mailto:?subject=Product Name - Variant Name&body=link/to/report"
        },
        {
          id: "dpr-button-copy",
          disabled: false,
          text: "Copy",
          ariaLabelText: "report request",
          href: "url/of/report"
        }
      ]
    %}
    
    {{ dprReportActions(actions) }}```
  
  </div>
    
  

</div>

</div>


### Disable actions



<div class="app-example">
  <span class="app-example__new-window">
    <a href="/examples/report/actions/disabled" target="_blank"
      >Open this example <span class="govuk-visually-hidden">(Disable actions (example))</span> in a new window</a
    >
  </span>
  <iframe class="app-example__frame" height="170" src="/examples/report/actions/disabled" title="Disable actions (example)"></iframe>
</div>
<div class="app-tabs" data-module="app-tabs">
  

  

  <div class="govuk-tabs" data-module="govuk-tabs">
  <h2 class="govuk-tabs__title">
    Contents
  </h2>

  <ul class="govuk-tabs__list">
    
          <li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
      <a class="govuk-tabs__tab" href="#blank-tab">
        _
      </a>
    </li>
      
    
          <li class="govuk-tabs__list-item">
      <a class="govuk-tabs__tab" href="#htmldisabled">
        HTML
      </a>
    </li>
      
    
          <li class="govuk-tabs__list-item">
      <a class="govuk-tabs__tab" href="#nunjucksdisabled">
        Nunjucks
      </a>
    </li>
      
    
  </ul>
  
      <div class="govuk-tabs__panel" id="blank-tab">
  
  </div>
    
  
      <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="htmldisabled">
  
```html <div class="report-actions" data-dpr-module="report-actions">
      <div class="moj-button-menu">
    
        <button type="submit" class="govuk-button moj-button-menu__item govuk-button--secondary {{ button.id }}" data-module="govuk-button" id="dpr-button-sharable" data-href="mailto:?subject=Product Name - Variant Name&amp;body=link/to/report" aria-label="share report request via email">
          Share
        </button>
    
      </div>
    
      <div class="dpr-display-none"></div>
    </div>

Nunjucks macro options

    {% from "dpr/components/_reports/report-heading/report-actions/view.njk" import dprReportActions %}
    
    {%
      set actions = [
        {
          id: "dpr-button-printable",
          disabled: true,
          text: "Print",
          ariaLabelText: "print report",
          href: "#"
        },
        {
          id: "dpr-button-sharable",
          disabled: false,
          text: "Share",
          ariaLabelText: "share report request via email",
          href: "mailto:?subject=Product Name - Variant Name&body=link/to/report"
        },
        {
          id: "dpr-button-copy",
          disabled: true,
          text: "Copy",
          ariaLabelText: "report request",
          href: "url/of/report"
        }
      ]
    %}
    
    {{ dprReportActions(actions) }}```
  
  </div>
    
  

</div>

</div>


## Actions

### Print screen

The print screen action enables the user to print the visible contents of their current screen.

This action will open up the print window in your browser for the user to configure the print conditions.

> **NOTE:** The print screen action will not print the entire report by default as the action will only print the contents visisble on the screen. To print the entire report the user will need to update the "rows per page" input of the report to `All` and then click print.



<div class="app-example">
  <span class="app-example__new-window">
    <a href="/examples/report/actions/print" target="_blank"
      >Open this example <span class="govuk-visually-hidden">(Disable actions (example))</span> in a new window</a
    >
  </span>
  <iframe class="app-example__frame" height="170" src="/examples/report/actions/print" title="Disable actions (example)"></iframe>
</div>
<div class="app-tabs" data-module="app-tabs">
  

  

  <div class="govuk-tabs" data-module="govuk-tabs">
  <h2 class="govuk-tabs__title">
    Contents
  </h2>

  <ul class="govuk-tabs__list">
    
          <li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
      <a class="govuk-tabs__tab" href="#blank-tab">
        _
      </a>
    </li>
      
    
          <li class="govuk-tabs__list-item">
      <a class="govuk-tabs__tab" href="#htmlprint">
        HTML
      </a>
    </li>
      
    
          <li class="govuk-tabs__list-item">
      <a class="govuk-tabs__tab" href="#nunjucksprint">
        Nunjucks
      </a>
    </li>
      
    
  </ul>
  
      <div class="govuk-tabs__panel" id="blank-tab">
  
  </div>
    
  
      <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="htmlprint">
  
```html <div class="report-actions" data-dpr-module="report-actions">
      <div class="moj-button-menu">
    
        <button type="submit" class="govuk-button moj-button-menu__item govuk-button--secondary {{ button.id }}" data-module="govuk-button" id="dpr-button-printable" data-href="#" aria-label="print report">
          Print
        </button>
    
      </div>
    
      <div class="dpr-display-none"></div>
    </div>

Nunjucks macro options

    {% from "dpr/components/_reports/report-heading/report-actions/view.njk" import dprReportActions %}
    
    {%
      set actions = [
        {
          id: "dpr-button-printable",
          disabled: false,
          text: "Print",
          ariaLabelText: "print report",
          href: "#"
        }
      ]
    %}
    
    {{ dprReportActions(actions) }}```
  
  </div>
    
  

</div>

</div>


### Copy

The Copy action will copy the current URL to the clipboard



<div class="app-example">
  <span class="app-example__new-window">
    <a href="/examples/report/actions/copy" target="_blank"
      >Open this example <span class="govuk-visually-hidden">(Disable actions (example))</span> in a new window</a
    >
  </span>
  <iframe class="app-example__frame" height="170" src="/examples/report/actions/copy" title="Disable actions (example)"></iframe>
</div>
<div class="app-tabs" data-module="app-tabs">
  

  

  <div class="govuk-tabs" data-module="govuk-tabs">
  <h2 class="govuk-tabs__title">
    Contents
  </h2>

  <ul class="govuk-tabs__list">
    
          <li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
      <a class="govuk-tabs__tab" href="#blank-tab">
        _
      </a>
    </li>
      
    
          <li class="govuk-tabs__list-item">
      <a class="govuk-tabs__tab" href="#htmlcopy">
        HTML
      </a>
    </li>
      
    
          <li class="govuk-tabs__list-item">
      <a class="govuk-tabs__tab" href="#nunjuckscopy">
        Nunjucks
      </a>
    </li>
      
    
  </ul>
  
      <div class="govuk-tabs__panel" id="blank-tab">
  
  </div>
    
  
      <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="htmlcopy">
  
```html <div class="report-actions" data-dpr-module="report-actions">
      <div class="moj-button-menu">
    
        <button type="submit" class="govuk-button moj-button-menu__item govuk-button--secondary {{ button.id }}" data-module="govuk-button" id="dpr-button-copy" data-href="url/of/report" aria-label="report request">
          Copy
        </button>
    
      </div>
    
      <div class="dpr-display-none"></div>
    </div>

Nunjucks macro options

    {% from "dpr/components/_reports/report-heading/report-actions/view.njk" import dprReportActions %}
    
    {%
      set actions = [
        {
          id: "dpr-button-copy",
          disabled: false,
          text: "Copy",
          ariaLabelText: "report request",
          href: "url/of/report"
        }
      ]
    %}
    
    {{ dprReportActions(actions) }}```
  
  </div>
    
  

</div>

</div>


### Share

The Share action open up your email client and populate it with a relevant subject name, and add the report URL to the body of the email



<div class="app-example">
  <span class="app-example__new-window">
    <a href="/examples/report/actions/share" target="_blank"
      >Open this example <span class="govuk-visually-hidden">(Disable actions (example))</span> in a new window</a
    >
  </span>
  <iframe class="app-example__frame" height="170" src="/examples/report/actions/share" title="Disable actions (example)"></iframe>
</div>
<div class="app-tabs" data-module="app-tabs">
  

  

  <div class="govuk-tabs" data-module="govuk-tabs">
  <h2 class="govuk-tabs__title">
    Contents
  </h2>

  <ul class="govuk-tabs__list">
    
          <li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
      <a class="govuk-tabs__tab" href="#blank-tab">
        _
      </a>
    </li>
      
    
          <li class="govuk-tabs__list-item">
      <a class="govuk-tabs__tab" href="#htmlshare">
        HTML
      </a>
    </li>
      
    
          <li class="govuk-tabs__list-item">
      <a class="govuk-tabs__tab" href="#nunjucksshare">
        Nunjucks
      </a>
    </li>
      
    
  </ul>
  
      <div class="govuk-tabs__panel" id="blank-tab">
  
  </div>
    
  
      <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="htmlshare">
  
```html <div class="report-actions" data-dpr-module="report-actions">
      <div class="moj-button-menu">
    
        <button type="submit" class="govuk-button moj-button-menu__item govuk-button--secondary {{ button.id }}" data-module="govuk-button" id="dpr-button-sharable" data-href="mailto:?subject=Product Name - Variant Name&amp;body=link/to/report" aria-label="Email report link">
          Share
        </button>
    
      </div>
    
      <div class="dpr-display-none"></div>
    </div>

Nunjucks macro options

    {% from "dpr/components/_reports/report-heading/report-actions/view.njk" import dprReportActions %}
    
    {%
      set actions = [
        {
          id: "dpr-button-sharable",
          disabled: false,
          text: "Share",
          ariaLabelText: "Email report link",
          href: "mailto:?subject=Product Name - Variant Name&body=link/to/report"
        }
      ]
    %}
    
    {{ dprReportActions(actions) }}```
  
  </div>
    
  

</div>

</div>


### Refresh

The refresh action navigates the user back to the request page in order to update their request parameters, and re-request their report. Requires [platform integration](/integration-guides/integrating-the-fe-platform)

### Download

The download action enables users to download the full dataset as a CSV. Requires [platform integration](/integration-guides/integrating-the-fe-platform)

Report components Actions

Contents

Related resources