Sanitation
PlatformDomainsAcademyDesign SystemFeedback
v1.4
v1.4
  • Introducing Water-Sanitation
  • Water-Sanitation
    • Solution Design
    • Approach
    • Release Notes
      • FSM 1.4 - Technical Release Summary
      • Service Build Update
        • Release Builds for Core
      • MDMS Changes
      • Configuration Updates
      • Test Cases
      • Localisation
      • Impel Release Notes
      • Gate 2 Checklist
      • Workflow Configuration Changes
      • Master Migration Document
      • Driver-Individual Migration Script
  • Water-Sanitation Product Suite
    • Waste Management System
      • Functional Specifications
        • TQM UI
          • How to Enable TQM UI
          • UI: Plant Operator
            • Landing and Home Page
            • Plant-User Mapping
            • Inbox/Update Tests
            • View Past Test Results/Test's Summary Screen
            • Help Section
          • UI: ULB Admin
            • ULB Admin Home Page
            • Inbox/Test Details Screen
            • View Past Test Results
            • Create Adhoc Test
        • TQM UI/UX Audit
      • Faecal Sludge Management (FSM)
        • Features
        • Sanitation Actors & Interactions
        • User Interface Design
        • FSM User Manual
          • FSM Citizen User Manual
          • Employee User Manual
          • Manage Vendor, Sanitation Worker and Vehicle Details
          • DSO User Manual
          • Septage Treatment Plant Operator User Manual
        • Test Cases
        • FSM Functional Specification
          • Sanitation Worker UI
            • FSM Registry
            • Create Sanitation Worker
            • Edit Sanitation Worker
            • Assign Sanitation Workers to FSM Applications
            • Sanitation Worker Details
          • FSM UI Docs
            • FSM Citizen UI
            • FSM Employee UI
            • FSM DSO UI
            • FSM FSTPO UI
          • FSM UI/UX Audit
        • FSM Technical Specification
          • Vehicle Technical Specification
          • Vendor Technical Specification
          • Calculator Technical Specification
        • FSM Release Notes
          • Known Issues List
        • Product Requirement Document
        • Training
        • Sanitation Worker Welfare
          • Vendor Registry
          • FSM Service
          • Sanitation Worker( FSM 1.4) UI/UX Audit
        • FSM-DSS Technical Documentation
        • Enablement toolkits(Assetization) for FSM
          • Getting started with DIGIT
          • Requirements to enable FSM Module in a new evironment
          • Dependency services of the FSM module
          • Data templates for data collection
          • Data loading steps
            • Loading Billing Slab Data
            • Loading Vendor,Vehicle and Driver Data
            • Loading Localisations
            • Plant Mapping of FSTP
            • Creating users for FSM
          • Preparation of MDMS Data for Data Loading
          • SMS Templates for FSM
        • URC Release Notes
          • Steps to Configure URC
        • Garima Release Notes
          • Steps to Configure Garima
        • User Personas
      • Treatment Quality Monitoring (TQM)
        • Features
        • User Stories
          • Treatment Quality Monitoring Dashboard KPIs
        • User Interface Design
        • User Manual
          • Employee User Manual
          • Treatment Plant Operator User Manual
        • TQM Setup
          • User Manual
        • Release Notes
          • Known Issue List
        • Product Requirement Document: Treatment Quality Monitoring (TQM)
        • PQM Technical Specification
        • TQM Impel Checklist & Roll-out Plan
    • Water & Sewerage Connections
    • NalJal
  • Technology
    • Architecture
      • PQM
        • Low Level Design
          • Services
            • PQM Service
            • PQM Anomaly Finder
            • PQM Scheduler
      • FSM
        • Low Level Design
          • Services
            • FSM Service
            • FSM Calculator
          • Registries
            • FSM Vendor Registry
            • FSM Vehicle Registry
    • Source Code
  • Reference Implementations
    • Odisha - SUJOG
      • Functional Customisation
        • Urban-Rural Convergence
        • Garima Implementation
          • User Interface Design
          • Product Requirement Document (PRD)
      • Technical Customisation
      • Technical Specification: Urban-Rural Convergence
      • Standard Operating Procedure (SOP)
      • Program Rollout Plan
      • Implementation Plan
      • Implementation Guide
      • Implementation Checklist
      • TQM Gate 2 Plans & Checklist
  • Setup
    • Setup
      • On AWS
    • Deployment Guide
      • Legacy/Re-Indexing the FSM Data
      • Legacy/Re-Indexing the PQM Data
      • FSM devops setups
      • FSM Calculator devops setup
      • Vendor registry devops setup
      • Vehicle registry devops setup
    • Development Guide
      • Backend Developer Guide
      • UI Developer Guide
    • Configuration
      • TQM
        • PQM Service
        • PQM Anomaly Finder
        • PQM Scheduler
      • FSM
        • FSM Service
        • Vendor Registry
        • Vehicle Registry
        • FSM Calculator
    • Operations Guide
  • COMMUNITY
    • Community Project: Vehicle Tracking
      • Release Notes
        • Service Build Update
          • Release Builds for Core
        • Test Cases
      • Architecture
        • Vehicle Tracking
          • High Level Design
          • Low Level Design
      • User Manuals
        • Employee User Manual
        • Driver User Manual
      • Demo
      • Product Requirement Document (PRD)
      • Deployment Guide
      • Setup
      • Source Code
    • Contribute
    • Issues
