Example Reports Summary report

This is an example report using the summary template

Contents

      <div id="dpr-report-page" class="dpr-report-page govuk-width-container report-list-container">
    
        <div class="dpr-report-print-message-container">
    
        </div>
    
        <div class="dpr-report-page__heading-container">
    
          <div class="dpr-report-header">
    
            <div class="dpr-report-heading__actions">
    
              <div class="report-actions" data-dpr-module="report-actions">
                <div class="moj-button-menu"></div>
    
                <div class="dpr-display-none"></div>
              </div>
    
            </div>
    
            <div class="dpr-report-heading">
              <div class="dpr-report-heading__title">
                <h1 id="dpr-report-name" class="govuk-heading-xl">
                  <span class="govuk-caption-l">Report templates</span>
                  Summary
                </h1>
              </div>
            </div>
    
            <details class="govuk-details dpr-meta-data-details">
              <summary class="govuk-details__summary">
                <span class="govuk-details__summary-text">
                  Report details
                </span>
              </summary>
              <div class="govuk-details__text">
    
                <div class="dpr-request-details">
                  <table class="dpr-request-details__table" id="dpr-request-details-table">
                    <tbody>
    
                      <tr>
                        <td class="dpr-request-details__table-heading">
                          <p class="govuk-body-m dpr-request-details__table-heading_name">Name:</p>
                        </td>
                        <td>
                          <p class="govuk-heading-s govuk-!-margin-bottom-0">Summary</p>
                        </td>
                      </tr>
    
                      <tr>
                        <td class="dpr-request-details__table-heading">
                          <p class="govuk-body-m dpr-request-details__table-heading_name">Product:</p>
                        </td>
                        <td>
                          <p class="govuk-heading-s govuk-!-margin-bottom-0">Report templates</p>
                        </td>
                      </tr>
    
                      <tr>
                        <td class="dpr-request-details__table-heading">
                          <p class="govuk-body-m dpr-request-details__table-heading_name">Description:</p>
                        </td>
                        <td>
                          <p class="govuk-body-m govuk-!-margin-bottom-0">Template: "summary"</p>
                        </td>
                      </tr>
    
                      <tr>
                        <td class="dpr-request-details__table-heading">
                          <p class="govuk-body-m dpr-request-details__table-heading_name">Classification:</p>
                        </td>
                        <td>
                          <p class="govuk-body-m govuk-!-margin-bottom-0">OFFICIAL</p>
                        </td>
                      </tr>
    
                      <tr>
                        <td class="dpr-request-details__table-heading">
                          <p class="govuk-body-m dpr-request-details__table-heading_name">Requested at:</p>
                        </td>
                        <td>
                          <p class="govuk-body-m govuk-!-margin-bottom-0">26/01/2026, 19:06:00</p>
                        </td>
                      </tr>
    
                    </tbody>
                  </table>
                </div>
    
              </div>
            </details>
    
            <div class="dpr-report-details-print">
    
              <div class="dpr-request-details">
                <table class="dpr-request-details__table" id="dpr-request-details-table">
                  <tbody>
    
                    <tr>
                      <td class="dpr-request-details__table-heading">
                        <p class="govuk-body-m dpr-request-details__table-heading_name">Name:</p>
                      </td>
                      <td>
                        <p class="govuk-heading-s govuk-!-margin-bottom-0">Summary</p>
                      </td>
                    </tr>
    
                    <tr>
                      <td class="dpr-request-details__table-heading">
                        <p class="govuk-body-m dpr-request-details__table-heading_name">Product:</p>
                      </td>
                      <td>
                        <p class="govuk-heading-s govuk-!-margin-bottom-0">Report templates</p>
                      </td>
                    </tr>
    
                    <tr>
                      <td class="dpr-request-details__table-heading">
                        <p class="govuk-body-m dpr-request-details__table-heading_name">Description:</p>
                      </td>
                      <td>
                        <p class="govuk-body-m govuk-!-margin-bottom-0">Template: "summary"</p>
                      </td>
                    </tr>
    
                    <tr>
                      <td class="dpr-request-details__table-heading">
                        <p class="govuk-body-m dpr-request-details__table-heading_name">Classification:</p>
                      </td>
                      <td>
                        <p class="govuk-body-m govuk-!-margin-bottom-0">OFFICIAL</p>
                      </td>
                    </tr>
    
                    <tr>
                      <td class="dpr-request-details__table-heading">
                        <p class="govuk-body-m dpr-request-details__table-heading_name">Requested at:</p>
                      </td>
                      <td>
                        <p class="govuk-body-m govuk-!-margin-bottom-0">26/01/2026, 19:06:00</p>
                      </td>
                    </tr>
    
                  </tbody>
                </table>
              </div>
            </div>
    
            <div class="dpr-report-interactive-actions">
    
            </div>
          </div>
        </div>
    
        <div class="dpr-report-page__template-container">
    
          <div class="dpr-report-template-container ">
    
            <div class="dpr-report-template__page-summaries dpr-report-template__page-summaries--header">
    
              <div class="dpr-summary-container-group dpr-summary-container-group-page-header">
    
                <div class="dpr-summary-container">
                  <table class="govuk-table">
    
                    <thead class="govuk-table__head">
                      <tr class="govuk-table__row">
    
                        <th scope="col" class="govuk-table__header">Total</th>
    
                      </tr>
                    </thead>
    
                    <tbody class="govuk-table__body">
    
                      <tr class="govuk-table__row">
    
                        <td class="govuk-table__cell govuk-table__cell--numeric">52</td>
    
                      </tr>
    
                    </tbody>
                  </table>
    
                </div>
    
                <div class="dpr-summary-container">
                  <table class="govuk-table">
    
                    <thead class="govuk-table__head">
                      <tr class="govuk-table__row">
    
                        <th scope="col" class="govuk-table__header">Good (%)</th>
    
                        <th scope="col" class="govuk-table__header">Bad (%)</th>
    
                        <th scope="col" class="govuk-table__header">Ugly (%)</th>
    
                      </tr>
                    </thead>
    
                    <tbody class="govuk-table__body">
    
                      <tr class="govuk-table__row">
    
                        <td class="govuk-table__cell govuk-table__cell--numeric">1</td>
    
                        <td class="govuk-table__cell govuk-table__cell--numeric">10</td>
    
                        <td class="govuk-table__cell govuk-table__cell--numeric">89</td>
    
                      </tr>
    
                    </tbody>
                  </table>
    
                </div>
    
              </div>
    
            </div>
    
            <div class="dpr-report-template__page-totals dpr-report-template__page-totals--header">
    
              <div class="dpr-report-totals">
                <p class="govuk-body"></p>
              </div>
    
            </div>
    
            <div class="dpr-report-template__sections dpr-report-template__sections--summary">
    
              <div id="dpr-report-sections">
    
              </div>
    
            </div>
    
            <div class="dpr-report-template__page-totals dpr-report-template__page-totals--footer">
    
              <div class="dpr-report-totals">
                <p class="govuk-body"></p>
              </div>
    
            </div>
    
            <div class="dpr-report-template__page-summaries dpr-report-template__page-summaries--footer">
    
            </div>
    
          </div>
    
        </div>
    
        <div id="dpr-report-page-bottom"></div>
      </div>
    </div>

    {%- from "dpr/components/_reports/report-page/view.njk" import dprReportPage -%}
    
    {%
      set data = {
        filterData: {
          filters: [],
          selectedFilters: [],
          canSaveDefaults: true
        },
        count: 100,
        nestedBaseUrl: '/embedded/platform',
        csrfToken: 'csrfToken',
        loadType: 'async',
        type: 'report',
        tableId: 'tblId_1769454359101',
        reportId: 'report-template-examples',
        id: 'report-template-summary',
        actions: [],
        canDownload: false,
        reportName: 'Report templates',
        name: 'Summary',
        description: 'Template: "summary"',
        classification: 'OFFICIAL',
        printable: true,
        specification: {
          template: 'summary',
          fields: [
            {
              name: 'section1',
              display: 'First',
              sortable: false,
              defaultsort: false,
              type: 'string',
              mandatory: false,
              visible: false
            },
            {
              name: 'section2',
              display: 'Second',
              sortable: false,
              defaultsort: false,
              type: 'string',
              mandatory: false,
              visible: false
            }
          ]
        },
        template: 'summary',
        fields: [
          {
            name: 'section1',
            display: 'First',
            sortable: false,
            defaultsort: false,
            type: 'string',
            mandatory: false,
            visible: false
          },
          {
            name: 'section2',
            display: 'Second',
            sortable: false,
            defaultsort: false,
            type: 'string',
            mandatory: false,
            visible: false
          }
        ],
        executionId: 'exId_1769454359101',
        requestedTimestamp: '26/01/2026, 19:06:00',
        querySummary: [],
        queryData: {},
        requestUrl: {
          fullUrl:
            'http://localhost:3010/embedded/platform/dpr/request-report/report/report-template-examples/report-template-summary/filters',
          pathname: '/embedded/platform/dpr/request-report/report/report-template-examples/report-template-summary/filters',
          search: ''
        },
        reportUrl:
          '/embedded/platform/dpr/view-report/async/report/report-template-examples/report-template-summary/tblId_1769454359101/report',
        pathname:
          '/embedded/platform/dpr/view-report/async/report/report-template-examples/report-template-summary/tblId_1769454359101/report',
        dataTable: {
          rowCount: 20,
          summaries: {
            'page-header': [
              {
                head: [
                  {
                    text: 'Total'
                  }
                ],
                rows: [
                  [
                    {
                      fieldName: 'total',
                      text: 52,
                      format: 'numeric',
                      classes: ''
                    }
                  ]
                ],
                rowCount: 1,
                colCount: 1
              },
              {
                head: [
                  {
                    text: 'Good (%)'
                  },
                  {
                    text: 'Bad (%)'
                  },
                  {
                    text: 'Ugly (%)'
                  }
                ],
                rows: [
                  [
                    {
                      fieldName: 'percentGood',
                      text: 1,
                      format: 'numeric',
                      classes: ''
                    },
                    {
                      fieldName: 'percentBad',
                      text: 10,
                      format: 'numeric',
                      classes: ''
                    },
                    {
                      fieldName: 'percentUgly',
                      text: 89,
                      format: 'numeric',
                      classes: ''
                    }
                  ]
                ],
                rowCount: 1,
                colCount: 3
              }
            ]
          },
          sections: []
        }
      }
    %}
    
    {{ dprReportPage(data) }}```
  
  </div>
    
  

</div>

</div>