Enable Engagement

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 { initEngagementComponents } from "@egovernments/digit-ui-module-engagement";

const enabledModules = ["Engagement"];
window.Digit.ComponentRegistryService.setupRegistry({
   initEngagementComponents();
});

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,

egov/DIGIT-Dev/frontend/micro-ui/web/micro-ui-internals/packages/modules/engagement/src/Module.js

const componentsToRegister = {
  EngagementModule,
  EngagementCard,
  EngagementDocSelectULB,
  EnagementDocName,
  EngagementDocCategory,
  EngagementDocDescription,
  EngagementDocUploadDocument,
  NotificationsAndWhatsNew,
  EventsListOnGround,
  EventDetails,
  EventForm,
  MessageForm,
  DocumentList,
  SelectEventGeolocation,
  SelectToDate,
  SurveyList
};

The current config for forms can be found here. We reuse the config for create and edit forms

export const documentsFormConfig = [
  {
    body: [
      {
        type: "form",
        key: "ULB",
        component: "EngagementDocSelectULB",
        withoutLabel: true,
      },
      {
        type: "form",
        key: "documentName",
        component: "EnagementDocName",
        withoutLabel: true,
      },
      {
        type: "form",
        key: "docCategory",
        component: "EngagementDocCategory",
        withoutLabel: true,
      },
      {
        type: "form",
        key: "description",
        component: "EngagementDocDescription",
        withoutLabel: true,
      },
      {
        type: "form",
        key: "document",
        component: "EngagementDocUploadDocument",
        withoutLabel: true,
        inputs: [{ name: "" }],
      },
    ],
  },
];

type: is the input type
key: is the property key that gets populated in formData
component: the component that is to be rendered here. Any component can be created to show here, examples can be seen at documentName, These components are passed following params
- 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.
- error : to access current error object

Customizing views

Use the followings steps to customize the table :

Application details can be customized via defining table columns like this.
The function will be passed following params

id: application id
row : table row data
t: function used for translation

eGovernments Product Engineering

CE : UI Implementation - Guidelines & FAQs

Enable Engagement

Changing CSS

Customizing fields in a form

Customizing views