> For the complete documentation index, see [llms.txt](https://docs.digit.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.digit.org/platform/guides/developer-guide/ui-developer-guide/pre-defined-screens-in-digit-ui.md). # Pre-defined Screens In DIGIT-UI Steps to add new screens in DIGIT-ui ## Overview This document provides the steps for creating new screens in the DIGIT-UI. ## Steps Creating a screen in DIGIT UI involve simple steps and is classified into 4 different screen - 1. [Create](#create-screen) 2. [View](#view-screen) 3. [Inbox](#inbox-screen) 4. [Search](#search-screen) ### **Create Screen** To create any new screen of the Create type, use the **FormcomposerV2** and transmit the configuration as specified in the [sample.js](https://github.com/jagankumar-egov/DIGIT-OSS/blob/Ui-Dev-Certification/frontend/micro-ui/web/micro-ui-internals/packages/modules/br/src/pages/employee/Sample.js) file. To check the different types of configurations, refer to the [`fieldSelector`](https://github.com/egovernments/DIGIT-OSS/blob/92018d43fb0cdf8929f4a66dc61857af8cdc5140/frontend/micro-ui/web/micro-ui-internals/packages/react-components/src/hoc/FormComposerV2.js#L128) function. ### View Screen To use any view screen, create the hook for initiating API calls and structure the configurations for the View section. * Refer to the integrated screen with ApplicationDetailsTemplate - [ViewProperty.js](https://github.com/egovernments/DIGIT-OSS/blob/master/frontend/micro-ui/web/micro-ui-internals/packages/modules/commonPt/src/pages/pageComponents/ViewProperty.js). * The hook details for the same is mentioned in [useGenericViewProperty](https://github.com/egovernments/DIGIT-OSS/blob/master/frontend/micro-ui/web/micro-ui-internals/packages/libraries/src/hooks/pt/useGenericViewProperty.js).js * The service configuration details are available in [Search.js](https://github.com/egovernments/DIGIT-OSS/blob/master/frontend/micro-ui/web/micro-ui-internals/packages/libraries/src/services/molecules/PT/Search.js) ### Inbox Screen To create any inbox screen, use the **InboxComposer** and add the following configurations: * Main file: [EdcrInbox](https://github.com/egovernments/DIGIT-OSS/blob/master/frontend/micro-ui/web/micro-ui-internals/packages/modules/obps/src/pages/citizen/EdcrInbox/index.js) * Check the [folder](https://github.com/egovernments/DIGIT-OSS/tree/master/frontend/micro-ui/web/micro-ui-internals/packages/modules/obps/src/pages/citizen/EdcrInbox) which contains other configs like filter, table, search, and mobile responsiveness. * The hook for the same is defined in [useEDCRInbox.js](https://github.com/egovernments/DIGIT-OSS/blob/master/frontend/micro-ui/web/micro-ui-internals/packages/libraries/src/hooks/obps/useEDCRInbox.js) * Use the latest [InboxSearchComposer](/platform/guides/developer-guide/ui-developer-guide/pre-defined-screens-in-digit-ui/inbox-search-screen.md) (InboxV2) * Both Inbox and Search screens can be shown based on the input configurations passed to that component - [BillInbox.js](https://github.com/egovernments/DIGIT-Works/blob/master/frontend/micro-ui/web/micro-ui-internals/packages/modules/Expenditure/src/pages/employee/Bills/BillInbox.js) * Configuration are mentioned in [InboxConfig](https://github.com/egovernments/DIGIT-Works/blob/master/frontend/micro-ui/web/micro-ui-internals/packages/modules/Expenditure/src/configs/InboxBillConfig.js) for local reference and it is fetched from the MDMS [BillInboxConfig](https://github.com/egovernments/works-mdms-data/blob/DEV/data/pg/commonMuktaUiConfig/InboxBillConfig.json). ### Search Screen An example of a Search screen is available in [SearchConfig](https://github.com/egovernments/works-mdms-data/blob/DEV/data/pg/commonMuktaUiConfig/SearchBillWMSConfig.json). --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.digit.org/platform/guides/developer-guide/ui-developer-guide/pre-defined-screens-in-digit-ui.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.