Report components Actions

HTML

Nunjucks

    <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="share report request via email">
          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
tooltipText	`string`	Yes	The button name
ariaLabelText	`string`	No	The aria label text
href	`string`	No	The action button href

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

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
Copy
Share
Refresh (requires platform integration)
Download (requires platform integration)

How to use

Basic

Open this example in a new window

HTML

Nunjucks

    <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="share report request via email">
          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
tooltipText	`string`	Yes	The button name
ariaLabelText	`string`	No	The aria label text
href	`string`	No	The action button href

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

Disable actions

Open this example in a new window

HTML

Nunjucks

    <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" disabled="true">
          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="share report request via email">
          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" disabled="true">
          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
tooltipText	`string`	Yes	The button name
ariaLabelText	`string`	No	The aria label text
href	`string`	No	The action button href

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

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.

Open this example in a new window

HTML

Nunjucks

    <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

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

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

Copy

The Copy action will copy the current URL to the clipboard

Open this example in a new window

HTML

Nunjucks

    <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

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

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

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

Open this example in a new window

HTML

Nunjucks

    <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

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

    {% from "dpr/components/_reports/report-actions/view.njk" import dprReportActions %}
    
    {% set actions = [
      {
        id: "dpr-button-sharable",
        disabled: false,
        tooltipText: "Share",
        ariaLabelText: "share report request via email",
        href: "mailto:?subject=Product Name - Variant Name&body=link/to/report"
      }
    ] %}
    
    {{ dprReportActions(actions) }}

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

Download

The download action enables users to download the full dataset as a CSV. Requires platform integration

Report components Actions

Contents

Overview

When to use

Availabe actions

How to use

Basic

Contents

Disable actions

Contents

Actions

Print screen

Contents

Copy

Contents

Contents

Refresh

Download