Module.js

Overview

The next step is to register SampleModule in module.js, the module's entry file. To demonstrate rendering, display "Sample Module" using a simple <div> element within the SampleModule component. This creates a basic screen setup for the module, which can be customized or expanded as needed.

Steps

Add the below code in the Module.js file which is already created.

import { Loader} from "@egovernments/digit-ui-react-components";
import React from "react";

export const SampleModule = ({ stateCode, userType, tenants }) => {
  const tenantId = Digit.ULBService.getCurrentTenantId();
  const moduleCode = ["sample", "common","workflow"];
  const language = Digit.StoreData.getCurrentLanguage();
  const { isLoading, data: store } = Digit.Services.useStore({
    stateCode,
    moduleCode,
    language,
  });

if (isLoading) {
    return <Loader />;
  }
  return ( <Switch>
  <AppContainer className="ground-container">
           <div>Sample Module </div> 

  </AppContainer>
  </Switch>)
  
const componentsToRegister = {
  SampleModule,
};
export const initSampleComponents = () => {
  overrideHooks();
  updateCustomConfigs();
  Object.entries(componentsToRegister).forEach(([key, value]) => {
    Digit.ComponentRegistryService.setComponent(key, value);
  });
};

• Initialize the module's custom hooks, configurations, and register components using initSampleComponents() here.

Refer to the file here: Module.js

Linking the newly created module in Main App

• After creating the module code we need to enable it in two places:

1. For Deployment In app.js we import the SampleModule, initSampleComponents, and enable the Sample module. Add the App.js file in 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();
});

Reference for the App.js file: App.js

1. For Local development In index.js, import the SampleModule, 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: Index.js

• If there is a local server running, make sure to stop it. Restart by running yarn install followed by yarn start at the micro-ui-internals level.

Hurray! Now, the screen is displayed below on visiting the given URL:

http://localhost:3000/digit-ui/employee/sample

Refer to the below sections for a deeper understanding

Reusable Components

Reusable Hooks

Employee Module Setup