1 of 3

Employee Module Setup

Employee view of the module

Now that we are done with setting up the citizen module, the next step is to build the employee portal on top of the DIGIT UI for the Birth Registration module. The employee portal is designed to support multiple workflows like verifying the information and approving or rejecting the registered details of citizens.

Build the employee portal for a module - Steps

The guide provides examples and illustrations on how to set up and integrate the most commonly used DIGIT UI libraries.

Refer to the sample screens here.

Write Employee Module Code

Introduction

This guide provides a step-by-step approach to creating an employee module screen with essential functionality. Learn how to set up the module, create a sample card, and integrate links for individual search and create pages. Following these steps ensures modularity and reusability in your code, making it easier to manage and scale.

Steps

Create a Sample card within the Sample module. This card will display links to pages within the module, such as Individual Create and Individual Search.

Create a SampleCard.js file under the following path:

Hurray! Now you can see the Sample Card with 2 links on the screen as visible in the below screenshot:

Nothing is rendered when clicking on the label. We need to set up the routes to fix this.

Set Up Routes

Routing in an application is essential for navigation and managing different views or pages based on the URL.
Utilize a new file, index.js, to add all the routes for navigation. In the index.js file, we can create an App component where all the routes are defined. Then, in the module.js file, we import this App component as EmployeeApp and use it to render the screens within the module. This approach helps to organize the routing logic effectively, keeping the module.js file focused on the module's specific functionality.

Create the index.js under the following path: micro-ui-internals/packages/modules/sample/src/pages/employee/index.js

In index.js, add the private route specifying the path and component name to render upon accessing that route. Ensure all components are correctly imported into this file.

After adding routes in index.js, call them from module.js. The module.js file acts as the entry point, initializing components, hooks, and configurations. It renders the EmployeeApp component, which contains the routes and ensures the correct page is displayed.

In the Module.js add the following:

The Sample Card is now visible with routes to the Respective Pages.

Registering Components

After registering all components, links and module code we need to enable it in two places:

In micro-ui/web/src/App.js, import the SampleModule, initSampleComponents, and enable the Sample module. Add App.js file under the following path: micro-ui/web/src/App.js

In index.js, import SampleModule, initialize initSampleComponents, and enable the Sample module. Create the index.js file under the following path: micro-ui-internals/example/src/index.js

Create Form - Create Screen

Introduction

The guide walks you through the steps required to create and integrate a form within a micro-frontend architecture using the DIGIT framework. You will learn how to set up the form configuration, create a custom component, and integrate the form with backend APIs.

Steps

Create Application Form

Create a form where users can enter all required information and submit the form.
Update the Index.js file with routes.

Index.js will import FormcomposerV2. Add the heading, label, and form components inside it. Import the configuration file containing the form schema mapping detail (refer to the code below) into the create screen.

import { newConfig } from "../../configs/IndividualCreateConfig";
const configs = newConfig?newConfig:newConfig;

An example of a Create Screen is given below. Create a page IndividualCreate.js under the following path:

/micro-ui-internals/packages/modules/sample/src/pages/employee/IndividualCreate.js

import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { useHistory } from "react-router-dom";
import { FormComposerV2 } from "@egovernments/digit-ui-react-components";
import useCustomAPIMutationHook from "../../hooks/useCustomAPIMutationHook";
import { newConfig } from "../../configs/IndividualCreateConfig";

const IndividualCreate = () => {
  const [toastMessage, setToastMessage] = useState("");
  const tenantId = Digit.ULBService.getCurrentTenantId();
  const { t } = useTranslation();
  const history = useHistory();
  const [gender, setGender] = useState("");
  const reqCreate = {
    url: `/individual/v1/_create`,
    params: {},
    body: {},
    config: {
      enable: false,
    },
  };

  const mutation = useCustomAPIMutationHook(reqCreate);

  const handleGenderChange = (e) => {
    setGender(e.target.value);
  };

  return (
    <div>
      <h1> Create Individual</h1>
      <FormComposerV2
        label={t("Submit")}
        config={newConfig.map((config) => {
          return {
            ...config,


          };
        })}
        defaultValues={{}}
        onSubmit={(data,) => onSubmit(data, )}
        fieldStyle={{ marginRight: 0 }}

      />
        {/* Toast Component */}
        {toastMessage && (
        <div style={{ backgroundColor: "lightblue", padding: "10px", borderRadius: "5px", marginTop: "10px" }}>
          <div>{toastMessage}</div>
        </div>
      )}
    </div>
  );
}

export default IndividualCreate;

Reference for the create screen: IndividualCreate.js

Filling in Config.js

File Creation Path

Create a file named IndividualCreateConfig.js in the following path:

/micro-ui-internals/packages/modules/sample/src/configs/IndividualCreateConfig.js

