Jump to content

Updated Schema for Work Experience


Recommended Posts

Hi Everyone,

I've made a few changes to the Work Experience Schema. Maybe some one will find it useful.

{
    "title": "Resume",
    "type": "array",
    "items": {
        "title": "WORK EXPERIENCE",
        "properties": {
            "details": {
                "title": "Details",
                "type": "object",
                "format": "table",
                "properties": {
                    "position": {
                        "title": "Position",
                        "type": "string",
                        "options": {
                            "input_width": "100%",
                            "grid_columns": 11
                        }
                    },
                    "monthstart": {
                        "title": "Start Month",
                        "$ref": "#\/definitions\/months",
                        "type": "string",
                        "default": "JAN"
                    },
                    "yearstart": {
                        "title": "Start Year",
                        "type": "string",
                        "default": "2009",
                        "pattern": "^[0-9]{4}|PRESENT|NOW|present|Present|Now|now$",
                        "options": {
                          "input_width": "130px"
                        }
                    },
                    "monthend": {
                        "title": "End Month",
                        "$ref": "#\/definitions\/months",
                        "type": "string",
                        "default": ""
                    },
                    "yearend": {
                        "title": "End Year",
                        "type": "string",
                        "default": "Present",
                        "pattern": "^[0-9]{4}|PRESENT|NOW|present|Present|Now|now$",
                        "options": {
                          "input_width": "130px"
                        }
                    },
                    "companyname": {
                        "title": "Company",
                        "type": "string",
                        "options": {
                            "input_width": "100%",
                            "grid_columns": 11
                        }
                    },
                    "location": {
                        "title": "Location",
                        "type": "string",
                        "options": {
                            "input_width": "100%",
                            "grid_columns": 11
                        }
                    },
                    "information": {
                        "title": "Position Description",
                        "type": "string",
                        "format": "textarea",
                        "options": {
                            "input_width": "100%",
                            "grid_columns": 11
                        }
                    }
                }
            },
            "Duties": {
                "title": "Tasks/Responsibilities",
                "type": "array",
                "format": "table",
                "items": {
                    "title": "Task",
                    "type": "object",
                    "format": "grid",
                    "properties": {
                        "task": {
                            "title": "Task",
                            "type": "string"
                        }
                    }
                }
            }
        }
    },
    "definitions": {
        "months": {
            "type": "string",
            "enumSource": [{
                    "source": [{
                            "value": "JAN",
                            "title": "January"
                        }, {
                            "value": "FEB",
                            "title": "February"
                        }, {
                            "value": "MAR",
                            "title": "March"
                        }, {
                            "value": "APR",
                            "title": "April"
                        }, {
                            "value": "MAY",
                            "title": "May"
                        }, {
                            "value": "JUN",
                            "title": "June"
                        }, {
                            "value": "JUL",
                            "title": "July"
                        }, {
                            "value": "AUG",
                            "title": "August"
                        }, {
                            "value": "SEP",
                            "title": "September"
                        }, {
                            "value": "OCT",
                            "title": "October"
                        }, {
                            "value": "NOV",
                            "title": "November"
                        }, {
                            "value": "DEC",
                            "title": "December"
                        }, {
                            "value": "",
                            "title": ""
                        }
                    ],
                    "title": "{{item.title}}",
                    "value": "{{item.value}}"
                }
            ]
        }
    }
}

I styled the form using the following CSS.
 

/* JSON FORMBUILDER CSS */
.jrFieldDiv select[name*="[details][monthstart]"], .jrFieldDiv  select[name*="[details][yearstart]"], .jrFieldDiv select[name*="[details][monthend]"], .jrFieldDiv select[name*="[details][yearend]"]{width:130px!important;}
.jrFieldDiv .jrLabel{width:100%;display:block}

.jrFormBuilderPanel div div{display:flex;flex-direction:row; flex-wrap: wrap;}
.jrGrid:first-of-type{flex-basis: 100%;}
.jrGrid:nth-of-type(2){flex-basis:50%}
.jrGrid:nth-of-type(3){flex-basis:50%}
.jrGrid:nth-of-type(4){flex-basis:50%}
.jrGrid:nth-of-type(5){flex-basis:50px}

/* TODO- add mobile queries for the below width */

td.compact div.jrFieldDiv input[name*="[Duties]"] {min-width:500px;}

 

Regex used for validation could probably be improved, but it works.

Acceptable inputs for the year dates are 4 digits (such as 2021) or the words:- Present, PRESENT, present, NOW, now, Now.

TODO: Mobile queries for the Task input need to be created or alternative CSS used.

 

work-experience-form.jpg

Edited by Ant
Added an image of the form layout
  • Like 2
Link to comment
×
×
  • Create New...