javascript - React - Dynamic generation of forms - pages -
g'day. working on application has lot of big forms in requirements. 1 form has on 150 questions. figured neat way handle modern mobile design have multiple accordion sections inside form or present forms series of "wizard" pages can slid left , right. works when hard code jsx, rather repeat hard coding each , every form , form page decided try , build "form-page generator" takes json description this:
//-------------------------- export const assetform = { "formname": "assetcreateedit", "format": "accordion", "pages": [{ "pageid": "1", "title": "asset summary - mandatories", "fields": [ { "name": "testname", "altname": "", "visible": true, "groupvisibility": "public", "type": "text", "component": "input", "label": "test smart input", "placeholder": "some default value", "required": "required", "validated": false, "data": [] }, { "name": "password", "altname": "", "visible": true, "groupvisibility": "public", "type": "password", "component": "input", "label": "test smart input", "placeholder": "password", "required": "required", "validated": false, "data": [] } ] }, { "pageid": "2", "title": "asset images - mandatories", "fields": [ { "name": "testname", "altname": "", "visible": true, "groupvisibility": "public", "type": "imagedrop", "component": "imagedropbox", "label": "test image dropbox", "placeholder": "", "required": "required", "validated": false, "optiminstic": "optomisticprevire", "data": [] } ] } ] }; //-------------------------- export const assetworkflow = [{ "formname": "assetcreateedit", "format": "workflow", "pages": [{ "pageid": "1", "title": "asset summary - mandatories", "fields": [ { "name": "testname", "altname": "", "visible": true, "groupvisibility": "public", "type": "text", "component": "input", "label": "test smart input", "placeholder": "some default value", "required": "required", "valrequired": true, "validated": false, "data": [] }, { "name": "password", "altname": "", "visible": true, "groupvisibility": "public", "type": "password", "component": "input", "label": "test smart input", "placeholder": "password", "required": "required", "validated": false, "data": [] } ] }, { "pageid": "2", "title": "asset images - mandatories", "fields": [ { "name": "testname", "altname": "", "visible": true, "groupvisibility": "public", "type": "imagedrop", "component": "imagedropbox", "label": "test image dropbox", "placeholder": "", "required": "required", "validated": false, "optiminstic": "optomisticprevire", "data": [] } ] } ] } ];
i guess want this:
//--------------- mybabel(opcode) { let codeprops = []; // stake basics // , see if principle works // must doable..... codeprops.push(<accordion uniqid={'addasset'} {...this.props} singleopen={true} >); codeprops.push(<accordionsection title="asset summary - mandatories" openbydefault={false} >); codeprops.push(<h1>this must possible</h1>); codeprops.push(</accordionsection >); codeprops.push(<accordionsection title="asset summary - page 2" openbydefault={false} >); codeprops.push(<h2>looks not. sad.</h2>); codeprops.push(</accordionsection >); codeprops.push(</accordion >); return codeprops; } //-------- render() { const code = this.parse(this.props.form); // try after try not assemble, ignore const jsx = this.mybabel(code); // jsx in here, not in way, // shape or form. way babel console.log("-----------------------"); // compiler works, took generation console.log("code parse()"); // out of render, , building finished console.log("-----------------------"); // jsx 2 pass compiler. console.log(code); console.log(jsx); return( <div> <h2>smartform parser</h2> {jsx} </div> ); }
does know if has been done before? can't seem find way of assembling code using jsx. if have abandon jsx , in javascript suppose can that. not sure how must do-able.
thoughts? cheers.
wiki
Comments
Post a Comment