How to add new screen configuration in a new module:
We have added default configuration for login, register it will use for you to create a new configuration for the screen.
Usage:
Go to dev-packages/egov-wms/src/ui-config/screens/specs/ in the root of the project.
Create a folder for your set of screens. Eg: auth.
Create a file for the screen. Eg:login.js
Write your configuration.
Example code:
import {
getCommonCardWithHeader,
getLabel
} from "egov-ui-framework/ui-config/screens/specs/utils";
const screenConfig = {
uiFramework: "material-ui",
name: "mihyLoginScreen",
components: {
mihyLoginGrid: {
uiFramework: "custom-atoms",
componentPath: "Container",
children: {
mihyEmptyRow: {
uiFramework: "custom-atoms",
componentPath: "Item",
props: {
sm: 4
}
},mihyLoginItem: {
uiFramework: "custom-atoms",
componentPath: "Item",
props: {
sm: 4,
xs: 12
},
children: {
mihyLoginCard: getCommonCardWithHeader(
{
mihyloginDiv: {
uiFramework: "custom-atoms",
componentPath: "Div",
props: {
className: "text-center"
},
children: {
mihyLoginUsername: {
uiFramework: "custom-molecules",
componentPath: "TextfieldWithIcon",
props: {
label: "Email",
margin: "normal",
fullWidth: true,
autoFocus: true,
required: true,
iconObj: {
position: "end",
iconName: "email"
}
},
required: true,
jsonPath: "body.mihy.username",
pattern: "^([a-zA-Z0-9@.])+$"
},
mihyLoginPassword: {
uiFramework: "custom-molecules",
componentPath: "TextfieldWithIcon",
props: {
label: "Password",
type: "password",
margin: "normal",
fullWidth: true,
required: true,
iconObj: { position: "end", iconName: "lock" }
},
jsonPath: "body.mihy.password",
required: true,
pattern: "^([a-zA-Z0-9!])+$"
},
mihyBreakOne: {
uiFramework: "custom-atoms",
componentPath: "Break"
},
mihyBreakTwo: {
uiFramework: "custom-atoms",
componentPath: "Break"
},
mihyLoginButton: {
componentPath: "Button",
props: {
color: "primary",
fullWidth: true
},
children: {
mihyLoginButtonText: getLabel({label:"Let's go"})
}
}
}
}
},
{
mihyLoginHeader: {
componentPath: "Typography",
children: {
mihyLoginHeaderText: getLabel({label:"Login"})
},
props: {
align: "center",
variant: "title",
style: {
color: "white"
}
}
}
}
)
}
}
}
}
}
};
export default screenConfig;
5. Save a file, enter a URL in a browser like a bellow,
6. Go to dev-packages/egov-wms and run below command for running it independently.
npm start7. If you are running a separate module :
http://localhost:3000/egov-ui-framework/egov-wms/login8. If you are running in employee module:
example of using material UI components(https://material-ui.com/)
React way for rendering Material-UI component
EGov way for rendering the same component in the configuration
Inbuilt Screens:
Login
Register
