/
PGR: UI Implementation - Guidelines & FAQs

PGR: UI Implementation - Guidelines & FAQs

Owned by Abhinav Kushwaha
Last updated: Mar 08, 2021 by Sathish P
2 min read

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 https://gist.github.com/abhinav-egov/15ae1d438a8fcacfb36164fbbb49d6a0

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

  1. 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

getComplaintDetailsTableRows: ({ id, service, role, t }) => { if (role === "CITIZEN") { return { CS_COMPLAINT_DETAILS_COMPLAINT_NO: id, CS_COMPLAINT_DETAILS_APPLICATION_STATUS: `CS_COMMON_${service.applicationStatus}`, CS_ADDCOMPLAINT_COMPLAINT_TYPE: `SERVICEDEFS.${complaintType}`, CS_ADDCOMPLAINT_COMPLAINT_SUB_TYPE: `SERVICEDEFS.${service.serviceCode.toUpperCase()}`, CS_COMPLAINT_ADDTIONAL_DETAILS: service.description, CS_COMPLAINT_FILED_DATE: Digit.DateUtils.ConvertTimestampToDate(service.auditDetails.createdTime), ES_CREATECOMPLAINT_ADDRESS: [ service.address.landmark, Digit.Utils.locale.getLocalityCode(service.address.locality, service.tenantId), service.address.city, service.address.pincode, ], }; } return {}; }

 

FAQ

In addition to any FAQs of the main implementation document. 

 

Related content