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 post
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. Please refer to our Privacy Policy.