Enable FSM

Modules are enabled by MDMS config at https://github.com/egovernments/egov-mdms-data/blob/DEV/data/pb/tenant/citymodule.json , it is done on dev via https://github.com/egovernments/egov-mdms-data/pull/1386

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

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

const enabledModules = ["FSM"];
initFSMComponents();

Adding FSM Card in Old UI

FSM Card can be added to old UI via the following change as per MDMS config https://github.com/egovernments/egov-mdms-data/pull/1563

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. Please make changes in the src/index.css file.

Customizing fields in a form

First, add any new component created in the registry,

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

Application config: The default config can be found at https://github.com/egovernments/egov-mdms-data/blob/DEV/data/pb/FSM/CommonFieldsConfig.json. The config has different items in the application form. The new config, if made, needs to be initialized 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
component: the component that is to be rendered here. Any component can be created to show here, examples can be seen at pageComponents, 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.

Similarly in case of Applicant Details MDMS config is located at https://github.com/egovernments/egov-mdms-data/blob/DEV/data/pb/FSM/PreFieldsConfig.json , and Trip Details MDMS config is located at https://github.com/egovernments/egov-mdms-data/blob/DEV/data/pb/FSM/PostFieldsConfig.json

Customizing views

Use the followings to customizations are available:

Application details can be customized 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

Customizing Inbox Status Filter

Status are filtered and rendered by MDMS config located at https://github.com/egovernments/egov-mdms-data/blob/DEV/data/pb/DIGIT-UI/RoleStatusMapping.json

Following customization are available:

userRole : Role of the logged in user for application of customization
statuses : List of statuses that needs to be shown for the specified user
zeroCheck : Check if total application count for any status is 0 to hide or rearrange the list
fixed : Limits the status filter list to the specified list

FAQ

In addition to any FAQs of the main implementation document.

eGovernments Product Engineering

FSM: UI Implementation - Guidelines & FAQs