Integration Guides Integrating the FE

This guide describes the integration process to add FE components and processes into your service.

Pre-requisites

• Integrate the DPR FE Library
• Integrate the DPR platform

Contents

---

Viewing a report

---

Request or load report via href

Async reports

<h1>My Async reports list</h1>

<a href="/dpr/request-report/report/report-id-1/variant-id-1-1/filters">Async report 1</a>
<a href="/dpr/request-report/report/report-id-1/variant-id-1-2/filters">Async report 2</a>
<a href="/dpr/request-report/report/report-id-2/variant-id-2-1/filters">Async report 3</a>

See async routes docs for route structure

Sync reports

<h1>My Sync reports list</h1>

<a href="/dpr/view-report/sync/report/report-id-1/variant-id-1-1/load-report">Sync report 1</a>
<a href="/dpr/view-report/sync/report/report-id-1/variant-id-1-2/load-report">Sync report 2</a>
<a href="/dpr/view-report/sync/report/report-id-2/variant-id-2-1/load-report">Sync report 3</a

See sync routes docs for route structure

---

Optional components

---

Report Catalogue component

This component provides a unified way of listing and navigating reports

The catalogue component is used to:

• view report variants in a list.
• view report information such as product, variant name, and description in the list.
• filter the list columns by string.
• request variants.
• bookmark variants.

Initialise the components render data

Initialise the component with the required data using the component utility helper and pass it to the res.render function.

// server/routes/index.ts
import { initCatalogue } from '@ministryofjustice/hmpps-digital-prison-reporting-frontend/catalogueUtils'

export function routes(services: Services): Router {
  ...
  router.get('/path/to/catalogue', (req, res) => {
    const catalogue = await initCatalogue({ res, services })
    res.render('reports-catalogue.njk', {
      catalogue
    })
  })
}
export default routes

Add the component to your HTML

// reports-catalogue.njk
{ from "components/_catalogue/catalogue/view.njk" import dprCatalogue }

{ dprCatalogue(catalogue) }

See Catalogue component for usage and examples.

---

User reports list Component

This component is used to visualise and enable users to keep track of all requests, bookmarks and recently viewed reports so you can quickly navigate around the embedded DPR platform.

It is responsible for:

• Listing requested reports
• Listing recently viewed reports
• Listing bookmarks
• Polling the status of a requested.

Initialise the lists render data

Initialise the component with the required data using the component utility helper:

// server/routes/index.ts

import { initUserReports } from '@ministryofjustice/hmpps-digital-prison-reporting-frontend/userReportsListUtils'


export function routes(services: Services): Router {

  ...

  router.get('/path/to/requested/reports/list/', (req, res) => {

    const userReportsLists = await initUserReports({ res, req, services })

    res.render('requested-reports.njk', {
      title: 'DPR test site',
      userReportsLists
    })
  })
}

export default routes

Add the component to your HTML

{ from "@ministryofjustice/hmpps-digital-prison-reporting-frontend/dpr/components/user-reports/view.njk" import dprUserReports }

{ dprUserReports(userReportsLists) }

See Reports List component for usage and examples.

---