emerson-dynamic-ui v0.2.3

Getting Started with Emerson Dynamic UI for React

Note: This package is under Development.

Available Scripts

In the project directory, you can run:

npm install emerson-dynamic-ui

Installs the package required to create dynamic UI.

Usage:

 import {DynamicForm} from "emerson-dynamic-ui";

function MyCodeComponent(props) {
  return (
      <DynamicForm
              schema={JsonSchemaFromAPI} handleChange={handleChangeCallback} handleKeyPress={handleKeyPressCallback} handleSubmit={handleSubmitCallback} updateData={DataIfUpdating}
       ></DynamicForm>
  );
}

Props:

schema: "UI Schema in JSON format", 
handleChange: "Function callback(event, Data_Object)", 
handleKeyPress: "Function callback(event, Data_Object)",
handleSubmit: "Function callback(event, Data_Object)",
updateData:"Object to update"

Schema format example:

[
    {
      "group": "Project Details",
      "fields": [
        {
          "type": "text",
          "name": "projectname",
          "label": "Project Name",
          "inputClass": "app-content-text-width",
          "labelClass": "app-content-label",
          "value": "Digital Product Platform Discovery",
          "mutability": "READ"
          "required": true
        },
        {
          "type": "number",
          "name": "lrp",
          "label": "LRP",
          "inputClass": "app-content-text-width",
          "labelClass": "app-content-label",
          "value": "6609"
          "required": true
        },
        {
          "type": "select",
          "name": "critical",
          "label": "Critical",
          "inputClass": "app-content-text-width",
          "labelClass": "app-content-label",
          "mutability": "READa",
          "value": "-1",
          "options": [
            {
              "value": "1",
              "label": "Yes",
              "id": "1"
            },
            {
              "value": "0",
              "label": "No",
              "id": "0"
            }
          ],
          "datasource": {
            "url": ""
          }
        },
        {
          "type": "select",
          "name": "entity",
          "label": "Entity",
          "inputClass": "app-content-text-width",
          "labelClass": "app-content-label",
          "value": "Automation Solutions",
          "options": [],
          "datasource": {
            "url": "http://localhost:5000/entity"
          }
        },
        {
          "type": "select",
          "name": "portfolio_area",
          "label": "Portfolio Area",
          "inputClass": "app-content-text-width",
          "labelClass": "app-content-label",
          "value": "Customer Lifecycle Service",
          "options": [],
          "datasource": {
            "url": "http://localhost:5000/portfolioarea"
          }
        },
        {
          "type": "select",
          "name": "approved",
          "label": "Approved",
          "inputClass": "app-content-text-width",
          "labelClass": "app-content-label",
          "value": "1",
          "options": [
            {
              "value": "1",
              "label": "Yes",
              "id": "1"
            },
            {
              "value": "0",
              "label": "No",
              "id": "0"
            }
          ],
          "datasource": {
            "url": ""
          }
        }
      ]
    },
    {
      "group": "Project Owner Details",
      "fields": [
        {
          "type": "text",
          "name": "designation",
          "label": "Designation",
          "inputClass": "app-content-text-width",
          "labelClass": "app-content-label",
          "value": ""
        },
        {
          "type": "text",
          "name": "email",
          "label": "Email",
          "inputClass": "app-content-text-width",
          "labelClass": "app-content-label",
          "value": ""
        },
        {
          "type": "phone",
          "name": "phone",
          "label": "PO Phone",
          "inputClass": "app-content-text-width",
          "labelClass": "app-content-label"
        },
        {
          "type": "text",
          "name": "address",
          "label": "Address",
          "inputClass": "app-content-text-width",
          "labelClass": "app-content-label",
          "value": ""
        },
        {
          "type": "select",
          "name": "country",
          "label": "Country",
          "inputClass": "app-content-text-width",
          "labelClass": "app-content-label",
          "value": "America",
          "options": [],
          "datasource": {
            "url": "http://localhost:5000/countries"
          }
        },
        {
          "type": "select",
          "name": "state",
          "label": "State",
          "inputClass": "app-content-text-width",
          "labelClass": "app-content-label",
          "value": "California",
          "options": [],
          "datasource": {
            "url": "http://localhost:5000/states"
          },
          "rules": {
            "filterby": "country"
          }
        },
        {
          "type": "button",
          "name": "submit",
          "label": "Submit"
        }
      ]
    }
]

Contributors ✨