HMPPS Datahub Platform components Catalogue

Overview

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 from the list.
• bookmark variants from the list.

This component supports the HMPPS Datahub platform functionality by providing a unified way of listing and navigating reports

When to use

Use this component when you have integrated the HMPPS Datahub plaform into your service and want to:

• View a list of your reports
• be able to request those reports.
• bookmark a report from the list.

When not to use

Do not use this component if you want more control over how your report listing should look.

How to use

This component requires you have followed the async reporting integration steps

Its recommended to use the Catalogue utility helper to initialise the data needed to populate the list with the correct layout and feature set. Import the utility and initialise the data in the route before rendering your page:

// 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, req, services)
    res.render('reports-catalogue.njk', {
      catalogue
    })
  })
}

export default routes

This will give you the arguments to simply apply as components arguments in the HTML:

{ dprCatalogue(catalogue) }