Columns not validating with string classname

[kevinchappell]

Here is an example where we created a basic form with only a Header, Textbox and Number on the form. Here is a JSON view of the payload that will be saved for that basic form:

Here is the payload itself:

{"Template":"{\"id\":\"ac62994f-e1b9-4880-b523-b23a2d568e9b\",\"stages\":{\"2d7d7981-04e2-4fe7-95ec-834ebe94d6a9\":{\"children\":[\"b2bb51a2-f37f-4255-9190-d51ab7fcd2d3\",\"d36e2b1e-2942-4e38-8686-d1b8414d99e3\",\"8cf7df6b-9fdc-4f03-bbe2-bb41b82b5922\"],\"id\":\"2d7d7981-04e2-4fe7-95ec-834ebe94d6a9\"}},\"rows\":{\"b2bb51a2-f37f-4255-9190-d51ab7fcd2d3\":{\"config\":{\"fieldset\":false,\"legend\":\"\",\"inputGroup\":false},\"children\":[\"1c71ea88-5ab0-41c5-951e-5c53f4a4b69b\"],\"className\":[\"formeo-row\"],\"id\":\"b2bb51a2-f37f-4255-9190-d51ab7fcd2d3\"},\"d36e2b1e-2942-4e38-8686-d1b8414d99e3\":{\"config\":{\"fieldset\":false,\"legend\":\"\",\"inputGroup\":false},\"children\":[\"eb2d3f15-e6d2-4783-a70f-6e213a4fbcac\"],\"className\":[\"formeo-row\"],\"id\":\"d36e2b1e-2942-4e38-8686-d1b8414d99e3\"},\"8cf7df6b-9fdc-4f03-bbe2-bb41b82b5922\":{\"config\":{\"fieldset\":false,\"legend\":\"\",\"inputGroup\":false},\"children\":[\"0b1f44f3-e740-4527-a55b-58ebef9a031d\"],\"className\":[\"formeo-row\"],\"id\":\"8cf7df6b-9fdc-4f03-bbe2-bb41b82b5922\"}},\"columns\":{\"1c71ea88-5ab0-41c5-951e-5c53f4a4b69b\":{\"config\":{\"width\":\"100%\"},\"children\":[\"c9b2078f-05c8-4f98-82af-68c01640126c\"],\"className\":[\"formeo-column\"],\"id\":\"1c71ea88-5ab0-41c5-951e-5c53f4a4b69b\"},\"eb2d3f15-e6d2-4783-a70f-6e213a4fbcac\":{\"config\":{\"width\":\"100%\"},\"children\":[\"929b7c6d-fe6d-47a1-b6d2-748aae0eca52\"],\"className\":[\"formeo-column\"],\"id\":\"eb2d3f15-e6d2-4783-a70f-6e213a4fbcac\"},\"0b1f44f3-e740-4527-a55b-58ebef9a031d\":{\"config\":{\"width\":\"100%\"},\"children\":[\"08f91142-fd27-4235-bc3b-fdbf3483ebc1\"],\"className\":[\"formeo-column\"],\"id\":\"0b1f44f3-e740-4527-a55b-58ebef9a031d\"}},\"fields\":{\"c9b2078f-05c8-4f98-82af-68c01640126c\":{\"conditions\":[{\"if\":[{\"source\":\"\",\"sourceProperty\":\"value\",\"comparison\":\"equals\",\"target\":\"\",\"targetProperty\":\"value\"}],\"then\":[{\"target\":\"\",\"targetProperty\":\"value\",\"assignment\":\"equals\",\"value\":\"\"}]}],\"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},\"meta\":{\"group\":\"html\",\"icon\":\"header\",\"id\":\"html.header\"},\"content\":\"Header\",\"action\":{},\"id\":\"c9b2078f-05c8-4f98-82af-68c01640126c\"},\"929b7c6d-fe6d-47a1-b6d2-748aae0eca52\":{\"conditions\":[{\"if\":[{\"source\":\"\",\"sourceProperty\":\"value\",\"comparison\":\"equals\",\"target\":\"\",\"targetProperty\":\"value\"}],\"then\":[{\"target\":\"\",\"targetProperty\":\"value\",\"assignment\":\"equals\",\"value\":\"\"}]}],\"tag\":\"input\",\"attrs\":{\"required\":false,\"type\":\"text\",\"className\":\"\"},\"config\":{\"label\":\"Text Input\"},\"meta\":{\"group\":\"common\",\"icon\":\"text-input\",\"id\":\"text-input\"},\"id\":\"929b7c6d-fe6d-47a1-b6d2-748aae0eca52\"},\"08f91142-fd27-4235-bc3b-fdbf3483ebc1\":{\"conditions\":[{\"if\":[{\"source\":\"\",\"sourceProperty\":\"value\",\"comparison\":\"equals\",\"target\":\"\",\"targetProperty\":\"value\"}],\"then\":[{\"target\":\"\",\"targetProperty\":\"value\",\"assignment\":\"equals\",\"value\":\"\"}]}],\"tag\":\"input\",\"attrs\":{\"type\":\"number\",\"required\":false,\"className\":\"\"},\"config\":{\"label\":\"Number\"},\"meta\":{\"group\":\"common\",\"icon\":\"hash\",\"id\":\"number\"},\"id\":\"08f91142-fd27-4235-bc3b-fdbf3483ebc1\"}}}"}1

We save this payload to the database, so it can be loaded when we are using the form to capture data.
We use objects that we have defined to represent the structure of the payload, one of these is a Columns object to represent the column in the Formeo control. This has always had the property ClassName defined as a string, but since the recent updates (20 Oct 2024) it has given an error when trying to put data into the Columns object because it wants to put an array in the ClassName property instead. This is the code change we had to make in order to get it to save:

However, we have hundreds of forms saved already with their layout having the ClassName defined as a string. When these forms attempt to load, it gives an error because the data has ClassName stored as a string, but it is attempting to put in into the array object that we have had to change.

I hope this makes sense! If you need more info please let me know.

Originally posted by @Adrian-PIMSS in #359 (comment)

[JordanGarciaDev]

I have tried in different ways, to render the already created form, but without having to load the editor, but the final view of how the form would look, this is my second example and I get this error:

Code example 2:

<html lang="en">
<head>
    <script src="https://draggable.github.io/formeo/assets/js/formeo.min.js"></script>
</head>

