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:
/micro-ui-internals/packages/modules/sample/src/components/SampleCard.js
const SampleCard = () => {
const { t } = useTranslation();
const propsForModuleCard = {
Icon: <PropertyHouse />,
moduleName: t("Sample"),
kpis: [
],
links: [
{
label: t("Individual Search"),
link: `/${window?.contextPath}/employee/sample/search-individual`,
},
{
label: t("Individual Create"),
link: `/${window?.contextPath}/employee/sample/create-individual`,
},
return <EmployeeModuleCard {...propsForModuleCard} />;
};
export default SampleCard;
Refer to the file here: SampleCard.js
Register the
SampleCard
inside theModule.js
file.
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.
Last updated
Was this helpful?