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 



Customizing CSS in Digit UI