Ant Posted February 10, 2021 at 05:57 AM Share Posted February 10, 2021 at 05:57 AM (edited) 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. Edited February 10, 2021 at 06:03 AM by Ant Added an image of the form layout JoshLewis and Alejandro 2 Link to comment
Alex.1 Posted February 17, 2021 at 11:02 AM Share Posted February 17, 2021 at 11:02 AM This section is only visible with a valid subscription. If you have a valid subscription, please login. Link to comment
Ant Posted February 19, 2021 at 03:26 AM Author Share Posted February 19, 2021 at 03:26 AM This section is only visible with a valid subscription. If you have a valid subscription, please login. Link to comment
Alex.1 Posted February 19, 2021 at 08:26 AM Share Posted February 19, 2021 at 08:26 AM This section is only visible with a valid subscription. If you have a valid subscription, please login. Link to comment
Recommended Posts