After Creating the project structure in the module add the required dependency.
Package.Json:-
We need to add or update the module dependency in three places.Micro-ui-internals:-
Now open the micro-ui-internals package.json file and update the dependency. e.g:- If we need to add br module then will add these dependencies.
| Code Block |
|---|
"dev:br": "cd packages/modules/br && yarn start",
"build:br": "cd packages/modules/br && yarn build",
|
...
example:-
Now open the example package.json file and update the dependency. e.g:- If we need to add br module then will add these dependencies.Code Block "@egovernments/digit-ui-module-br":"^1.4.0",
...
Web:-
Now open the Web package.json file and update the dependency. e.g:- If we need to add br module then will add these dependencies.
| Code Block |
|---|
"@egovernments/digit-ui-module-br":"1.5.4", |
...
Routing:-
Now we will see how to add a new screen.Create an index.js (you can give any name) file in a particular module or service as seen below
...
So here in pages ->citizen->create-> index.js, we are adding new screen code whatever we need to render on UI that code we will add. after adding the code will add the route for the create.js file.
...
For Routing will create an index.js file where we mention or add all routes. Above index.js will add a private route so we mention the path and component name which component we need to show or render after entering a specific path or link.
Module.js:-
In Module.js we register the component which components we need to show or render on UI.
e.g:-
| Code Block |
|---|
import { Header, CitizenHomeCard, PTIcon } from "@egovernments/digit-ui-react-components";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { useRouteMatch } from "react-router-dom";
import CitizenApp from "./pages/citizen/index";
import Create from "./pages/citizen/create/index";
import EmployeeApp from "./pages/employee";
import BRCard from "./components/BRCard";
const componentsToRegister = {
BRCreate : Create,
};
export const BRModule = ({ stateCode, userType, tenants }) => {
const { path, url } = useRouteMatch();
const moduleCode = "BR";
const language = Digit.StoreData.getCurrentLanguage();
const { isLoading, data: store } = Digit.Services.useStore({ stateCode, moduleCode, language });
Digit.SessionStorage.set("BR_TENANTS", tenants);
useEffect(()=>userType === "employee"&&Digit.LocalizationService.getLocale({
modules: [`rainmaker-${Digit.ULBService.getCurrentTenantId()}`],
locale: Digit.StoreData.getCurrentLanguage(),
tenantId: Digit.ULBService.getCurrentTenantId()
}),
[]);
if (userType === "employee") {
return <EmployeeApp path={path} url={url} userType={userType} />;
} else return <CitizenApp />;
};
export const BRLinks = ({ matchPath, userType }) => {
const { t } = useTranslation();
// const [params, setParams, clearParams] = Digit.Hooks.useSessionStorage("PT_CREATE_PROPERTY", {});
// useEffect(() => {
// clearParams();
// }, []);
const links = [
{
link: `${matchPath}/birth`,
i18nKey: t("Create_BirthRegistration"),
},
];
return <CitizenHomeCard header={t("BirthRegistration")} links={links} Icon={() => <PTIcon className="fill-path-primary-main" />} />;
};
export const initBRComponents = () => {
Object.entries(componentsToRegister).forEach(([key, value]) => {
Digit.ComponentRegistryService.setComponent(key, value);
});
};
export const BRComponents = {
BRModule,
BRLinks,
};
|
...
So After adding all components to the module.js again we need to enable modules into the web->src-> app.js and in example->src->index.js. there we need to import.
After enabling the module into App.js and index.js routing will work.