Enable PGR

Modules are enabled by MDMS config at https://github.com/egovernments/egov-mdms-data/blob/DEV/data/pb/tenant/citymodule.json

Create a new branch for the state if already doesn’t exist from the master of repo https://github.com/egovernments/digit-ui.

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

We export only the init function of the module to take care of all the initializations.

import { PGRModule, PGRLinks, PGRReducers } from "@egovernments/digit-ui-module-pgr";

const enabledModules = ["PGR"];
window.Digit.ComponentRegistryService.setupRegistry({
  PGRLinks,
  PGRModule,
});

Changing CSS

Refer: DIGIT UI: Implementation - Development Guidelines & FAQs | Changing CSS

Customizing fields in a form

First, add any new component created in the registry,

Digit.ComponentRegistryService.setupRegistry({
  SelectName: SelectName
});

Complaint form - Digit.Customizations.PGR.complaintConfig

Default config is available at default complaintConfig

Create a config similar to the following

export const config = {
  routes: {
    "complaint-type": {
      nextStep: "pincode",
    },
    landmark: {
      nextStep: "apartment",
    },
    apartment: {
      component: "SelectName",
      texts: {
        header: "Apartment or Society",
        cardText: "CS_COMPLAINT_SUBTYPE_TEXT",
        submitBarLabel: "PT_COMMONS_NEXT",
      },
      inputs: [
        {
          label: "Apartment",
          type: "text",
          name: "additionalDetails.apartment",
          validation: {
            minLength: 6,
            maxLength: 7,
          },
          error: "CORE_COMMON_PINCODE_INVALID",
        },
      ],
      nextStep: "upload-photos",
    },
  },
};

Any new field should be part of additionalDetails

Customizing views

Complaint details table on the details page of any complaint. - Digit.Customizations.PGR.getComplaintDetailsTableRows

The function has the following params available passed by callee:

id: complaint id
service: complaint response object
role: currently logged in user role CITIZEN or EMPLOYEE
t: function used for translation

FAQ

In addition to any FAQs of the main implementation document.

eGovernments Product Engineering

PGR: UI Implementation - Guidelines & FAQs

Enable PGR

Changing CSS

Customizing fields in a form

Customizing views

FAQ