Page Comparison

Egov ui framework for creating screen by writing object configuration

Requirements

• Node js
• NPM

Installation & Development

$ npmgit clone https://github.com/muralim4242/egov-ui-framework-boilerplate.git
$ cd egov-ui-framework-boilerplate
$ npm i
$ npm start

Note: We have added default configuration for login, register, dashboard, and advanced dashboard, it will use for you to create a new configuration for the screen.

Usage

1. Go to src/ui-config/screens/specs/ in root of the project.
2. Create a folder for your set of screens. eg:auth.
3. Create a file for screen. eg:login.js
4. Write your configuration.

example code

import {
  getCommonCardWithHeader,
  getLabel
} from "egov-ui-framework/ui-config/screens/specs/utils";

const screenConfig = {
  uiFramework: "material-ui",
  name: "mihyLoginScreenloginScreen",
  components: {
    mihyLoginGridloginGrid: {
      uiFramework: "custom-atoms",
      componentPath: "Container",
      children: {
        mihyEmptyRowemptyRow: {
          uiFramework: "custom-atoms",
          componentPath: "Item",
          props: {
            sm: 4
          }
        },
        mihyLoginItemloginItem: {
          uiFramework: "custom-atoms",
          componentPath: "Item",
          props: {
            sm: 4,
            xs: 12
          },
          children: {
            mihyLoginCardloginCard: getCommonCardWithHeader(
              {
                mihyloginDivloginDiv: {
                  uiFramework: "custom-atoms",
                  componentPath: "Div",
                  props: {
                    className: "text-center"
                  },
                  children: {
                    mihyLoginUsernameloginUsername: {
                      uiFramework: "custom-molecules",
                      componentPath: "TextfieldWithIcon",
                      props: {
                        label: "Email",
                        margin: "normal",
                        fullWidth: true,
                        autoFocus: true,
                        required: true,
                        iconObj: {
                          position: "end",
                          iconName: "email"
                        }
                      },
                      required: true,
                      jsonPath: "bodyuser.mihy.username",
                      pattern: "^([a-zA-Z0-9@.])+$"
                    },
                    mihyLoginPasswordloginPassword: {
                      uiFramework: "custom-molecules",
                      componentPath: "TextfieldWithIcon",
                      props: {
                        label: "Password",
                        type: "password",
                        margin: "normal",
                        fullWidth: true,
                        required: true,
                        iconObj: { position: "end", iconName: "lock" }
                      },
                      jsonPath: "body.mihyuser.password",
                      required: true,
                      pattern: "^([a-zA-Z0-9!])+$"
                    },
                    mihyBreakOnebreakOne: {
                      uiFramework: "custom-atoms",
                      componentPath: "Break"
                    },
                    mihyBreakTwobreakTwo: {
                      uiFramework: "custom-atoms",
                      componentPath: "Break"
                    },
                    mihyLoginButtonloginButton: {
                      componentPath: "Button",
                      props: {
                        color: "primary",
                        fullWidth: true
                      },
                      children: {
                        mihyLoginButtonTextloginButtonText: getLabel({label:"Let's go"})
                      }
                    }
                  }
                }
              },
              {
                mihyLoginHeaderloginHeader: {
                  componentPath: "Typography",
                  children: {
                    mihyLoginHeaderTextloginHeaderText: getLabel({label:"Login"})
                  },
                  props: {
                    align: "center",
                    variant: "title",
                    style: {
                      color: "white"
                    }
                  }
                }
              }
            )
          }
        }
      }
    }
  }
};

export default screenConfig;

1. Save a file, enter a URL in a browser like a bellow,

page with menu

...

How to run the component and manage the routes in the framework?

• There is no need of writing specific routes for each page/component within the framework
• Framework uses a generic routing based on the location of spec file inside the ui-config/screen/specs, Which is completely taken care by the screenInterface component.
• Just hitting the right URL in the browser will run that component, Below is the expected pattern of the URL

page with menu

http://localhost:3000<port-name>/landing/egov-ui-framework/auth/login
<folder-name>/<file-name>
eg:- http://localhost:3000/landing/egov-ui-framework/auth/login

page without menu

http://localhost:<port-name>/egov-ui-framework/<folder-name>/<file-name>
eg:- http://localhost:3000/egov-ui-framework/auth/login

Note: Many components we directly referred from material-UI 

...

library.

example of using material UI components

React way for rendering Material-UI component

import React from 'react';
import Button from '@material-ui/core/Button';

<Button variant="contained" color="primary">
        Primary
</Button>

framework way for rendering the same component in the configuration

......
primaryButton:{
  componentPath:"Button",
  props:{
    variant:"contained",
    color:"primary"
  }
}

......
Version 1.0 feature
1. Basic atoms.
2. Basic molecules.
3. Basic containers.
4. Inbuild localization support.
5. Role based components.
6. Dynamically create objects using json path.
7. Full screen configuraion.
8. Breaking up the configuration into multiple js.
9. Support multiple frameworks.
10.Inbuilt util functions.
11.Inbuilt component and screen interfaces.
Version 2.0 feature
1. Auto submit functionality with configuration.
2. Moving configuration to github based on tenant.
3. Enhancments of atoms, molecules and container.
4. Userfriendly configurations.
5. Removing unused components.
6. Enhancment of multiitem containers.

.................................................................................................................

Rules to write specs for rendering pages/components:

• specs can be written inside any folder on this path "\src\ui-config\screens\specs\".
• below are the usages in specs:

ui-framework options to write in the specs: 

• If Ui-framework is using local components(eg: atoms, molecules, containers), it's mandatory to mention the module name (eg: moduleName: "egov-ui-tradelicence")

File imports to handle both indivisual module app and citizen/employee app.

• each module has a common config file to maintain all the imports in a common way to support both running the app individually and through citizen and employee.
• common config (path: "\src\ui-config\commonConfig")  two configs named remote-component-paths and remote-config-paths to store the paths with respect to the modules.