Customisation in Digit-ui

Owned by JaganKumar
Last updated: Apr 12, 2023
1 min read


Overview

  1. Local setup

  2. Adding/Removing fields

  3. Making Mandatory/Non-mandatory

  4. Writing new forms

  5. Fields changes (Text to Dropdown)


 

Local Setup

digit-ui-internals - frontend/micro-ui/web/micro-ui-internals

  • Meant for the eGov development team to build components and default modules.

  • Contains the following modules:

    • CSS Library

    • UI Components ( react-components)

    • Utils Library: Contains Services, Localization handling, and React Hooks.

    • UI Modules

      • Core - containing login, routing, and global state.

      • PGR

      • FSM

      • PT

      • Payment,

Guidelines

Cloning, Transpiling, Bundling, and Running apps locally:-

  1. Clone the App from the remote repo:  

    1. git clone <Remote URL>

  2. Switch path to  /frontend/micro-ui/web

    1. Run "yarn install"  → to install all required dependencies in the Digit-UI app

    2. Run "yarn dev:start" →  what it does? 

      1. It first builds CSS and sass files for all the modules.

      2. Transpiles all the packages present inside the dev-package folder to the ES5 version and links dependencies.

      3. A separate new window will be opened, we can check the latest changes in that browser.

Adding/Removing fields

Remove a field:

In the MDMS configuration, we can just remove an object and update the mdms file. So it automatically reflects in the UI.

 

Add a new Field:

The addition of a new field can be done by first updating a mdms file, then adding a new component in the customization folder and register in the same component name. The same process is to be followed for the overriding of any component or screen

Making Mandatory/Non-mandatory
Making fields mandatory and non-mandatory can be controlled by MDMS change refer FSM ConfigExample In every config we have an attribute called isMandatory , it can be set as true or false

isMandatory": true,

Writing new forms and Fields changes (Text to Dropdown)
Modifying Any Application details, Hooks, API’s can be done by overriding the existing file.

Example Overriding Component