# Inbox/Search Screen

## **Overview**

The [Inbox Service](https://docs.digit.org/digit-ui/build/build-and-deploy/pre-defined-screens-in-digit-ui/broken-reference) is an event-based service designed to:

* Fetch pre-aggregated data of municipal services and workflows.
* Perform complex search operations.
* Return applications and workflow data in a paginated manner.
* Provide the total count of entries matching the search criteria.

This page outlines the following:

* Rendering the Inbox or Search screen based on configurations.
* Dynamically calling APIs using details provided in configurations.

## Common Components Used

#### InboxSearchComposer

InboxSearchComposer is a container component for the inbox and search screens. It consists of four child components, which can be rendered conditionally.

<table><thead><tr><th width="260">Prop Name</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td>configs</td><td>Config fetched from MDMS data</td><td></td></tr></tbody></table>

#### InboxSearchLinks

The InboxSearchLinks component is used to render titles and links in the inbox.

<table><thead><tr><th width="213">Prop Name</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td>headerText</td><td>Config fetched from MDMS data</td><td></td></tr><tr><td>links</td><td>Links to navigate to other screens</td><td></td></tr><tr><td>customClass</td><td>Class to update styling</td><td></td></tr><tr><td>logoIcon</td><td>Icon name and class to render in component</td><td></td></tr></tbody></table>

#### SearchComponent

The SearchComponent is used to render search or filter forms. It includes 'clear' and 'search' buttons for user interaction.

<table><thead><tr><th width="209">Prop Name</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td>uiConfig</td><td>Config to render search/filter form</td><td></td></tr><tr><td>header</td><td>Title of form</td><td></td></tr><tr><td>screenType</td><td>Type of parent screen, can be either ‘inbox’ or ‘search’</td><td></td></tr><tr><td>fullConfig</td><td>Entire config of screen which also includes API details</td><td></td></tr></tbody></table>

#### Results table

The Results table component is used to render a table with searched results.

<table><thead><tr><th width="207">Prop Name</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td>config</td><td>Config to render table</td><td></td></tr><tr><td>data</td><td>Search results need to be populated in table</td><td></td></tr><tr><td>isLoading</td><td>Flag to pass to handle loading state</td><td></td></tr><tr><td>isFetching</td><td>Flag to pass to handle loading state</td><td></td></tr><tr><td>fullConfig</td><td>Entire config of screen which also includes API details</td><td></td></tr></tbody></table>

#### RenderFormFields

The RenderFormFields component is used to render form fields specified in the 'fields' parameter of the configuration.

<table><thead><tr><th width="273">Prop Name</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td>fields</td><td>Config to render all form fields</td><td></td></tr><tr><td>control, formData, errors, register, setValue, getValues, setError, clearErrors</td><td>Props to handle all form actions like collectibe data, setting errors, clearing errors etc.</td><td></td></tr><tr><td>apiDetails</td><td>Includes all API details required to fetch data</td><td></td></tr></tbody></table>

### **Hooks Used**

To fetch inbox details, the `useCustomAPIHook` is utilised. This hook takes all necessary API details, such as URL, query parameters, body, and config, from the configuration (defined in MDMS).

{% embed url="<https://github.com/egovernments/DIGIT-Works/blob/develop/frontend/micro-ui/web/micro-ui-internals/packages/libraries/src/hooks/useCustomAPIHook.js>" %}

### Sample MDMS Data For Inbox

{% embed url="<https://github.com/egovernments/works-mdms-data/blob/DEV/data/pb/commonUiConfig/projectInboxConfig.json>" %}

### Sample MDMS Data For Search

{% embed url="<https://github.com/egovernments/works-mdms-data/blob/DEV/data/pb/commonUiConfig/SearchProjectConfig.json>" %}

## Configure Screens - Steps

1. Create a config based on the sections to be displayed on the screen. The basic structure for the Inbox and Search screens is given below.

<figure><img src="https://2796820426-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqv3BfwsgDlxxZoSTquMs%2Fuploads%2Fyo9kq7atZkJvnI5guMDa%2Fimage.png?alt=media&#x26;token=2b0bfbf2-30d6-4d73-8660-0ab8ce27f7f5" alt=""><figcaption><p>base search config</p></figcaption></figure>

<figure><img src="https://2796820426-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqv3BfwsgDlxxZoSTquMs%2Fuploads%2Fo3Djgir0XJuEds0GBT3x%2Fimage.png?alt=media&#x26;token=6c4e0520-ce93-49c7-affe-a8903af3bccf" alt=""><figcaption><p>Base Inbox config</p></figcaption></figure>

2. Based on the flag given for each section, its visibility is controlled. If the ‘show’ flag is true, then the section is visible; else it is hidden.
3. Add API details in the top section. This API will be called via *useCustomAPIHook* and return the data. This consists of the following details.

   <figure><img src="https://2796820426-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqv3BfwsgDlxxZoSTquMs%2Fuploads%2Fy7NyE1aq7ZVgEDDn6RQn%2Fimage.png?alt=media&#x26;token=9513924c-df22-4288-bde1-7524e8b36626" alt=""><figcaption><p>Api details section</p></figcaption></figure>
4. Add search form config which can be used in both the inbox/search screen. It consists of UIconfig containing label info, styling info, default form values, and fields which need to be rendered in the form. Refer below

   <figure><img src="https://2796820426-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqv3BfwsgDlxxZoSTquMs%2Fuploads%2Fe9V6XLnuX8rYyeuShUBE%2Fimage.png?alt=media&#x26;token=26511b72-c77e-435c-b763-ab685a2c8781" alt=""><figcaption><p>search</p></figcaption></figure>
5. Add Links config consists of link info, logo to be shown and title. Refer below

   <figure><img src="https://2796820426-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqv3BfwsgDlxxZoSTquMs%2Fuploads%2FlUQ4BNTYLU8NQja1yVOw%2Fimage.png?alt=media&#x26;token=81649e92-b1e4-4889-aa60-240b3db9251c" alt=""><figcaption><p>Links</p></figcaption></figure>
6. Add a Filter form config, which is similar to the search form. Refer below

   <figure><img src="https://2796820426-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqv3BfwsgDlxxZoSTquMs%2Fuploads%2F94ZWlSgIuIepJ5GHdzdN%2Fimage.png?alt=media&#x26;token=36e0d4f0-95fd-405f-bf52-225b7a0a60a1" alt=""><figcaption><p>Filter section</p></figcaption></figure>
7. Add table (Search result) config consists of labels, column data and related JSON paths to access the data passed. Refer below -

   <figure><img src="https://2796820426-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqv3BfwsgDlxxZoSTquMs%2Fuploads%2FEWoOxGlIlLYCrMFSw2gI%2Fimage.png?alt=media&#x26;token=3d09164b-7cba-4b32-b6d7-c92aef9bbbb8" alt=""><figcaption><p>Results Table</p></figcaption></figure>
8. To add any customisations on query params, request body, table columns or to add any custom validations in forms, related code can be added in the *UICustomisations* file as below

   <figure><img src="https://2796820426-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqv3BfwsgDlxxZoSTquMs%2Fuploads%2F9qDUFyg0g8uWkqu1KSmJ%2Fimage.png?alt=media&#x26;token=219c062c-47ff-44a3-9961-9d2cfed44133" alt=""><figcaption><p>Ui customisations for Search project screen</p></figcaption></figure>
9. Once the above config is defined, create an index file/ Component in the pages folder. Fetch the config from MDMS and pass it to the *inboxSearchComposer* component as below

   <figure><img src="https://2796820426-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqv3BfwsgDlxxZoSTquMs%2Fuploads%2FWt9TslsJcDRuecp4owzG%2Fimage.png?alt=media&#x26;token=88c350ab-ab83-451e-baa5-a0af1c115721" alt=""><figcaption><p>Sample code for project search page</p></figcaption></figure>

## Limitations

* This approach is followed only in the Inbox and Search screens currently.
* Only one API can be called dynamically based on given configurations.

### Usage

To use the latest Inbox search composer, it has to be imported from the React components or Utilities

React components

package

{% embed url="<https://www.npmjs.com/package/@egovernments/digit-ui-react-components/v/1.5.25>" %}

Utilities:

package

{% embed url="<https://www.npmjs.com/package/@egovernments/digit-ui-module-utilities/v/0.0.6>" %}

```jsx
 import { InboxSearchComposer } from "@egovernments/digit-ui-module-utilities";
or 
 import { InboxSearchComposer } from "@egovernments/digit-ui-module-utilities";


    <React.Fragment>
      <Header className="works-header-search">{t(updatedConfig?.label)}</Header>
      <div className="inbox-search-wrapper">
        <InboxSearchComposer configs={updatedConfig}></InboxSearchComposer>
      </div>
    </React.Fragment>
```