Overview

This document describes how to publish CSS if there is any CSS Customization/changes.

While Customizing, if any changes are made In the CSS folder it has to be compiled and published to npm.

Currently, the CSS was published in npm as @egovernments/digit-ui-works-css Please check this NPM link works-css.

So if any changes are made to the CSS folder locally have to be published in different Organisations and in the same or different package name.

ie as @xyz/digit-ui-works-css and version as 1.0.0

then following changes has to be made in the code to reflect in the digit-ui

index.html file location

frontend/micro-ui/web/public/index.html

style sheet link has to be updated as follow,

<link rel="stylesheet" href="https://unpkg.com/@xyz/digit-ui-works-css@1.0.0/dist/index.css"/>

Use Either of the Following commands to publish the CSS

• In the frontend/micro-ui/web/micro-ui-internals folder run yarn run publish:css or

• In the frontend/micro-ui/web/micro-ui-internals/packages/css folder run yarn run publish --access public

Reference Doc for Publishing any package to npm

Overview

This component is used to render file upload UI based on the configuration passed for each module.

Upload File Component

It has a title, information banner with a relevant message, document name, and corresponding file input to upload doc. All these details can be configured via MDMS.

MDMS Configurations

This component fetches below MDMS configuration by filtering modules to render the relevant UI.

File Upload Config

How to use the component?

1. If a new module is being added then the corresponding config should be updated in MDMS before using this component in the below format. (refer to Project module config below)

{
"module": "Project",
            "allowedFileTypes": ["pdf","doc","docx","xlsx","xls","jpeg","jpg","png"],
            "maxSizeInMB": 5,
            "bannerLabel": "PROJECT_BANNER",
           "documents": [
        {
          "code": "PROJECT_PROPOSAL",
          "name" : "noSubProject_doc_project_proposal",
          "active": true,
          "isMandatory": false,
          "showTextInput" : false,
          "allowedFileTypes": ["pdf","doc","docx","xlsx","xls","jpeg","jpg","png"],
          "maxSizeInMB": 5,
          "maxFilesAllowed": 1
        }, {}, …
]
}

1. To show this in form, the config with type ‘documentUpload’ needs to be passed to FormComposer. (refer below config)

{
              "type": "documentUpload",
              "withoutLabel": true,
              "module": "Project",
              "error": "WORKS_REQUIRED_ERR",
              "name": "noSubProject_docs",
              "customClass": "",
              "localePrefix": "PROJECT"
            }

1. Once these 2 configs are added this upload component will be displayed in form. It will capture the data in below format on click of submit button which can be manipulated as per API contract for each module

keyName: {
    "noSubProject_doc_others_name": "Other file",
    "noSubProject_doc_project_proposal": [
        [
            "1.5mb.pdf",
            {
                "file": {},
                "fileStoreId": {
                    "fileStoreId": "891f3c71-6e31-4111-b08a-867ce7753ce0",
                    "tenantId": "pg.citya"
                }
            }
        ]
    ],
    "noSubProject_doc_finalized_worklist": [
        [
            "test.jpg",
            {
                "file": {},
                "fileStoreId": {
                    "fileStoreId": "9ea3e0f9-f5ea-4a5c-968f-ca2ec73690b0",
                    "tenantId": "pg.citya"
                }
            }
        ]
    ],
    "noSubProject_doc_feasibility_analysis": [
        [
            "test.png",
            {
                "file": {},
                "fileStoreId": {
                    "fileStoreId": "2df09fb4-8a01-466b-816c-0524393494ec",
                    "tenantId": "pg.citya"
                }
            }
        ]
    ],
    "noSubProject_doc_others": [
        [
            "1.5mb.pdf",
            {
                "file": {},
                "fileStoreId": {
                    "fileStoreId": "4ab45ddd-f1b0-486a-8a70-f20471691b5a",
                    "tenantId": "pg.citya"
                }
            }
        ]
    ]
}

Overview

This page provides the approach details for -

• rendering the Inbox screen or Search screen based on the config

• calling the API dynamically based on API details passed via config

Common Components Used

InboxSearchComposer

This is a container component for inbox and search screens. It consists of 4 children components which can be rendered conditionally.

InboxSearchLinks

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

SearchComponent

This component is used to render search or filter forms with ‘clear’ and ‘search’ buttons.

Results table

This component is used to render a table with searched results.

RenderFormFields

This component is used to render form fields passed in the 'fields' parameter in the config

Hooks Used

To fetch inbox details, ‘useCustomAPIHook’ is used which takes all the API details like URL, query params, body, config etc. from config (defined in MDMS).

Sample MDMS Data For Inbox

Sample MDMS Data For Search

Configure Screens - Steps

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

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 below details.

4. Add search form config which can be used in both 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

5. Add Links config consists of link info, logo to be shown and title. Refer below

6. Add Filter form config which is similar to the search form. Refer below
7. Add Table (Search result) config consists of labels, column data and related jsonpaths to access the data passed. Refer below

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

9. Once the above config is defined, created an index file/ Component in the pages folder. Fetch the config from MDMS and pass it to the inboxSearchComposer component as below

Limitations

• This approach is followed only in Inbox and Search screens currently.

• Only one API can be called dynamically based on given configurations.