---
description: 'Note: These steps are for adding a new report to an existing program'
---

# How to add a new report in an existing program

1. Navigate to the respective program in the client-side code base where the report has to be added.
2. Inside the "pages" folder, create an Angular component named after the report using the following CLI command: `ng g c <report-name>`

<figure><img src="https://720888978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Miy6UN-HyTKGo2Sjcky%2Fuploads%2FBYhke2YMzRX5K94vrt1n%2Fimage.png?alt=media&#x26;token=e96cb17f-768d-4c22-8782-819428c7b4b4" alt=""><figcaption></figcaption></figure>

3. Once the component is created, it will contain four files - `ts`, `spec-ts`, `html`, and `css`.
4. Fill the TypeScript and HTML files with the reference of other programs. You may need to have knowledge about Angular and how functions have been designed.
5. Include this component in the program HTML file to be rendered.
6. Under the same program name, there will be a config folder that contains a configuration file for the entire program (a JSON file).
7. If any filters are required for the specific report, add an object under the "filter" key in the above configuration file which specifies the filter and its values required for the report. You may need Angular knowledge to fill the object with the appropriate structure.

<figure><img src="https://720888978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Miy6UN-HyTKGo2Sjcky%2Fuploads%2F18GCfkTtStxwr3bheVHu%2Fimage.png?alt=media&#x26;token=a27345cf-402d-4954-a6bb-159344563b77" alt=""><figcaption></figcaption></figure>

\