Powered by GitBook

All content on this page by eGov Foundation is licensed under a Creative Commons Attribution 4.0 International License.

On this page
  • DIGIT UI Implementaton: Guidelines & FAQs
  • Development Setup
  • Adding or modifying modules
  • Changing CS
  • Customising Fields in a Form
  • FSM UI Implementation: Guidelines & FAQs
  • Enable FSM
  • Changing CSS
  • Customising Fields in a Form
  • Customising Views
  • Customising Inbox Status Filter

Was this helpful?

Export as PDF
  1. Reference Implementations
  2. Odisha - SUJOG

Technical Customisation

Was this helpful?

DIGIT UI Implementaton: Guidelines & FAQs

Development Setup

Repo:

Use the dev branch as the base branch for development.

Clone the repo and start using the following steps:

## install

yarn install

## start dev server

yarn start

Adding or modifying modules

  • Modules are enabled by the MDMS config at.

  • To add and enable any module in the new UI, src/App.js needs to be changed.

  • Till PGR, we used to export the module and links were added to the registry. Now, adding to the registry is part of the modules themselves. We export only the init function of the module to take care of all the initialisations. Going forward, these init functions will have to be called. We will create the init function of PGR as well. These init modules must be called after initLibraries.

Changing CS

CSS classes are published over CDN and can be seen at: https://unpkg.com/@egovernments/digit-ui-css/dist/index.css

Any class can be overwritten. Make changes in the src/index.css file.

Customising Fields in a Form

Add any new component created in the registry,

Digit.ComponentRegistryService.setupRegistry({

SelectName: SelectName

});

  • If API calls are failing, the do the following:

Check src/setupProxy.js for proxy url in dev mode.

  • If API calls are failing with no authorisation token, then do the following:

Create a .env file with following:

REACT_APP_USER_TYPE=

REACT_APP_CITIZEN_TOKEN=a3e5f0a2-4ff0-4680-855e-75051fb3e8f7

REACT_APP_EMPLOYEE_TOKEN=061bad07-c0d5-4200-a74f-ca5ed090cf30

REACT_APP_GRO_TOKEN=43af4c18-6418-4a35-8484-31f0700f465a

REACT_APP_LME_TOKEN=fa9f4184-dc64-495d-bded-31674c71b09e

FSM UI Implementation: Guidelines & FAQs

Enable FSM

It is done on dev via:

Create a new branch for the state if already doesn’t exist from the master of repo:

To add and enable any module in the new UI, src/App.js needs to be changed.

We only export the init function of the module to take care of all the initialisations:

import { initFSMComponents } from "@egovernments/digit-ui-module-fsm";

const enabledModules = ["FSM"];

initFSMComponents();

Changing CSS

CSS classes are published over CDN and can be seen at: https://unpkg.com/@egovernments/digit-ui-css/dist/index.css

Any class can be overwritten. Make changes in the src/index.css file.

Customising Fields in a Form

Add any new component created in the registry,

Digit.ComponentRegistryService.setupRegistry({

SelectName: SelectName});

The config has different items in the application form. The new config, if made, needs to be initialised at Digit.Customizations.FSM.applicationFormConfig

{
  label: "ES_NEW_APPLICATION_PROPERTY_TYPE",
  isMandatory: true,
  type: "component",
  route: "property-type",
  key: "propertyType",
  component: "SelectPropertyType",
  texts: {
    headerCaption: "",
    header: "CS_FILE_APPLICATION_PROPERTY_LABEL",
    cardText: "CS_FILE_APPLICATION_PROPERTY_TEXT",
    submitBarLabel: "CS_COMMON_NEXT",
  },
  nextStep: "property-subtype",
}
  • label: is the employee side label

  • texts: is used for citizen side step form

- t: translate function to be used to convert a key to localized text. e.g., t("CS_CREATECOMPLAINT_MOHALLA")

- config: current step config as shown above

- onSelect: on clicking of next or input, this handled to be called to save the data in the form state

- userType: employee or citizen

- formData: the current form state

Customising Views

Application details can be customised via defining: Digit.Customizations.FSM.getApplicationDetailsTableRows

The function will be passed following params:

  • id: application id

  • service: application response object

  • role: currently logged in user role CITIZEN or EMPLOYEE

  • t: function used for translation

getApplicationDetailsTableRows: ({ id, service, role, t }) => {
    if (role === "CITIZEN") {
      return {
        CS_FSM_APPLICATION_APPLICATION_NO: service.applicationNo,
        CS_FSM_APPLICATION_DETAIL_STATUS: t("CS_COMMON_" + service.applicationStatus),
        ...
      };
    }
    return {};
  }

Customising Inbox Status Filter

Following customisations are available:

  • userRole : Role of the logged in user for application of customisation.

  • statuses : List of statuses that needs to be shown for the specified user.

  • zeroCheck : Check if the total application count for any status is 0 to hide or rearrange the list.

  • fixed : Limits the status filter list to the specified list.

{
        "userRole": "FSM_EDITOR_EMP",
        "statuses": [
            "DSO_REJECTED",
            "ASSING_DSO",
            "CREATED"
        ],
        "zeroCheck" : true,
        "fixed": false
}

Modules are enabled by the MDMS config at: .

.

Application config: The default config can be found at.

component: the component that is to be rendered here. Any component can be created to show here; examples can be seen at, These components are passed following params:

Similarly, in case of Applicant Details, MDMS config is located at:

The Trip Details MDMS config is located at:

Status can be filtered and rendered by MDMS config located at:

https://github.com/egovernments/digit-ui
citymodule.json
https://github.com/egovernments/egov-mdms-data/blob/DEV/data/pb/tenant/citymodule.json
egov-mdms-data: added fsm in citymodule and stateinfo localization moduleCLOSED
egovernments/digit-ui
https://github.com/egovernments/egov-mdms-data/blob/DEV/data/pb/FSM/CommonFieldsConfig.json
pageComponents
https://github.com/egovernments/egov-mdms-data/blob/DEV/data/pb/FSM/PreFieldsConfig.json
https://github.com/egovernments/egov-mdms-data/blob/DEV/data/pb/FSM/PostFieldsConfig.json
https://github.com/egovernments/egov-mdms-data/blob/DEV/data/pb/DIGIT-UI/RoleStatusMapping.json