sv-react-ui

React UI for Simpleview

Setup

Necessary Dependencies

Your projects package.json file will need to install the following packages and allow them to be accessible by your webpack bundle system.

• @material-ui/core
• react
• react-material-ui-form-validator
• react-redux
• react-select
• redux
• reduxsauce
• redux-devtools-extension
• redux-thunk
• material-ui-phone-number
• @yazeedloonat/ckeditor5-build-classic-sv
• @date-io/moment
• moment
• material-ui-pickers
• flag-icon-css

RenderForm

Renders a form given a form definition (JSON), with sections, rows, columns and fields. Sections have rows, rows have columns, and columns can have rows or fields.

You can view the available fields via graphql:

  query { crm { get_form_def(...) {...} } }

Simple Form definition example:

{
    "name": "example_form",
    "sections": [
        {
            "name": "example_section",
            "label": "Example Section",
            "rows": [
                {
                    "columns": [
                        {
                            "width": 100,
                            "rows": [
                                {
                                    "columns": [
                                        {
                                            "width": 100,
                                            "fields": [
                                                {
                                                    "name": "recId",
                                                    "type": "TextField",
                                                    "dataType": "Int",
                                                    "hidden": true,
                                                    "validators": ["required"]
                                                }
                                            ]
                                        },
                                        {
                                            "width": 100,
                                            "fields": [
                                                {
                                                    "name": "title",
                                                    "label": "Title",
                                                    "type": "TextField",
                                                    "dataType": "String",
                                                    "formTitle": true,
                                                    "validators": ["required"]
                                                }
                                            ]
                                        },
                                        {
                                            "width": 100,
                                            "fields": [
                                                {
                                                    "name": "categoryID",
                                                    "label": "Type",
                                                    "type": "Select",
                                                    "dataType": "Int",
                                                    "relOptions": {
                                                        "name": "get_category", // it's up to you how use this to fetch options from your DB
                                                        "label": "title",
                                                        "value": "categoryID"
                                                    }
                                                }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

Example of implmenting the component

submit = (data) => {...}

cancel = () => e => {...}

// handler for fetching options for the chip editor asynchronously
asyncOptionsHandler = async (field, data) => {...}

render() {
    const { type, def, data, dynamicFields, fieldIndex, formTitle } = this.props;

    if (def.section.length === 0) { return null; }

    return(
        <RenderForm
            title={`${type} detail: ${formTitle}`}
            def={def}
            data={data}
            dynamicFields={dynamicFields} {/* dynamicFields are fields that listen to other fields, and change their own value */}
            fieldIndex={fieldIndex} {/* an index of the fields array, by field name */}
            onSubmit={this.submit}
            cancel={this.cancel}
            asyncOptionsHandler={debounce(this.asyncOptionsHandler, 500)} {/* you should probably _.debounce this too */}
        />
    );
}