<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":"933ce6a8-7a99-4f3d-809c-5b8315fe27c7","stages":{"d85a7393-6186-4844-bbe4-41b6d1d0200c":{"children":["be7b5c0d-b631-47a8-92e0-22a55997c4cb","9148db45-f9ed-4c87-b445-c26c306d286b","84820980-e684-4d7e-a66a-25e6e6bbfcf5","e9d89d4e-ac27-4f50-a863-9215d3654437","b493fa84-3f54-4041-af45-883b727d32a8"],"id":"d85a7393-6186-4844-bbe4-41b6d1d0200c"}},"rows":{"be7b5c0d-b631-47a8-92e0-22a55997c4cb":{"config":{"fieldset":false,"legend":"","inputGroup":false},"children":["8cd9018a-05f2-4997-b565-cee7a12bbf2c","ab697ce0-0eaa-4bbe-873e-ac072d006450"],"className":["formeo-row"],"id":"be7b5c0d-b631-47a8-92e0-22a55997c4cb"},"9148db45-f9ed-4c87-b445-c26c306d286b":{"config":{"fieldset":false,"legend":"","inputGroup":false},"children":["00344c0c-c58c-41ac-89de-3ce41e39abdc"],"className":["formeo-row"],"id":"9148db45-f9ed-4c87-b445-c26c306d286b"},"84820980-e684-4d7e-a66a-25e6e6bbfcf5":{"config":{"fieldset":false,"legend":"","inputGroup":false},"children":["1e5a85fe-a10b-4455-a7f0-432f9430a7e1"],"className":["formeo-row"],"id":"84820980-e684-4d7e-a66a-25e6e6bbfcf5"},"b493fa84-3f54-4041-af45-883b727d32a8":{"config":{"fieldset":false,"legend":"","inputGroup":false},"children":["9c6d7888-14dd-4e1c-82a8-390461196744"],"className":["formeo-row"],"id":"b493fa84-3f54-4041-af45-883b727d32a8"},"e9d89d4e-ac27-4f50-a863-9215d3654437":{"config":{"fieldset":false,"legend":"","inputGroup":false},"children":["69ed7fb2-4372-46ca-b780-7b7eadc6ade3"],"className":["formeo-row"],"id":"e9d89d4e-ac27-4f50-a863-9215d3654437"}},"columns":{"8cd9018a-05f2-4997-b565-cee7a12bbf2c":{"config":{"label":"","width":"100%"},"children":["83bed6ba-cc20-48db-9285-52615ac221cf"],"className":"formeo-column","meta":{"group":"layout","icon":"columns","id":"layout-column"},"id":"8cd9018a-05f2-4997-b565-cee7a12bbf2c"},"ab697ce0-0eaa-4bbe-873e-ac072d006450":{"config":{"width":"100%"},"children":["4801e4fa-ef70-417e-b2e4-27e92e2ecf3b"],"className":"formeo-column","id":"ab697ce0-0eaa-4bbe-873e-ac072d006450"},"00344c0c-c58c-41ac-89de-3ce41e39abdc":{"config":{"width":"100%"},"children":["8757cdbe-703f-42f9-a0df-c9319ad8ea3c"],"className":"formeo-column","id":"00344c0c-c58c-41ac-89de-3ce41e39abdc"},"1e5a85fe-a10b-4455-a7f0-432f9430a7e1":{"config":{"width":"100%"},"children":["dec3c032-4124-48e5-a8ca-86453bc8dcd4"],"className":"formeo-column","id":"1e5a85fe-a10b-4455-a7f0-432f9430a7e1"},"9c6d7888-14dd-4e1c-82a8-390461196744":{"config":{"width":"100%"},"children":["14d12a9f-de2c-4c5d-80a4-f2042506aeea"],"className":"formeo-column","id":"9c6d7888-14dd-4e1c-82a8-390461196744"},"69ed7fb2-4372-46ca-b780-7b7eadc6ade3":{"config":{"width":"100%"},"children":["b6fbc80b-fa5d-4ae5-aaa4-860992fa02ad"],"className":"formeo-column","id":"69ed7fb2-4372-46ca-b780-7b7eadc6ade3"}},"fields":{"4bcb0c2a-13b0-4cba-b8b9-9c09b21c159a":{"conditions":[{"if":[{"source":"","sourceProperty":"value","comparison":"equals","target":"","targetProperty":"value"}],"then":[{"target":"","targetProperty":"value","assignment":"equals","value":""}]}],"tag":"input","config":{"label":"Input","disabledAttrs":["type"],"lockedAttrs":[]},"meta":{"group":"common","icon":"T","id":"text-input"},"attrs":{"className":"form-control","type":"text"},"id":"4bcb0c2a-13b0-4cba-b8b9-9c09b21c159a"},"12a19cb1-78ef-4c28-afea-cb4b10a7c8d1":{"conditions":[{"if":[{"source":"","sourceProperty":"value","comparison":"equals","target":"","targetProperty":"value"}],"then":[{"target":"","targetProperty":"value","assignment":"equals","value":""}]}],"config":{"label":""},"meta":{"group":"layout","icon":"columns","id":"layout-column"},"id":"12a19cb1-78ef-4c28-afea-cb4b10a7c8d1"},"cc2678d5-4f8a-41e0-bdb9-8349a57e073f":{"conditions":[{"if":[{"source":"","sourceProperty":"value","comparison":"equals","target":"","targetProperty":"value"}],"then":[{"target":"","targetProperty":"value","assignment":"equals","value":""}]}],"tag":"input","config":{"label":"Input","disabledAttrs":["type"],"lockedAttrs":[]},"meta":{"group":"common","icon":"T","id":"text-input"},"attrs":{"className":"form-control","type":"text"},"id":"cc2678d5-4f8a-41e0-bdb9-8349a57e073f"},"83bed6ba-cc20-48db-9285-52615ac221cf":{"conditions":[{"if":[{"source":"","sourceProperty":"value","comparison":"equals","target":"","targetProperty":"value"}],"then":[{"target":"","targetProperty":"value","assignment":"equals","value":""}]}],"tag":"input","config":{"label":"First name","disabledAttrs":["type"],"lockedAttrs":[]},"meta":{"group":"common","icon":"T","id":"text-input"},"attrs":{"className":"form-control","type":"text"},"id":"83bed6ba-cc20-48db-9285-52615ac221cf"},"b157e49c-5479-4dd4-a3c7-ba92e16bcc81":{"conditions":[{"if":[{"source":"","sourceProperty":"value","comparison":"equals","target":"","targetProperty":"value"}],"then":[{"target":"","targetProperty":"value","assignment":"equals","value":""}]}],"tag":"input","config":{"label":"Input","disabledAttrs":["type"],"lockedAttrs":[]},"meta":{"group":"common","icon":"T","id":"text-input"},"attrs":{"className":"form-control","type":"text"},"id":"b157e49c-5479-4dd4-a3c7-ba92e16bcc81"},"4801e4fa-ef70-417e-b2e4-27e92e2ecf3b":{"conditions":[{"if":[{"source":"","sourceProperty":"value","comparison":"equals","target":"","targetProperty":"value"}],"then":[{"target":"","targetProperty":"value","assignment":"equals","value":""}]}],"tag":"input","config":{"label":"Last name","disabledAttrs":["type"],"lockedAttrs":[]},"meta":{"group":"common","icon":"T","id":"text-input"},"attrs":{"className":"form-control","type":"text"},"id":"4801e4fa-ef70-417e-b2e4-27e92e2ecf3b"},"8757cdbe-703f-42f9-a0df-c9319ad8ea3c":{"conditions":[{"if":[{"source":"","sourceProperty":"value","comparison":"equals","target":"","targetProperty":"value"}],"then":[{"target":"","targetProperty":"value","assignment":"equals","value":""}]}],"tag":"input","attrs":{"type":"date","required":false,"className":"form-control"},"config":{"label":"Birthdate"},"meta":{"group":"common","icon":"calendar","id":"date-input"},"id":"8757cdbe-703f-42f9-a0df-c9319ad8ea3c"},"dec3c032-4124-48e5-a8ca-86453bc8dcd4":{"conditions":[{"if":[{"source":"","sourceProperty":"value","comparison":"equals","target":"","targetProperty":"value"}],"then":[{"target":"","targetProperty":"value","assignment":"equals","value":""}]}],"tag":"input","config":{"label":"City","disabledAttrs":["type"],"lockedAttrs":[]},"meta":{"group":"common","icon":"A","id":"text-input-autocomplete"},"attrs":{"className":"form-control autocomplete","type":"text"},"id":"dec3c032-4124-48e5-a8ca-86453bc8dcd4"},"14d12a9f-de2c-4c5d-80a4-f2042506aeea":{"conditions":[{"if":[{"source":"","sourceProperty":"value","comparison":"equals","target":"","targetProperty":"value"}],"then":[{"target":"","targetProperty":"value","assignment":"equals","value":""}]}],"tag":"input","config":{"label":"Bootstrap Button","hideLabel":true,"disabledAttrs":["type"],"lockedAttrs":[]},"meta":{"group":"common","icon":"B","id":"bootstrap-btn"},"attrs":{"className":"btn btn-primary","type":"button","value":"Save"},"id":"14d12a9f-de2c-4c5d-80a4-f2042506aeea"},"b6fbc80b-fa5d-4ae5-aaa4-860992fa02ad":{"conditions":[{"if":[{"source":"","sourceProperty":"value","comparison":"equals","target":"","targetProperty":"value"}],"then":[{"target":"","targetProperty":"value","assignment":"equals","value":""}]}],"tag":"input","config":{"label":"Tags","disabledAttrs":["type"],"lockedAttrs":["required","data-role"]},"meta":{"group":"common","id":"tags-input","icon":"#T"},"attrs":{"className":"form-control tags-input","type":"email","data-role":"tags-input"},"id":"b6fbc80b-fa5d-4ae5-aaa4-860992fa02ad"}}}
`;

    let container = document.querySelector('#formeo-container');
    let formeoOpts = {
        container: container};

    const formeo = new FormeoRenderer(formeoOpts);
        formeo.render(formData);
</script>
</body>
</html>

[JordanGarciaDev]

[mapildain]

Hello! I have the same problem, I have not been able to render the form from the editor

var options = {
         editorContainer: '.formeo-wrap',
         sessionStorage: true,
         events: {
            onSave: function (evt) {
               const formData = editor.formData;
               console.log(formData);
               const renderer = new FormeoRenderer({ 
               renderContainer: '.formeo-render',
               });
               renderer.render(formData);
            }
         },
         }

      const editor = new FormeoEditor(options);

[Orlandomrqez]

Hola tengo el mismo problema no he podido renderizar el formulario desde el editor

[kevinchappell]

I can have this fixed today if someone can provide a demo online that reproduces the issue. formData may be enough too. But so far I have not been able to truly repro the issue

[mapildain]

formData = {"id":"bd33d6a7-972c-4717-b4d4-9b3f939cc236","stages":{"d3b3dbf5-ac01-4818-85de-a6fff2c3f23b":{"children":["38e87f79-85d9-4164-a562-75c3bc350f07","408ce2a1-309f-4355-a33e-20d4f895e1c0"],"id":"d3b3dbf5-ac01-4818-85de-a6fff2c3f23b"}},"rows":{"38e87f79-85d9-4164-a562-75c3bc350f07":{"config":{"fieldset":false,"legend":"","inputGroup":false},"children":["206fb660-1d90-4ab8-bfa6-88c45b3052d1","ab0bb6fc-216d-439d-ae26-1dceaf9231aa"],"className":["formeo-row"],"id":"38e87f79-85d9-4164-a562-75c3bc350f07"},"408ce2a1-309f-4355-a33e-20d4f895e1c0":{"config":{"fieldset":false,"legend":"","inputGroup":false},"children":["b40f0588-d7be-4e32-9311-2a22666d840d"],"className":["formeo-row"],"id":"408ce2a1-309f-4355-a33e-20d4f895e1c0"}},"columns":{"206fb660-1d90-4ab8-bfa6-88c45b3052d1":{"config":{"width":"50%"},"children":["4f2130f0-203f-432b-b843-354e09cdf551"],"className":["formeo-column"],"id":"206fb660-1d90-4ab8-bfa6-88c45b3052d1"},"ab0bb6fc-216d-439d-ae26-1dceaf9231aa":{"config":{"width":"50%"},"children":["c1272f3f-8067-483d-bc6d-0ff13b348ffa"],"className":["formeo-column"],"id":"ab0bb6fc-216d-439d-ae26-1dceaf9231aa"},"b40f0588-d7be-4e32-9311-2a22666d840d":{"config":{"width":"100%"},"children":["18defa6d-d33a-4e38-8f38-57a818a4bd46"],"className":["formeo-column"],"id":"b40f0588-d7be-4e32-9311-2a22666d840d"}},"fields":{"4f2130f0-203f-432b-b843-354e09cdf551":{"tag":"input","attrs":{"required":false,"type":"text","className":""},"config":{"label":"Text Input","controlId":"text-input"},"id":"4f2130f0-203f-432b-b843-354e09cdf551"},"c1272f3f-8067-483d-bc6d-0ff13b348ffa":{"tag":"input","attrs":{"required":false,"type":"text","className":""},"config":{"label":"Text Input","controlId":"text-input"},"id":"c1272f3f-8067-483d-bc6d-0ff13b348ffa"},"18defa6d-d33a-4e38-8f38-57a818a4bd46":{"tag":"textarea","config":{"label":"TextArea","controlId":"textarea"},"attrs":{"required":false},"id":"18defa6d-d33a-4e38-8f38-57a818a4bd46"}}}

[JordanGarciaDev]

I can have this fixed today if someone can provide a demo online that reproduces the issue. formData may be enough too. But so far I have not been able to truly repro the issue

<html lang="en">
<head>
    <script src="https://draggable.github.io/formeo/assets/js/formeo.min.js"></script>
</head>

<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":"933ce6a8-7a99-4f3d-809c-5b8315fe27c7","stages":{"d85a7393-6186-4844-bbe4-41b6d1d0200c":{"children":["be7b5c0d-b631-47a8-92e0-22a55997c4cb","9148db45-f9ed-4c87-b445-c26c306d286b","84820980-e684-4d7e-a66a-25e6e6bbfcf5","e9d89d4e-ac27-4f50-a863-9215d3654437","b493fa84-3f54-4041-af45-883b727d32a8"],"id":"d85a7393-6186-4844-bbe4-41b6d1d0200c"}},"rows":{"be7b5c0d-b631-47a8-92e0-22a55997c4cb":{"config":{"fieldset":false,"legend":"","inputGroup":false},"children":["8cd9018a-05f2-4997-b565-cee7a12bbf2c","ab697ce0-0eaa-4bbe-873e-ac072d006450"],"className":["formeo-row"],"id":"be7b5c0d-b631-47a8-92e0-22a55997c4cb"},"9148db45-f9ed-4c87-b445-c26c306d286b":{"config":{"fieldset":false,"legend":"","inputGroup":false},"children":["00344c0c-c58c-41ac-89de-3ce41e39abdc"],"className":["formeo-row"],"id":"9148db45-f9ed-4c87-b445-c26c306d286b"},"84820980-e684-4d7e-a66a-25e6e6bbfcf5":{"config":{"fieldset":false,"legend":"","inputGroup":false},"children":["1e5a85fe-a10b-4455-a7f0-432f9430a7e1"],"className":["formeo-row"],"id":"84820980-e684-4d7e-a66a-25e6e6bbfcf5"},"b493fa84-3f54-4041-af45-883b727d32a8":{"config":{"fieldset":false,"legend":"","inputGroup":false},"children":["9c6d7888-14dd-4e1c-82a8-390461196744"],"className":["formeo-row"],"id":"b493fa84-3f54-4041-af45-883b727d32a8"},"e9d89d4e-ac27-4f50-a863-9215d3654437":{"config":{"fieldset":false,"legend":"","inputGroup":false},"children":["69ed7fb2-4372-46ca-b780-7b7eadc6ade3"],"className":["formeo-row"],"id":"e9d89d4e-ac27-4f50-a863-9215d3654437"}},"columns":{"8cd9018a-05f2-4997-b565-cee7a12bbf2c":{"config":{"label":"","width":"100%"},"children":["83bed6ba-cc20-48db-9285-52615ac221cf"],"className":"formeo-column","meta":{"group":"layout","icon":"columns","id":"layout-column"},"id":"8cd9018a-05f2-4997-b565-cee7a12bbf2c"},"ab697ce0-0eaa-4bbe-873e-ac072d006450":{"config":{"width":"100%"},"children":["4801e4fa-ef70-417e-b2e4-27e92e2ecf3b"],"className":"formeo-column","id":"ab697ce0-0eaa-4bbe-873e-ac072d006450"},"00344c0c-c58c-41ac-89de-3ce41e39abdc":{"config":{"width":"100%"},"children":["8757cdbe-703f-42f9-a0df-c9319ad8ea3c"],"className":"formeo-column","id":"00344c0c-c58c-41ac-89de-3ce41e39abdc"},"1e5a85fe-a10b-4455-a7f0-432f9430a7e1":{"config":{"width":"100%"},"children":["dec3c032-4124-48e5-a8ca-86453bc8dcd4"],"className":"formeo-column","id":"1e5a85fe-a10b-4455-a7f0-432f9430a7e1"},"9c6d7888-14dd-4e1c-82a8-390461196744":{"config":{"width":"100%"},"children":["14d12a9f-de2c-4c5d-80a4-f2042506aeea"],"className":"formeo-column","id":"9c6d7888-14dd-4e1c-82a8-390461196744"},"69ed7fb2-4372-46ca-b780-7b7eadc6ade3":{"config":{"width":"100%"},"children":["b6fbc80b-fa5d-4ae5-aaa4-860992fa02ad"],"className":"formeo-column","id":"69ed7fb2-4372-46ca-b780-7b7eadc6ade3"}},"fields":{"4bcb0c2a-13b0-4cba-b8b9-9c09b21c159a":{"conditions":[{"if":[{"source":"","sourceProperty":"value","comparison":"equals","target":"","targetProperty":"value"}],"then":[{"target":"","targetProperty":"value","assignment":"equals","value":""}]}],"tag":"input","config":{"label":"Input","disabledAttrs":["type"],"lockedAttrs":[]},"meta":{"group":"common","icon":"T","id":"text-input"},"attrs":{"className":"form-control","type":"text"},"id":"4bcb0c2a-13b0-4cba-b8b9-9c09b21c159a"},"12a19cb1-78ef-4c28-afea-cb4b10a7c8d1":{"conditions":[{"if":[{"source":"","sourceProperty":"value","comparison":"equals","target":"","targetProperty":"value"}],"then":[{"target":"","targetProperty":"value","assignment":"equals","value":""}]}],"config":{"label":""},"meta":{"group":"layout","icon":"columns","id":"layout-column"},"id":"12a19cb1-78ef-4c28-afea-cb4b10a7c8d1"},"cc2678d5-4f8a-41e0-bdb9-8349a57e073f":{"conditions":[{"if":[{"source":"","sourceProperty":"value","comparison":"equals","target":"","targetProperty":"value"}],"then":[{"target":"","targetProperty":"value","assignment":"equals","value":""}]}],"tag":"input","config":{"label":"Input","disabledAttrs":["type"],"lockedAttrs":[]},"meta":{"group":"common","icon":"T","id":"text-input"},"attrs":{"className":"form-control","type":"text"},"id":"cc2678d5-4f8a-41e0-bdb9-8349a57e073f"},"83bed6ba-cc20-48db-9285-52615ac221cf":{"conditions":[{"if":[{"source":"","sourceProperty":"value","comparison":"equals","target":"","targetProperty":"value"}],"then":[{"target":"","targetProperty":"value","assignment":"equals","value":""}]}],"tag":"input","config":{"label":"First name","disabledAttrs":["type"],"lockedAttrs":[]},"meta":{"group":"common","icon":"T","id":"text-input"},"attrs":{"className":"form-control","type":"text"},"id":"83bed6ba-cc20-48db-9285-52615ac221cf"},"b157e49c-5479-4dd4-a3c7-ba92e16bcc81":{"conditions":[{"if":[{"source":"","sourceProperty":"value","comparison":"equals","target":"","targetProperty":"value"}],"then":[{"target":"","targetProperty":"value","assignment":"equals","value":""}]}],"tag":"input","config":{"label":"Input","disabledAttrs":["type"],"lockedAttrs":[]},"meta":{"group":"common","icon":"T","id":"text-input"},"attrs":{"className":"form-control","type":"text"},"id":"b157e49c-5479-4dd4-a3c7-ba92e16bcc81"},"4801e4fa-ef70-417e-b2e4-27e92e2ecf3b":{"conditions":[{"if":[{"source":"","sourceProperty":"value","comparison":"equals","target":"","targetProperty":"value"}],"then":[{"target":"","targetProperty":"value","assignment":"equals","value":""}]}],"tag":"input","config":{"label":"Last name","disabledAttrs":["type"],"lockedAttrs":[]},"meta":{"group":"common","icon":"T","id":"text-input"},"attrs":{"className":"form-control","type":"text"},"id":"4801e4fa-ef70-417e-b2e4-27e92e2ecf3b"},"8757cdbe-703f-42f9-a0df-c9319ad8ea3c":{"conditions":[{"if":[{"source":"","sourceProperty":"value","comparison":"equals","target":"","targetProperty":"value"}],"then":[{"target":"","targetProperty":"value","assignment":"equals","value":""}]}],"tag":"input","attrs":{"type":"date","required":false,"className":"form-control"},"config":{"label":"Birthdate"},"meta":{"group":"common","icon":"calendar","id":"date-input"},"id":"8757cdbe-703f-42f9-a0df-c9319ad8ea3c"},"dec3c032-4124-48e5-a8ca-86453bc8dcd4":{"conditions":[{"if":[{"source":"","sourceProperty":"value","comparison":"equals","target":"","targetProperty":"value"}],"then":[{"target":"","targetProperty":"value","assignment":"equals","value":""}]}],"tag":"input","config":{"label":"City","disabledAttrs":["type"],"lockedAttrs":[]},"meta":{"group":"common","icon":"A","id":"text-input-autocomplete"},"attrs":{"className":"form-control autocomplete","type":"text"},"id":"dec3c032-4124-48e5-a8ca-86453bc8dcd4"},"14d12a9f-de2c-4c5d-80a4-f2042506aeea":{"conditions":[{"if":[{"source":"","sourceProperty":"value","comparison":"equals","target":"","targetProperty":"value"}],"then":[{"target":"","targetProperty":"value","assignment":"equals","value":""}]}],"tag":"input","config":{"label":"Bootstrap Button","hideLabel":true,"disabledAttrs":["type"],"lockedAttrs":[]},"meta":{"group":"common","icon":"B","id":"bootstrap-btn"},"attrs":{"className":"btn btn-primary","type":"button","value":"Save"},"id":"14d12a9f-de2c-4c5d-80a4-f2042506aeea"},"b6fbc80b-fa5d-4ae5-aaa4-860992fa02ad":{"conditions":[{"if":[{"source":"","sourceProperty":"value","comparison":"equals","target":"","targetProperty":"value"}],"then":[{"target":"","targetProperty":"value","assignment":"equals","value":""}]}],"tag":"input","config":{"label":"Tags","disabledAttrs":["type"],"lockedAttrs":["required","data-role"]},"meta":{"group":"common","id":"tags-input","icon":"#T"},"attrs":{"className":"form-control tags-input","type":"email","data-role":"tags-input"},"id":"b6fbc80b-fa5d-4ae5-aaa4-860992fa02ad"}}}
`;

    let container = document.querySelector('#formeo-container');
    let formeoOpts = {
        container: container};

    const formeo = new FormeoRenderer(formeoOpts);
        formeo.render(formData);
</script>
</body>
</html>

[JordanGarciaDev]

<!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":"90c2a8ce-05f8-42be-8689-2c5b5723116f","fields":{"6276a8e7-7fa0-4fba-b072-1c576fc5652b":{"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":"Encabezamiento","hideLabel":true,"editableContent":true,"controlId":"html.header"},"content":"<font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">Entrevista&nbsp;<\/font><\/font>","action":[],"id":"6276a8e7-7fa0-4fba-b072-1c576fc5652b"},"592ae124-b8b9-4840-963e-8fbfa65593f9":{"tag":"h1","attrs":{"tag":"h4","className":""},"config":{"label":"Encabezamiento","hideLabel":true,"editableContent":true,"controlId":"html.header"},"content":"<font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">Motivaci\u00f3n y actitud:<\/font><\/font>","action":[],"id":"592ae124-b8b9-4840-963e-8fbfa65593f9"},"e8f60e04-0cde-4675-b199-2c520e3ac55b":{"tag":"textarea","config":{"label":"<font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">1. \u00bfPor qu\u00e9 te interesa formar parte de nuestro equipo en Dental OralCare?<\/font><\/font>","controlId":"textarea"},"attrs":{"required":false},"id":"e8f60e04-0cde-4675-b199-2c520e3ac55b"},"82662354-1025-4b67-9df4-26269ae0aa6c":{"tag":"textarea","config":{"label":"<font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">2. \u00bfQu\u00e9 esperas obtener de esta experiencia trabajando con nosotros?<\/font><\/font>","controlId":"textarea"},"attrs":{"required":false},"id":"82662354-1025-4b67-9df4-26269ae0aa6c"},"3f166a46-0d40-42d4-a477-bfefa9e20a3e":{"tag":"h1","attrs":{"tag":"h4","className":""},"config":{"label":"Encabezamiento","hideLabel":true,"editableContent":true,"controlId":"html.header"},"content":"<font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">Atenci\u00f3n al cliente:<\/font><\/font>","action":[],"id":"3f166a46-0d40-42d4-a477-bfefa9e20a3e"},"6a53c184-10ef-4f84-bdb2-112b58d07a39":{"tag":"textarea","config":{"label":"<font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">1. \u00bfQu\u00e9 significa para ti brindar un excelente servicio al cliente?<\/font><\/font>","controlId":"textarea"},"attrs":{"required":false},"id":"6a53c184-10ef-4f84-bdb2-112b58d07a39"},"75ef231c-7682-4b60-8b32-1122f0e0672b":{"tag":"textarea","config":{"label":"<font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">2. En tu opini\u00f3n, \u00bfcu\u00e1l es la mejor manera de manejar a un paciente insatisfecho o preocupado?<\/font><\/font>","controlId":"textarea"},"attrs":{"required":false},"id":"75ef231c-7682-4b60-8b32-1122f0e0672b"},"f74509ae-6070-42eb-b688-7273a7f5c561":{"tag":"textarea","config":{"label":"<font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">3. \u00bfC\u00f3mo te aseguras de que las necesidades de los pacientes se satisfagan de manera eficaz y emp\u00e1tica?<\/font><\/font>","controlId":"textarea"},"attrs":{"required":false},"id":"f74509ae-6070-42eb-b688-7273a7f5c561"},"2c917a49-e545-4fac-98b9-2437e395565e":{"tag":"h1","attrs":{"tag":"h4","className":""},"config":{"label":"Encabezamiento","hideLabel":true,"editableContent":true,"controlId":"html.header"},"content":"<font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">Trabajo en equipo:<\/font><\/font>","action":[],"id":"2c917a49-e545-4fac-98b9-2437e395565e"},"8320a1dd-097f-4254-91e0-275d9bff36c4":{"tag":"textarea","config":{"label":"<font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">1. \u00bfC\u00f3mo te describir\u00edas como miembro de un equipo?<\/font><\/font>","controlId":"textarea"},"attrs":{"required":false},"id":"8320a1dd-097f-4254-91e0-275d9bff36c4"},"98bf6d16-28fe-4f28-aec1-f563d9842a6e":{"tag":"textarea","config":{"label":"<font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">2. Cu\u00e9ntame sobre una situaci\u00f3n en la que trabajaste en equipo para lograr un objetivo com\u00fan. \u00bfQu\u00e9 papel desempe\u00f1aste en esa experiencia?<\/font><\/font>","controlId":"textarea"},"attrs":{"required":false},"id":"98bf6d16-28fe-4f28-aec1-f563d9842a6e"},"ead0e125-caee-468e-aea0-9159eacdd342":{"tag":"textarea","config":{"label":"<font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">3. \u00bfC\u00f3mo te comunicas con tus compa\u00f1eros para garantizar que todos est\u00e9n al tanto de las tareas y responsabilidades dentro del equipo?<\/font><\/font>","controlId":"textarea"},"attrs":{"required":false},"id":"ead0e125-caee-468e-aea0-9159eacdd342"},"ba8c1e45-312b-4d54-b693-adb848531806":{"tag":"h1","attrs":{"tag":"h4","className":""},"config":{"label":"Encabezamiento","hideLabel":true,"editableContent":true,"controlId":"html.header"},"content":"<font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">Resoluci\u00f3n de problemas y manejo de situaciones dif\u00edciles:<\/font><\/font>","action":[],"id":"ba8c1e45-312b-4d54-b693-adb848531806"},"e0761e21-c4bc-4cd5-a5b7-a88dd033344b":{"tag":"textarea","config":{"label":"<font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">1. \u00bfC\u00f3mo manejas las situaciones de estr\u00e9s o los plazos ajustados en el trabajo?<\/font><\/font>","controlId":"textarea"},"attrs":{"required":false},"id":"e0761e21-c4bc-4cd5-a5b7-a88dd033344b"},"51e4288d-87a5-4bda-9667-16d987939956":{"tag":"textarea","config":{"label":"<font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">2. Cu\u00e9ntame sobre un momento en el que tuviste que tomar una decisi\u00f3n dif\u00edcil en tu trabajo. \u00bfC\u00f3mo lo manejaste?<\/font><\/font>","controlId":"textarea"},"attrs":{"required":false},"id":"51e4288d-87a5-4bda-9667-16d987939956"},"0f90a562-31af-45b6-914e-39b52a85e46d":{"tag":"h1","attrs":{"tag":"h4","className":""},"config":{"label":"Encabezamiento","hideLabel":true,"editableContent":true,"controlId":"html.header"},"content":"<font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">Adaptabilidad y mejora continua:<\/font><\/font>","action":[],"id":"0f90a562-31af-45b6-914e-39b52a85e46d"},"96cfffac-76a5-4270-a98d-d9cc71688d39":{"tag":"textarea","config":{"label":"<font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">1. \u00bfC\u00f3mo te mantienes actualizado\/a sobre las mejores pr\u00e1cticas en tu \u00e1rea de trabajo?<\/font><\/font>","controlId":"textarea"},"attrs":{"required":false},"id":"96cfffac-76a5-4270-a98d-d9cc71688d39"},"b7f16a20-e1fc-4b76-8ae5-6eb92d21783e":{"tag":"textarea","config":{"label":"<font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">2. \u00bfC\u00f3mo manejas el cambio y la adaptaci\u00f3n a nuevas pol\u00edticas o procedimientos dentro de un entorno de trabajo?<\/font><\/font>","controlId":"textarea"},"attrs":{"required":false},"id":"b7f16a20-e1fc-4b76-8ae5-6eb92d21783e"},"2c1a2ef4-d75e-44ba-a816-c2ccc88b5d2d":{"tag":"h1","attrs":{"tag":"h4","className":""},"config":{"label":"Encabezamiento","hideLabel":true,"editableContent":true,"controlId":"html.header"},"content":"<font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">Adaptabilidad y mejora continua:<\/font><\/font>","action":[],"id":"2c1a2ef4-d75e-44ba-a816-c2ccc88b5d2d"},"d6c796b1-0eca-4f2f-a967-9abe5bb87dd4":{"tag":"textarea","config":{"label":"<font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">1. \u00bfC\u00f3mo te mantienes actualizado\/a sobre las mejores pr\u00e1cticas en tu \u00e1rea de trabajo?<\/font><\/font>","controlId":"textarea"},"attrs":{"required":false},"id":"d6c796b1-0eca-4f2f-a967-9abe5bb87dd4"},"6bbd1bac-2b8a-4cb9-bbe6-3733be5b288b":{"tag":"textarea","config":{"label":"<font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">2. \u00bfC\u00f3mo manejas el cambio y la adaptaci\u00f3n a nuevas pol\u00edticas o procedimientos dentro de un entorno de trabajo?<\/font><\/font>","controlId":"textarea"},"attrs":{"required":false},"id":"6bbd1bac-2b8a-4cb9-bbe6-3733be5b288b"},"7cb6a135-e330-404f-80f6-6d2d476b6166":{"tag":"h1","attrs":{"tag":"h4","className":""},"config":{"label":"Encabezamiento","hideLabel":true,"editableContent":true,"controlId":"html.header"},"content":"<font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">Valores y \u00e9tica profesional:<\/font><\/font>","action":[],"id":"7cb6a135-e330-404f-80f6-6d2d476b6166"},"758476f3-c963-49c0-adb3-e77e9244cd3e":{"tag":"textarea","config":{"label":"<font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">1. \u00bfQu\u00e9 principios consideras m\u00e1s importantes a la hora de trabajar en un entorno de atenci\u00f3n al cliente?<\/font><\/font>","controlId":"textarea"},"attrs":{"required":false},"id":"758476f3-c963-49c0-adb3-e77e9244cd3e"},"4422b180-808d-4ef4-b9b4-4b887e029b83":{"tag":"textarea","config":{"label":"<font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">2. \u00bfC\u00f3mo garantizas que tus acciones y decisiones est\u00e9n alineadas con los valores y la misi\u00f3n de la empresa?<\/font><\/font>","controlId":"textarea"},"attrs":{"required":false},"id":"4422b180-808d-4ef4-b9b4-4b887e029b83"},"ec7e1412-7deb-4d3e-94b0-e0594ee4ff29":{"tag":"h1","attrs":{"tag":"h4","className":""},"config":{"label":"Encabezamiento","hideLabel":true,"editableContent":true,"controlId":"html.header"},"content":"<font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">Visi\u00f3n y futuro:<\/font><\/font>","action":[],"id":"ec7e1412-7deb-4d3e-94b0-e0594ee4ff29"},"48ec2c1e-297a-4205-892c-e7e70ec0ffef":{"tag":"textarea","config":{"label":"<font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">1. \u00bfC\u00f3mo te ves contribuyendo al crecimiento y \u00e9xito de la cl\u00ednica en los pr\u00f3ximos a\u00f1os?<\/font><\/font>","controlId":"textarea"},"attrs":{"required":false},"id":"48ec2c1e-297a-4205-892c-e7e70ec0ffef"},"92adeec4-b6e7-4a95-97ba-4c367a4d607c":{"tag":"textarea","config":{"label":"<font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">2. \u00bfQu\u00e9 metas profesionales te gustar\u00eda alcanzar en el futuro y c\u00f3mo crees que este puesto puede ayudarte a lograrlas?<\/font><\/font>","controlId":"textarea"},"attrs":{"required":false},"id":"92adeec4-b6e7-4a95-97ba-4c367a4d607c"},"155167c4-4536-4b70-83c3-91821cdc786b":{"tag":"h1","attrs":{"tag":"h4","className":""},"config":{"label":"Encabezamiento","hideLabel":true,"editableContent":true,"controlId":"html.header"},"content":"<font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">Evaluaci\u00f3n final:<\/font><\/font>","action":[],"id":"155167c4-4536-4b70-83c3-91821cdc786b"},"64d308e1-7338-42bb-9cf9-41817bac309b":{"tag":"textarea","config":{"label":"<font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">\u00bfTienes alguna pregunta sobre el puesto o sobre nuestra cl\u00ednica?<\/font><\/font>","controlId":"textarea"},"attrs":{"required":false},"id":"64d308e1-7338-42bb-9cf9-41817bac309b"},"db4f5c8c-0a7b-4e61-9297-c95fa6ddc510":{"tag":"textarea","config":{"label":"<font style=\"vertical-align: inherit;\"><font style=\"vertical-align: inherit;\">\u00bfC\u00f3mo te asegurar\u00edas de que el ambiente de trabajo sea armonioso y colaborativo para todos los miembros del equipo?<\/font><\/font>","controlId":"textarea"},"attrs":{"required":false},"id":"db4f5c8c-0a7b-4e61-9297-c95fa6ddc510"}},"stages":{"3e6130dc-901f-4a44-856d-0b971383e5b5":{"children":["34c3342e-9f5b-4ea1-9ebd-b69a1e382dbd","7923af55-1433-4980-b3bf-6ccad5f99e17","2e6e435b-2399-4ab7-883d-4a28949a4cc2","536d5d89-7318-413a-8ce2-219076ad944c","5503e017-28df-444f-9f5c-04be547598df","787e44a8-a316-4456-8d37-56b2f351d02b","f7d2ff3a-8e3a-4f79-b1b8-69830d0d5e27","c85ac55c-bf5c-4391-96d5-f57c8e08dbc5","9726396b-ed42-43ad-b997-c77c570cd112","da4fae46-f3e8-43e6-8822-ddfa17f18e9c","7e0a7c23-5b93-407e-ba0c-15395294d009","e0518ba4-4ee2-4a10-af2f-070d856365ba","ed732489-bc7d-4fea-b54f-4c1b56f0c204","740b1092-a44b-483e-9b71-527a6cfbb38e","e1bfed5b-2a0d-4567-a472-0e9ce5835d95","06df795b-3fe8-4c55-a786-b1b5956e044f","76cf4ca6-8ada-41d3-9209-a08adad981db","728f781b-5f9e-45d5-8380-577dc7630e8a","2553b05b-d391-48da-8301-eefeac52c41b"],"id":"3e6130dc-901f-4a44-856d-0b971383e5b5"}},"rows":{"34c3342e-9f5b-4ea1-9ebd-b69a1e382dbd":{"config":{"fieldset":false,"legend":"","inputGroup":false},"children":["116ea8df-87c2-4085-8ed9-e2b7855a9227"],"className":["formeo-row"],"id":"34c3342e-9f5b-4ea1-9ebd-b69a1e382dbd"},"7923af55-1433-4980-b3bf-6ccad5f99e17":{"config":{"fieldset":false,"legend":"","inputGroup":false},"children":["08460f2d-cce6-4841-aa69-5622a147e0e9"],"className":["formeo-row"],"id":"7923af55-1433-4980-b3bf-6ccad5f99e17"},"2e6e435b-2399-4ab7-883d-4a28949a4cc2":{"config":{"fieldset":false,"legend":"","inputGroup":false},"children":["a185762f-0d9c-4d1b-a78f-6bae750e9026"],"className":["formeo-row"],"id":"2e6e435b-2399-4ab7-883d-4a28949a4cc2"},"536d5d89-7318-413a-8ce2-219076ad944c":{"config":{"fieldset":false,"legend":"","inputGroup":false},"children":["1291523f-fa01-4f82-8de1-a55308f9e09a"],"className":["formeo-row"],"id":"536d5d89-7318-413a-8ce2-219076ad944c"},"5503e017-28df-444f-9f5c-04be547598df":{"config":{"fieldset":false,"legend":"","inputGroup":false},"children":["565bd7fe-ce46-459d-b6a1-1623c9cef139"],"className":["formeo-row"],"id":"5503e017-28df-444f-9f5c-04be547598df"},"787e44a8-a316-4456-8d37-56b2f351d02b":{"config":{"fieldset":false,"legend":"","inputGroup":false},"children":["b2d3e15d-2a3a-40c1-9a13-ff1f28ec7f4a"],"className":["formeo-row"],"id":"787e44a8-a316-4456-8d37-56b2f351d02b"},"f7d2ff3a-8e3a-4f79-b1b8-69830d0d5e27":{"config":{"fieldset":false,"legend":"","inputGroup":false},"children":["4d47bf70-32cc-429d-8609-44390830fa2a"],"className":["formeo-row"],"id":"f7d2ff3a-8e3a-4f79-b1b8-69830d0d5e27"},"c85ac55c-bf5c-4391-96d5-f57c8e08dbc5":{"config":{"fieldset":false,"legend":"","inputGroup":false},"children":["018a56be-2eb4-42b4-b133-e451c778456d"],"className":["formeo-row"],"id":"c85ac55c-bf5c-4391-96d5-f57c8e08dbc5"},"9726396b-ed42-43ad-b997-c77c570cd112":{"config":{"fieldset":false,"legend":"","inputGroup":false},"children":["95653f26-9887-4d51-9f66-97b9ca2b1f58"],"className":["formeo-row"],"id":"9726396b-ed42-43ad-b997-c77c570cd112"},"da4fae46-f3e8-43e6-8822-ddfa17f18e9c":{"config":{"fieldset":false,"legend":"","inputGroup":false},"children":["be28bbd8-2919-4ab4-813e-9d4d0d9f9bc8"],"className":["formeo-row"],"id":"da4fae46-f3e8-43e6-8822-ddfa17f18e9c"},"7e0a7c23-5b93-407e-ba0c-15395294d009":{"config":{"fieldset":false,"legend":"","inputGroup":false},"children":["df0e3f8f-dd12-4c68-b464-fff0ea95d42c"],"className":["formeo-row"],"id":"7e0a7c23-5b93-407e-ba0c-15395294d009"},"e0518ba4-4ee2-4a10-af2f-070d856365ba":{"config":{"fieldset":false,"legend":"","inputGroup":false},"children":["5f8998f7-36d9-416e-9a06-abf2d0d2c3e4"],"className":["formeo-row"],"id":"e0518ba4-4ee2-4a10-af2f-070d856365ba"},"ed732489-bc7d-4fea-b54f-4c1b56f0c204":{"config":{"fieldset":false,"legend":"","inputGroup":false},"children":["6e0dbb82-526b-4378-834d-c96f52b588aa"],"className":["formeo-row"],"id":"ed732489-bc7d-4fea-b54f-4c1b56f0c204"},"740b1092-a44b-483e-9b71-527a6cfbb38e":{"config":{"fieldset":false,"legend":"","inputGroup":false},"children":["ca72a0cc-b249-4dd6-9393-f5d6d1a36334"],"className":["formeo-row"],"id":"740b1092-a44b-483e-9b71-527a6cfbb38e"},"e1bfed5b-2a0d-4567-a472-0e9ce5835d95":{"config":{"fieldset":false,"legend":"","inputGroup":false},"children":["69582cca-0dcc-432d-b8e7-a0c0f057ff07"],"className":["formeo-row"],"id":"e1bfed5b-2a0d-4567-a472-0e9ce5835d95"},"06df795b-3fe8-4c55-a786-b1b5956e044f":{"config":{"fieldset":false,"legend":"","inputGroup":false},"children":["ba31cbad-1549-4e15-91f1-99345fc3321b"],"className":["formeo-row"],"id":"06df795b-3fe8-4c55-a786-b1b5956e044f"},"76cf4ca6-8ada-41d3-9209-a08adad981db":{"config":{"fieldset":false,"legend":"","inputGroup":false},"children":["528ff4ae-ef71-4b64-96e6-493383eb976b"],"className":["formeo-row"],"id":"76cf4ca6-8ada-41d3-9209-a08adad981db"},"728f781b-5f9e-45d5-8380-577dc7630e8a":{"config":{"fieldset":false,"legend":"","inputGroup":false},"children":["d898ce1f-4091-48d4-a066-6449ec23988a"],"className":["formeo-row"],"id":"728f781b-5f9e-45d5-8380-577dc7630e8a"},"2553b05b-d391-48da-8301-eefeac52c41b":{"config":{"fieldset":false,"legend":"","inputGroup":false},"children":["6c3803ec-136e-4bc5-aa5a-d8652cce462a"],"className":["formeo-row"],"id":"2553b05b-d391-48da-8301-eefeac52c41b"}},"columns":{"116ea8df-87c2-4085-8ed9-e2b7855a9227":{"config":{"width":"100%"},"children":["6276a8e7-7fa0-4fba-b072-1c576fc5652b"],"className":["formeo-column"],"id":"116ea8df-87c2-4085-8ed9-e2b7855a9227"},"08460f2d-cce6-4841-aa69-5622a147e0e9":{"config":{"width":"100%"},"children":["592ae124-b8b9-4840-963e-8fbfa65593f9"],"className":["formeo-column"],"id":"08460f2d-cce6-4841-aa69-5622a147e0e9"},"a185762f-0d9c-4d1b-a78f-6bae750e9026":{"config":{"width":"100%"},"children":["e8f60e04-0cde-4675-b199-2c520e3ac55b","82662354-1025-4b67-9df4-26269ae0aa6c"],"className":["formeo-column"],"id":"a185762f-0d9c-4d1b-a78f-6bae750e9026"},"1291523f-fa01-4f82-8de1-a55308f9e09a":{"config":{"width":"100%"},"children":["3f166a46-0d40-42d4-a477-bfefa9e20a3e"],"className":["formeo-column"],"id":"1291523f-fa01-4f82-8de1-a55308f9e09a"},"565bd7fe-ce46-459d-b6a1-1623c9cef139":{"config":{"width":"100%"},"children":["6a53c184-10ef-4f84-bdb2-112b58d07a39","75ef231c-7682-4b60-8b32-1122f0e0672b","f74509ae-6070-42eb-b688-7273a7f5c561"],"className":["formeo-column"],"id":"565bd7fe-ce46-459d-b6a1-1623c9cef139"},"b2d3e15d-2a3a-40c1-9a13-ff1f28ec7f4a":{"config":{"width":"100%"},"children":["2c917a49-e545-4fac-98b9-2437e395565e"],"className":["formeo-column"],"id":"b2d3e15d-2a3a-40c1-9a13-ff1f28ec7f4a"},"4d47bf70-32cc-429d-8609-44390830fa2a":{"config":{"width":"100%"},"children":["8320a1dd-097f-4254-91e0-275d9bff36c4","98bf6d16-28fe-4f28-aec1-f563d9842a6e","ead0e125-caee-468e-aea0-9159eacdd342"],"className":["formeo-column"],"id":"4d47bf70-32cc-429d-8609-44390830fa2a"},"018a56be-2eb4-42b4-b133-e451c778456d":{"config":{"width":"100%"},"children":["ba8c1e45-312b-4d54-b693-adb848531806"],"className":["formeo-column"],"id":"018a56be-2eb4-42b4-b133-e451c778456d"},"95653f26-9887-4d51-9f66-97b9ca2b1f58":{"config":{"width":"100%"},"children":["e0761e21-c4bc-4cd5-a5b7-a88dd033344b","51e4288d-87a5-4bda-9667-16d987939956"],"className":["formeo-column"],"id":"95653f26-9887-4d51-9f66-97b9ca2b1f58"},"be28bbd8-2919-4ab4-813e-9d4d0d9f9bc8":{"config":{"width":"100%"},"children":["0f90a562-31af-45b6-914e-39b52a85e46d"],"className":["formeo-column"],"id":"be28bbd8-2919-4ab4-813e-9d4d0d9f9bc8"},"df0e3f8f-dd12-4c68-b464-fff0ea95d42c":{"config":{"width":"100%"},"children":["96cfffac-76a5-4270-a98d-d9cc71688d39","b7f16a20-e1fc-4b76-8ae5-6eb92d21783e"],"className":["formeo-column"],"id":"df0e3f8f-dd12-4c68-b464-fff0ea95d42c"},"5f8998f7-36d9-416e-9a06-abf2d0d2c3e4":{"config":{"width":"100%"},"children":["2c1a2ef4-d75e-44ba-a816-c2ccc88b5d2d"],"className":["formeo-column"],"id":"5f8998f7-36d9-416e-9a06-abf2d0d2c3e4"},"6e0dbb82-526b-4378-834d-c96f52b588aa":{"config":{"width":"100%"},"children":["d6c796b1-0eca-4f2f-a967-9abe5bb87dd4","6bbd1bac-2b8a-4cb9-bbe6-3733be5b288b"],"className":["formeo-column"],"id":"6e0dbb82-526b-4378-834d-c96f52b588aa"},"ca72a0cc-b249-4dd6-9393-f5d6d1a36334":{"config":{"width":"100%"},"children":["7cb6a135-e330-404f-80f6-6d2d476b6166"],"className":["formeo-column"],"id":"ca72a0cc-b249-4dd6-9393-f5d6d1a36334"},"69582cca-0dcc-432d-b8e7-a0c0f057ff07":{"config":{"width":"100%"},"children":["758476f3-c963-49c0-adb3-e77e9244cd3e","4422b180-808d-4ef4-b9b4-4b887e029b83"],"className":["formeo-column"],"id":"69582cca-0dcc-432d-b8e7-a0c0f057ff07"},"ba31cbad-1549-4e15-91f1-99345fc3321b":{"config":{"width":"100%"},"children":["ec7e1412-7deb-4d3e-94b0-e0594ee4ff29"],"className":["formeo-column"],"id":"ba31cbad-1549-4e15-91f1-99345fc3321b"},"528ff4ae-ef71-4b64-96e6-493383eb976b":{"config":{"width":"100%"},"children":["48ec2c1e-297a-4205-892c-e7e70ec0ffef","92adeec4-b6e7-4a95-97ba-4c367a4d607c"],"className":["formeo-column"],"id":"528ff4ae-ef71-4b64-96e6-493383eb976b"},"d898ce1f-4091-48d4-a066-6449ec23988a":{"config":{"width":"100%"},"children":["155167c4-4536-4b70-83c3-91821cdc786b"],"className":["formeo-column"],"id":"d898ce1f-4091-48d4-a066-6449ec23988a"},"6c3803ec-136e-4bc5-aa5a-d8652cce462a":{"config":{"width":"100%"},"children":["64d308e1-7338-42bb-9cf9-41817bac309b","db4f5c8c-0a7b-4e61-9297-c95fa6ddc510"],"className":["formeo-column"],"id":"6c3803ec-136e-4bc5-aa5a-d8652cce462a"}}}`;

    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>

[kevinchappell]

based on the comments there were a few things happening in this issue. some were actually #377

all should be resolved now. I am currently working on a rewrite of conditions. once the conditions rewrite is finished focus will be on adding more tests to ensure stability.

[kevinchappell]

🎉 This issue has been resolved in version 3.0.6 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