Comments (10)
You should be able to render a formeo form by calling:
var formeo = new Formeo(<formeoOptions>, <formeoFormJson>);
formeo.render(<containerToRenderFormTo>)
I use
JSON.stringify(JSON.parse(formeoObj.formData))
To save and the form data and I store it in a DB (this is what would go in above). So, you really are just passing around a JSON object.
I'm using formeo to run my website and it's simple and fast. You can view my code here if you want to take a look at how I implemented it (specifically you'll want to check out Scripts/tpn.charactersheet.js)
I just need to figure out how to add some custom options in the floating tool menu on the right. :)
from formeo.
After the initial call to initFormeo(), if I call it again i get:
Uncaught (in promise) TypeError: Cannot set property 'innerHTML' of null
at e.render (http://localhost:15895/Scripts/formeo.min.js:6:63513)
So, no, I'm not able to call it a second time. But, I also only have the minified version of formeo, so it's hard to tell if it's really an issue with formeo, or the way I have my architecture set up.
from formeo.
i saw your post about setting a second parameter on constructor to load data.
But this fails if you make a second call of formeo, the first time is OK
Uncaught (in promise) TypeError: Cannot set property 'innerHTML' of null
Im doing something like this
this.formeo = new window.Formeo(this.formeo_options, this.saved_data);
any tip of load a second time?, i need to reset to defaults the form
from formeo.
can you call a second time the function tpn_charsheet.initFormeo, of your code @sheibeck, to check if formeo crashes to you too when you init formeo while a formeo instance is loaded?
i can load data perfectly first time, the problem is loading a second time to reset the form without reloading the page.
from formeo.
from formeo.
that is the issue xD
thanks to confirm the same error
from formeo.
we can load the data on-page load by using below concepts
var formJSONData = {
"id": "51100a54-1370-494a-8ad6-9d934c593623",
"settings": {},
"stages": {
"6ded269e-27f5-441b-835f-8bb8751ba0e8": {
"id": "6ded269e-27f5-441b-835f-8bb8751ba0e8",
"settings": {},
"rows": [
"aae2d953-e7ec-44bf-ad0b-a5fbce738372"
]
}
},
"rows": {
"aae2d953-e7ec-44bf-ad0b-a5fbce738372": {
"columns": [
"3d4c10e2-5255-4051-8c8b-53bd048e2787",
"3fe2f05c-754b-4cc7-8443-a67cc2e8fbc6"
],
"id": "aae2d953-e7ec-44bf-ad0b-a5fbce738372",
"config": {
"fieldset": false,
"legend": "",
"inputGroup": false
},
"attrs": {
"className": "f-row"
}
}
},
"columns": {
"3d4c10e2-5255-4051-8c8b-53bd048e2787": {
"fields": [
"txtUserName"
],
"id": "3d4c10e2-5255-4051-8c8b-53bd048e2787",
"config": {
"width": "50%"
},
"style": "width: 50%",
"tag": "div",
"content": [
{
"tag": "input",
"attrs": {
"type": "text",
"className": "form-control"
},
"config": {
"label": "Santosh"
},
"meta": {
"group": "common",
"icon": "text-input"
},
"fMap": "attrs.value",
"id": "txtUserName"
}
],
"attrs": {
"className": [
"f-render-column"
]
}
},
"3fe2f05c-754b-4cc7-8443-a67cc2e8fbc6": {
"fields": [
"b811d59b-5191-4de7-baab-52d931317a09"
],
"id": "3fe2f05c-754b-4cc7-8443-a67cc2e8fbc6",
"config": {
"width": "50%"
},
"style": "width: 50%",
"tag": "div",
"content": [
{
"tag": "select",
"config": {
"label": "Project"
},
"attrs": {
"className": "form-control"
},
"meta": {
"group": "common",
"icon": "select",
"id": "select"
},
"options": [
{
"label": "select",
"value": "select",
"selected": true
},
{
"label": "Option 2",
"value": "option-2",
"selected": false
}
],
"id": "b811d59b-5191-4de7-baab-52d931317a09"
}
],
"attrs": {
"className": [
"f-render-column"
]
}
}
},
"fields": {
"txtUserName": {
"tag": "input",
"attrs": {
"type": "text",
"className": "form-control"
},
"config": {
"label": "Santosh"
},
"meta": {
"group": "common",
"icon": "text-input"
},
"fMap": "attrs.value",
"id": "txtUserName"
},
"616c0063-e856-4dbe-8343-916bbf54f9e5": {
"tag": "input",
"attrs": {
"type": "text",
"className": "form-control",
"id": "Santoshk1"
},
"config": {
"label": "Santosh"
},
"meta": {
"group": "common",
"icon": "text-input"
},
"fMap": "attrs.value",
"id": "Santoshk1"
},
"b811d59b-5191-4de7-baab-52d931317a09": {
"tag": "select",
"config": {
"label": "Project"
},
"attrs": {
"className": "form-control"
},
"meta": {
"group": "common",
"icon": "select",
"id": "select"
},
"options": [
{
"label": "select",
"value": "select",
"selected": true
},
{
"label": "Option 2",
"value": "option-2",
"selected": false
}
],
"id": "b811d59b-5191-4de7-baab-52d931317a09"
}
}
}
var formeoNew = new Formeo(formeoOpts, JSON.stringify(formJSONData));
from formeo.
@guillermofr @sheibeck did you guys found a way for reloading the editor without refreshing the page?
from formeo.
@jonamariya @sheibeck @guillermofr I ran into this issue yesterday and was able to get it working.
It seems that somewhere in the code, the container
property gets unset in the options object.
When parsing your options to Formeo, make sure you do a deep copy of the object - I personally use jQuery's extend functionality:
var formeoOptions: {container: "#my-container"...},
builder;
function loadNewData(jsonDataAsString){
let opts = $.extend({},formeoOptions);
builder = new Formeo(opts,jsonDataAsString);
}
loadNewData(myJsonString);
To set the builder to blank, it's best to capture the initial builder.formData
var formeoOptions: {container: "#my-container"...},
finit = false,
blankjson,
builder = new Formeo($.extend({},formeoOptions));
$(document).on('formeoLoaded',function(e){
if(!finit){
// Use JSON.parse() and .stringify() to remove white space characters
// If not you'll get "\r\n" and "\t"'s in the formData, which will throw an error
blankjson = JSON.stringify(JSON.parse(builder.formData));
finit = true;
}
});
function loadNewData(jsonDataAsString){
let opts = $.extend({},formeoOptions);
builder = new Formeo(opts,jsonDataAsString);
}
function clearData(){
let opts = $.extend({},formeoOptions);
builder = new Formeo(opts,blankjson);
}
from formeo.
I want to set json data from database as we would use in FormBuilder simple actions.setdata but there is no such option here..
I am experiencing error "Uncaught ReferenceError: Formeo is not defined".
Can someone guide me where i am lacking.
var formeo = new FormeoEditor(formeoOptions);
var renderedForm = new FormeoRenderer({ renderContainer: '#formeo-render', });
function FormRender() {
renderedForm.render(formeo.formData);
}
var formeo = new Formeo(formeoOptions, JSON.stringify(myJSONData));
from formeo.
Related Issues (20)
- window.JSON.stringify($(fbRender).formRender("userData"))???
- undefined events with angular
- Uncaught TypeError: Cannot read property 'firstChild' of undefined HOT 1
- Can i add image ?
- Panels are resized to huge height
- The preview does not match the options. HOT 3
- custom attrs dont show label on edit HOT 3
- Formeo Conditions
- is there a Formeo based solution to implement the Wizard?
- File upload example
- How can we get user input data from rendered form
- Exist the event onOpenFieldEdit like at the Formbuilder?
- Rudimentary React Example
- For anybody struggling with names on radio buttons and checkboxes HOT 1
- Rendering form with conditions not working
- Can formeo be implemented with Next.js?
- Remove Element Event
- How to integrate ckeditor in the fomeo
- Can formeo be implemented in ASP.NET mvc ?
- Formeo Date & Number elements
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from formeo.