The configuration file outlines the form's meta-data and structure. The "head" field contains the form heading, while the form's components are placed in the "body" field.

This configuration file is imported into the Create screen.

 export const newConfig = [
    {
   head: "Create Individual",   
    body: [
        {
          inline: true,
          label: "Applicant Name",
          isMandatory: false,
          key: "applicantname",
          type: "text",
          disable: false,
          populators: { name: "applicantname", error: "Required", validation: { pattern: /^[A-Za-z]+$/i } },
        },
        {
          inline: true,
          label: "date of birth",
          isMandatory: false,
          key: "dob",
          type: "date",
          disable: false,
          populators: { name: "dob", error: "Required"},
        },


        {
          isMandatory: true,
          key: "genders",
          type: "dropdown",
          label: "Enter Gender",
          disable: false,
          populators: {
            name: "genders",
            optionsKey: "name",
            error: "required ",
            mdmsConfig: {
              masterName: "GenderType",
              moduleName: "common-masters",
              localePrefix: "COMMON_GENDER",
            },
          },
        },

        {
          label: "Phone number",
          isMandatory: true,
          key: "phno",
          type: "number",
          disable: false,
          populators: { name: "phno", error: "Required", validation: { min: 0, max: 9999999999 } },
        },
      ],
    },

An example of the configuration file is available here: IndividualCreate-Config.js

Custom Component

To meet unique requirements, we can design custom components in our application.
Begin by creating a custom component featuring the necessary specifications. The Panel component displays responsive messages, similar to informational cards. This enables users to display dynamic text.
Create a Panel.js file in the specified path.

micro-ui-internals/packages/modules/sample/src/components/Panel.js

Refer to the code for the panel in the link here - Panel.js
Import the custom component in the Module.js file.

import Panel from "./components/Panel.js";

Add the custom component to the Module.js file

const componentsToRegister = {
  SampleModule,
  SampleCard,
  Panel
};

To include the Panel Component in your configuration file, specify the component name and type as "component". Refer to the code below to find how to do it:

{
  "label": "Panel Name",
  "type": "component",
  "isMandatory": false,
  "key": "panel",
  "component": "Panel",
  "customProps": {
    "module": "HCM"
  },
    "populators": {
      "name": "panel",
      "error": "sample error message for panel"
    },
    "validation": {
      "min": 1,   
      "max": 10 
    }
}

Enable Module in the UI framework

Click on http://localhost:3000/digit-ui/employee to see the UI.
Access the create form screen by navigating to the URL below.

/sample/create-individual

The screen is similar to the image below, illustrating the Create Form.

Integration with Backend API

We have completed the UI for the Employee module. Now, let's integrate it with the backend API.

Hooks We will implement custom hooks in our code to handle data transfers to the backend. These hooks will make API calls and format the responses accordingly. Refer to the link - Common Hooks

After setting up the backend service, we will use hooks or a service to send data to the backend upon form submission.

This On Submit function is added to the Create screen.

    const onSubmit = async(data) => {
    console.log(data, "data");
    setToastMessage("Form submitted successfully!");
    await mutation.mutate(
      {
        url: `/individual/v1/_create`,
        params: { tenantId: "pg.citya" },
        body: {
          Individual: {
            tenantId: "pg.citya",
            name: {
              givenName: data.applicantname,
            },
            dateOfBirth: null,
            gender: data.genders.code,
            mobileNumber: data.phno,
            address: [
              {
                tenantId: "pg.citya",
                pincode: data.pincode,
                city: data.city,
                street: data.street,
                doorNo: data.doorno,
                "locality":
                {
                  "code" : data.locality.code,
                },
                landmark: data.landmark,
                "type": "PERMANENT"
              },
            ],
            identifiers: null,
            skills: [
                {
                    "type": "DRIVING",
                    "level": "UNSKILLED"
                }
            ],
            "photograph": null,
            additionalFields: {
                "fields": [
                    {
                        "key": "EMPLOYER",
                        "value": "ULB"
                    }
                ]
            },
            isSystemUser: null,
            userDetails: {
                "username": "8821243212",
                "tenantId": "pg.citya",
                "roles": [
                    {
                        "code": "SANITATION_WORKER",
                        "tenantId": "pg.citya"
                    }
                ],
                "type": "CITIZEN"
            },
        },
      },
        config: {
          enable: true,
        },
      },
    );

    const configs = newConfig;

  };

Refer to the file here - IndividualCreate.js Once the integration is complete the data is saved into the database.

Create Form - Create Screen

Introduction

Steps

Create Application Form

Create a form where users can enter all required information and submit the form.
Update the Index.js file with routes.

Index.js will import FormcomposerV2. Add the heading, label, and form components inside it. Import the configuration file containing the form schema mapping detail (refer to the code below) into the create screen.

import { newConfig } from "../../configs/IndividualCreateConfig";
const configs = newConfig?newConfig:newConfig;

An example of a Create Screen is given below. Create a page IndividualCreate.js under the following path:

/micro-ui-internals/packages/modules/sample/src/pages/employee/IndividualCreate.js

import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { useHistory } from "react-router-dom";
import { FormComposerV2 } from "@egovernments/digit-ui-react-components";
import useCustomAPIMutationHook from "../../hooks/useCustomAPIMutationHook";
import { newConfig } from "../../configs/IndividualCreateConfig";

const IndividualCreate = () => {
  const [toastMessage, setToastMessage] = useState("");
  const tenantId = Digit.ULBService.getCurrentTenantId();
  const { t } = useTranslation();
  const history = useHistory();
  const [gender, setGender] = useState("");
  const reqCreate = {
    url: `/individual/v1/_create`,
    params: {},
    body: {},
    config: {
      enable: false,
    },
  };

  const mutation = useCustomAPIMutationHook(reqCreate);

  const handleGenderChange = (e) => {
    setGender(e.target.value);
  };

  return (
    <div>
      <h1> Create Individual</h1>
      <FormComposerV2
        label={t("Submit")}
        config={newConfig.map((config) => {
          return {
            ...config,


          };
        })}
        defaultValues={{}}
        onSubmit={(data,) => onSubmit(data, )}
        fieldStyle={{ marginRight: 0 }}

      />
        {/* Toast Component */}
        {toastMessage && (
        <div style={{ backgroundColor: "lightblue", padding: "10px", borderRadius: "5px", marginTop: "10px" }}>
          <div>{toastMessage}</div>
        </div>
      )}
    </div>
  );
}

export default IndividualCreate;

Reference for the create screen: IndividualCreate.js

Filling in Config.js

File Creation Path

Create a file named IndividualCreateConfig.js in the following path:

/micro-ui-internals/packages/modules/sample/src/configs/IndividualCreateConfig.js

The configuration file outlines the form's meta-data and structure. The "head" field contains the form heading, while the form's components are placed in the "body" field.

This configuration file is imported into the Create screen.

 export const newConfig = [
    {
   head: "Create Individual",   
    body: [
        {
          inline: true,
          label: "Applicant Name",
          isMandatory: false,
          key: "applicantname",
          type: "text",
          disable: false,
          populators: { name: "applicantname", error: "Required", validation: { pattern: /^[A-Za-z]+$/i } },
        },
        {
          inline: true,
          label: "date of birth",
          isMandatory: false,
          key: "dob",
          type: "date",
          disable: false,
          populators: { name: "dob", error: "Required"},
        },


        {
          isMandatory: true,
          key: "genders",
          type: "dropdown",
          label: "Enter Gender",
          disable: false,
          populators: {
            name: "genders",
            optionsKey: "name",
            error: "required ",
            mdmsConfig: {
              masterName: "GenderType",
              moduleName: "common-masters",
              localePrefix: "COMMON_GENDER",
            },
          },
        },

        {
          label: "Phone number",
          isMandatory: true,
          key: "phno",
          type: "number",
          disable: false,
          populators: { name: "phno", error: "Required", validation: { min: 0, max: 9999999999 } },
        },
      ],
    },

An example of the configuration file is available here: IndividualCreate-Config.js

Custom Component

To meet unique requirements, we can design custom components in our application.
Begin by creating a custom component featuring the necessary specifications. The Panel component displays responsive messages, similar to informational cards. This enables users to display dynamic text.
Create a Panel.js file in the specified path.

micro-ui-internals/packages/modules/sample/src/components/Panel.js

Refer to the code for the panel in the link here - Panel.js
Import the custom component in the Module.js file.

import Panel from "./components/Panel.js";

Add the custom component to the Module.js file

const componentsToRegister = {
  SampleModule,
  SampleCard,
  Panel
};

To include the Panel Component in your configuration file, specify the component name and type as "component". Refer to the code below to find how to do it:

{
  "label": "Panel Name",
  "type": "component",
  "isMandatory": false,
  "key": "panel",
  "component": "Panel",
  "customProps": {
    "module": "HCM"
  },
    "populators": {
      "name": "panel",
      "error": "sample error message for panel"
    },
    "validation": {
      "min": 1,   
      "max": 10 
    }
}

Enable Module in the UI framework

Click on http://localhost:3000/digit-ui/employee to see the UI.
Access the create form screen by navigating to the URL below.

/sample/create-individual

The screen is similar to the image below, illustrating the Create Form.

Integration with Backend API

We have completed the UI for the Employee module. Now, let's integrate it with the backend API.

Hooks We will implement custom hooks in our code to handle data transfers to the backend. These hooks will make API calls and format the responses accordingly. Refer to the link - Common Hooks

After setting up the backend service, we will use hooks or a service to send data to the backend upon form submission.

This On Submit function is added to the Create screen.

    const onSubmit = async(data) => {
    console.log(data, "data");
    setToastMessage("Form submitted successfully!");
    await mutation.mutate(
      {
        url: `/individual/v1/_create`,
        params: { tenantId: "pg.citya" },
        body: {
          Individual: {
            tenantId: "pg.citya",
            name: {
              givenName: data.applicantname,
            },
            dateOfBirth: null,
            gender: data.genders.code,
            mobileNumber: data.phno,
            address: [
              {
                tenantId: "pg.citya",
                pincode: data.pincode,
                city: data.city,
                street: data.street,
                doorNo: data.doorno,
                "locality":
                {
                  "code" : data.locality.code,
                },
                landmark: data.landmark,
                "type": "PERMANENT"
              },
            ],
            identifiers: null,
            skills: [
                {
                    "type": "DRIVING",
                    "level": "UNSKILLED"
                }
            ],
            "photograph": null,
            additionalFields: {
                "fields": [
                    {
                        "key": "EMPLOYER",
                        "value": "ULB"
                    }
                ]
            },
            isSystemUser: null,
            userDetails: {
                "username": "8821243212",
                "tenantId": "pg.citya",
                "roles": [
                    {
                        "code": "SANITATION_WORKER",
                        "tenantId": "pg.citya"
                    }
                ],
                "type": "CITIZEN"
            },
        },
      },
        config: {
          enable: true,
        },
      },
    );

    const configs = newConfig;

  };

Refer to the file here - IndividualCreate.js Once the integration is complete the data is saved into the database.

Write Employee Module Code

Introduction

Steps

Create a Sample card within the Sample module. This card will display links to pages within the module, such as Individual Create and Individual Search.

Create a SampleCard.js file under the following path:

Refer to the file here:

const componentsToRegister = {
  SampleModule,
  SampleCard,
};

Hurray! Now you can see the Sample Card with 2 links on the screen as visible in the below screenshot:

Nothing is rendered when clicking on the label. We need to set up the routes to fix this.

Set Up Routes

Routing in an application is essential for navigation and managing different views or pages based on the URL.
Utilize a new file, index.js, to add all the routes for navigation. In the index.js file, we can create an App component where all the routes are defined. Then, in the module.js file, we import this App component as EmployeeApp and use it to render the screens within the module. This approach helps to organize the routing logic effectively, keeping the module.js file focused on the module's specific functionality.

Create the index.js under the following path: micro-ui-internals/packages/modules/sample/src/pages/employee/index.js

In index.js, add the private route specifying the path and component name to render upon accessing that route. Ensure all components are correctly imported into this file.

const App = ({ path, stateCode, userType, tenants }) => {
  return (
        <PrivateRoute path={`${path}/create-individual`} component={() => <IndividualCreate />} />
        <PrivateRoute path={`${path}/search-individual`} component={() => <IndividualSearch></IndividualSearch>} />
  );
};

export default App;

Reference for Routing and index.js file is available here:

After adding routes in index.js, call them from module.js. The module.js file acts as the entry point, initializing components, hooks, and configurations. It renders the EmployeeApp component, which contains the routes and ensures the correct page is displayed.

In the Module.js add the following:

import { default as EmployeeApp } from "./pages/employee";

if (isLoading) {
    return <Loader />;
  }
  return <EmployeeApp path={path} stateCode={stateCode} userType={userType} tenants={tenants} />;
};

The Sample Card is now visible with routes to the Respective Pages.
One link is for the Create Individual screen, and the other is for the Individual Search. You can view the code for the Create screen or set up the Create page by referring to the link here -

Registering Components

After registering all components, links and module code we need to enable it in two places:

In micro-ui/web/src/App.js, import the SampleModule, initSampleComponents, and enable the Sample module. Add App.js file under the following path: micro-ui/web/src/App.js

const enabledModules = [
  "sample"
];

const moduleReducers = (initData) => ({
  initData,
});

const initDigitUI = () => {
  window.Digit.ComponentRegistryService.setupRegistry({});
  window.Digit.Customizations = {
    PGR: {},
    commonUiConfig: UICustomizations,
  };
  initSampleComponents();
};

initLibraries().then(() => {
  initDigitUI();
});

The reference for the App.js file is available here:

In index.js, import SampleModule, initialize initSampleComponents, and enable the Sample module. Create the index.js file under the following path: micro-ui-internals/example/src/index.js

 const enabledModules = [
  "Sample"
];

const initDigitUI = () => {
  window.contextPath = window?.globalConfigs?.getConfig("CONTEXT_PATH") || "digit-ui";
  window.Digit.Customizations = {
    commonUiConfig: UICustomizations
  };
  initSampleComponents();

Reference for the Index.js file is available here: