search

Draggable / formeo

Drag & Drop Form Builder
http://draggable.github.io/formeo/
MIT License
533 stars 196 forks source link

Uncaught TypeError: Cannot read properties of undefined (reading 'html.header') #377

Closed JordanGarciaDev closed 3 days ago

JordanGarciaDev commented 3 days ago

Error RenderForm image

<!DOCTYPE html>
<html lang="es">
<!-- Formeo -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="./constructor/dist/formeo.min.js"></script>
<body>
<div class="m-content">
    <div class="row" style="font-size: 10px;">
        <div class="col-md-12">
            <div class="m-portlet m-portlet--tab">
                <div class="container-fluid">
                    <button id="render" class="btn btn-primary">Render</button>
                            <form id="formeo-container" class="rendered-form"></form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>

    const formData = `
{
    "id": "fad2086a-9d97-4c03-86a2-a166785ebd5a",
    "stages": {
        "3aa5b10e-2d14-4b27-b25f-dcb50a500d52": {
            "children": [
                "1d75eea7-930f-4064-8165-28be55be7854",
                "c1a1db4b-e0d3-4fa3-8dd9-03884fe1ca2d"
            ],
            "id": "3aa5b10e-2d14-4b27-b25f-dcb50a500d52"
        }
    },
    "rows": {
        "1d75eea7-930f-4064-8165-28be55be7854": {
            "config": {
                "fieldset": false,
                "legend": "",
                "inputGroup": false
            },
            "children": [
                "bed95027-f0ce-4e1d-ba85-96eab568c041"
            ],
            "className": [
                "formeo-row"
            ],
            "id": "1d75eea7-930f-4064-8165-28be55be7854"
        },
        "c1a1db4b-e0d3-4fa3-8dd9-03884fe1ca2d": {
            "config": {
                "fieldset": false,
                "legend": "",
                "inputGroup": false
            },
            "children": [
                "d557048e-e0c5-4d55-aad8-642b6d7a1276"
            ],
            "className": [
                "formeo-row"
            ],
            "id": "c1a1db4b-e0d3-4fa3-8dd9-03884fe1ca2d"
        }
    },
    "columns": {
        "bed95027-f0ce-4e1d-ba85-96eab568c041": {
            "config": {
                "width": "100%"
            },
            "children": [
                "ec625587-5501-4759-b26b-eb71707c1d16"
            ],
            "className": [
                "formeo-column"
            ],
            "id": "bed95027-f0ce-4e1d-ba85-96eab568c041"
        },
        "d557048e-e0c5-4d55-aad8-642b6d7a1276": {
            "config": {
                "width": "100%"
            },
            "children": [
                "45037eee-ce28-40ba-afa2-ce71d7620ca1"
            ],
            "className": [
                "formeo-column"
            ],
            "id": "d557048e-e0c5-4d55-aad8-642b6d7a1276"
        }
    },
    "fields": {
        "ec625587-5501-4759-b26b-eb71707c1d16": {
            "tag": "h1",
            "attrs": {
                "tag": [
                    {
                        "label": "H1",
                        "value": "h1",
                        "selected": true
                    },
                    {
                        "label": "H2",
                        "value": "h2",
                        "selected": false
                    },
                    {
                        "label": "H3",
                        "value": "h3",
                        "selected": false
                    },
                    {
                        "label": "H4",
                        "value": "h4",
                        "selected": false
                    }
                ],
                "className": ""
            },
            "config": {
                "label": "Header",
                "hideLabel": true,
                "editableContent": true,
                "controlId": "html.header"
            },
            "content": "Hola Mundo!",
            "action": {},
            "id": "ec625587-5501-4759-b26b-eb71707c1d16"
        },
        "45037eee-ce28-40ba-afa2-ce71d7620ca1": {
            "tag": "input",
            "attrs": {
                "required": false,
                "type": "text",
                "className": ""
            },
            "config": {
                "label": "Tu Nombre:",
                "controlId": "text-input"
            },
            "id": "45037eee-ce28-40ba-afa2-ce71d7620ca1"
        }
    }
}`;

    let container = document.querySelector('#formeo-container');
    let renderContainer = document.querySelector('#formeo-editor');
    let formeoOpts = {
        container: container,
        sessionStorage: true
    };

    let renderer = new FormeoRenderer(formeoOpts)
    renderer.render(JSON.parse(formData));
</script>
</body>
</html>
JaiderPHP commented 3 days ago

I have the same error in my formeo project.

In addition to showing the JSON in the formeo editor to continue editing, sometimes it appears and other times it doesn't, you have to reload the page.

Upload an example of editing and rendering with javascript and html without React or VUE

kevinchappell commented 3 days ago

:tada: This issue has been resolved in version 3.0.4 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

kevinchappell commented 3 days ago

@JordanGarciaDev this issue should now be fixed. Here is a codepen demonstrating the fix: https://codepen.io/kevinchappell/pen/yyBLJOE?editors=1010

also please note, the option for the container is renderContainer, not container

JaiderPHP commented 3 days ago

How would it look to be able to send the form rendered in the example https://codepen.io/kevinchappell/pen/yyBLJOE?editors=1010?

and additionally the JSON is not shown in the editor for the edit view.

https://codepen.io/kevinchappell/pen/qEWBqqy

@JordanGarciaDev this issue should now be fixed. Here is a codepen demonstrating the fix: https://codepen.io/kevinchappell/pen/yyBLJOE?editors=1010

also please note, the option for the container is renderContainer, not container

kevinchappell commented 2 days ago

@JaiderPHP

How would it look to be able to send the form rendered in the example https://codepen.io/kevinchappell/pen/yyBLJOE?editors=1010?

Can you clarify what you mean by "send the form rendered"?

and additionally the JSON is not shown in the editor for the edit view.

https://codepen.io/kevinchappell/pen/qEWBqqy

Is this still true? I am seeing the rendered editor, is this the expected result? codepen will cache external dependencies, if its still not working you can add a query param to force a refetch ie. ?v=3.1.0 image

JaiderPHP commented 2 days ago

@JaiderPHP

How would it look to be able to send the form rendered in the example https://codepen.io/kevinchappell/pen/yyBLJOE?editors=1010?

Can you clarify what you mean by "send the form rendered"?

and additionally the JSON is not shown in the editor for the edit view. https://codepen.io/kevinchappell/pen/qEWBqqy

Is this still true? I am seeing the rendered editor, is this the expected result? codepen will cache external dependencies, if its still not working you can add a query param to force a refetch ie. ?v=3.1.0 image

Yes, I see that it works perfectly with the latest version: 3.1.0

All the errors that have been found in the previous versions have been fixed, thanks also to @JordanGarciaDev for his contributions.

But we need a clear example now of how to send the rendered form according to the example: https://codepen.io/kevinchappell/pen/yyBLJOE?editors=1010

For example "that form was created to request the name of the end user. How would it be for the end user to click on a button and the form is sent and the json with the rendered responses is stored?

kevinchappell commented 2 days ago

ah i see what you mean. that gets kind of into backend territory. implementations can vary wildly so it's difficult to make an example that works for everyone. formeo renderer generates semantic forms so once rendered, traditional form.FormData workflow should work.

i work on a demo that shows how to get the data using FormData

JordanGarciaDev commented 21 hours ago

ah i see what you mean. that gets kind of into backend territory. implementations can vary wildly so it's difficult to make an example that works for everyone. formeo renderer generates semantic forms so once rendered, traditional form.FormData workflow should work.

i work on a demo that shows how to get the data using FormData

I made this example to update the form, and it works perfectly.

But I'm replicating it to save the form with the answers and it doesn't work, I don't know what I'm doing wrong, since it's very similar to editing, I've done it with Onsave and Onrender

https://codepen.io/JordanGarciaDev/pen/raBaeaW?editors=1111