Mandatory Exercises

Mandatory Assignment 3

1
2

Step 1: Complete the getting started guide

Read the Getting started with DHIS2 development. The rest of the assignment will build on the application you created in this guide.

Step 2: Create a "Datasets" tab

Create a new component called Datasets and then modify your App.js and Navigation.js components so that when a user clicks on the Datasets tab they are shown this component.

Step 3: Fetch the data

We want to retrieve all dataSets from the API. You can retrieve this by either of the options:

Option 1: Using the API test tool:

  • We want to disable paging. Set the Paging parameter to not use paging
  • Set the Fields parameter to only include the fields:
    • id
    • displayName
    • created

Loading API module...

After setting the parameters, click Send and verify the response looks correct. The response JSON should start as following:

{
    "dataSets": [
        {
            "created": "2012-06-10T00:36:10.036",
            "id": "lyLU2wR22tC",
            "displayName": "ART monthly summary"
        }
        ...
    ...

If it is correct, you can click Export to code and copy the code into your React project

Option 2: Manually creating an API query:

The data we want from the DHIS2 API can be queried with this API call api/dataSets?fields=id,displayName,created&paging=false

Create a dataQuery from this API call and add it to your Datasets component. Then use the useDataQuery hook to fetch this data from the DHIS2 instance. Finally console.log() the data that is returned by the API.

Step 4: Create a list of Datasets

Make a list of all the Datasets returned by the previous query with the Menu and MenuItem components from the DHIS2 UI library

Step 5: Create a Table

Modify your Dataset component so that when you click on one of the programs the program details are shown in a table to the right of the Dataset list you just created. Use the Table components from the DHIS2 UI library. Include the displayName, id and creation date.

(Optional) Step 6: Don't waste resources

Modify your Dataset component so that it doesn't request the dataSet resource again every time you click on a MenuItem.

(Optional) Step 7: Modify your Table to show child DataElements instead of Dataset metadata

Modify your table to show all DataElements in a Dataset instead of just the metadata associated to the Dataset.

This API call requests all dataElements in the Population dataset. /api/dataSets/aLpVgfXiz0f?fields=dataSetElements[dataElement[displayName,id,created]]

The following code has implemented a dynamic query and a useEffect that re-runs the useDataQuery when the id changes. This code is not complete and doesn't contain imports and such.

// Data Query with dynamic ID.
const dataQuery = {
    dataSets: {
        resource: 'dataSets',
        id: ({ id }) => id,
        params: {
            fields: ['dataSetElements[dataElement[id, displayName,created]'],
            paging: false,
        },
    },
}


// A component that takes a dataSet ID as a prop.
export function DatasetsTable({ id }) {
    /* 
    A useDataQuery where we pass the id as a variable. Note that we also save the refetch
    which allows us to run the query again at a later point.
    */
    const { loading, error, data, refetch } = useDataQuery(dataQuery, {
        variables: {
            id: id,
        },
    })


    /* 
    You can use useEffect to check if props change (and not just state).
    We check if the ID prop has changed from the last run and then re-run the 
    dataQuery with the new id to get fresh data when a user clicks on a new ID.
    */
    useEffect(() => {
        refetch({ id: id })
    }, [id])


    if (data) {
        return {
            /*Table*/
        }
    }
}
Prev