Configuration definition

We will have a configuration way to create the screen. Please find the below-detailed definition.

const screenConfig = {
   "uiFramework":"material-ui",
   "name":"mihyLoginScreen",
   "components":{
      "mihyLoginGrid":{
         "uiFramework":"custom-atoms",
         "componentPath":"Container",
         "children":{
            "mihyLoginUsername":{
               "uiFramework":"custom-molecules",
               "componentPath":"TextfieldWithIcon",
               "props":{
                  "label":"Email",
                  "fullWidth":true,
                  "required":true,
                  "iconObj":{
                     "position":"end",
                     "iconName":"email"
                  }
               },
               "required":true,
               "jsonPath":"body.mihy.username",
               "pattern":"^([a-zA-Z0-9@.])+$"
            }
         }
      }
   }
};

export default screenConfig;

Here,

screenConfig - This is the object it will contain screen configuration.
uiFramework - This will contain the name of the UI framework, anywhere in the component definition if we miss the UI framework property it will fallback to the root level value mentioned in the UI framework.

ex:- uiFramework:”material-ui”

note: Currently we are having only material UI component support, but framework will support new UI framework too.

3. name - This will contain the name of the screen, the same name will be created in the redux for storing this configuration.

4. components - This is the object it will have list of components.

ex:-

components: {
  <component-id>:{
    //component defination
  },
  <component-id>:{
    //component defination
  },
  .
  .
  .
}

5. mihyLoginGrid - Id of the component.

1.uiFramework- Type of the component.

values: -

a. custom-atoms

b. custom-molecules

c. custom-containers

d. custom-atoms

e. custom-molecules

f. custom-containers

2. componentPath - Name of the component present in the egov-ui-framework, local module, and Material UI.

ex: - TextField, Container, Item, Card, etc.

3. props: It is the attributes passed to the component.

a. label- the label of the text field.

b. fullWidth- component will take the full width of the parent element.

c. required - showing star.

d. iconObj - Icon definition.

4. required: Making a field mandatory.

5. jsonPath: the path where we store the value.

6. pattern: pattern for the field.