/
Egov UI framework

Egov UI framework

Egov ui framework for creating screen by writing object configuration

Requirements

  • Node js
  • NPM

Installation & Development

$ git 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: "loginScreen",
  components: {
    loginGrid: {
      uiFramework: "custom-atoms",
      componentPath: "Container",
      children: {
        emptyRow: {
          uiFramework: "custom-atoms",
          componentPath: "Item",
          props: {
            sm: 4
          }
        },
        loginItem: {
          uiFramework: "custom-atoms",
          componentPath: "Item",
          props: {
            sm: 4,
            xs: 12
          },
          children: {
            loginCard: getCommonCardWithHeader(
              {
                loginDiv: {
                  uiFramework: "custom-atoms",
                  componentPath: "Div",
                  props: {
                    className: "text-center"
                  },
                  children: {
                    loginUsername: {
                      uiFramework: "custom-molecules",
                      componentPath: "TextfieldWithIcon",
                      props: {
                        label: "Email",
                        margin: "normal",
                        fullWidth: true,
                        autoFocus: true,
                        required: true,
                        iconObj: {
                          position: "end",
                          iconName: "email"
                        }
                      },
                      required: true,
                      jsonPath: "user.username",
                      pattern: "^([a-zA-Z0-9@.])+$"
                    },
                    loginPassword: {
                      uiFramework: "custom-molecules",
                      componentPath: "TextfieldWithIcon",
                      props: {
                        label: "Password",
                        type: "password",
                        margin: "normal",
                        fullWidth: true,
                        required: true,
                        iconObj: { position: "end", iconName: "lock" }
                      },
                      jsonPath: "user.password",
                      required: true,
                      pattern: "^([a-zA-Z0-9!])+$"
                    },
                    breakOne: {
                      uiFramework: "custom-atoms",
                      componentPath: "Break"
                    },
                    breakTwo: {
                      uiFramework: "custom-atoms",
                      componentPath: "Break"
                    },
                    loginButton: {
                      componentPath: "Button",
                      props: {
                        color: "primary",
                        fullWidth: true
                      },
                      children: {
                        loginButtonText: getLabel({label:"Let's go"})
                      }
                    }
                  }
                }
              },
              {
                loginHeader: {
                  componentPath: "Typography",
                  children: {
                    loginHeaderText: getLabel({label:"Login"})
                  },
                  props: {
                    align: "center",
                    variant: "title",
                    style: {
                      color: "white"
                    }
                  }
                }
              }
            )
          }
        }
      }
    }
  }
};

export default screenConfig;


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:<port-name>/landing/egov-ui-framework/<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"
  }
}
..........................................................................................................................


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: 

ui-frameworkwithin module components (local)framework components
containerscustom-container-localcustom-container
moleculescustom-molecules-localcustom-molecules
atomscustom-atoms-localcustom-atoms


  • 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.


Related content

Configuration definition
Configuration definition
More like this
Guidelines and principles of egov Frontend
Guidelines and principles of egov Frontend
Read with this
How to add new screen configuration in a new module:
How to add new screen configuration in a new module:
More like this
Rainmaker - Localstorage
Rainmaker - Localstorage
Read with this
Component and Component list
Component and Component list
More like this
How to add dynamic drop down for mdms data
How to add dynamic drop down for mdms data
Read with this