search

Draggable / formeo

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

Columns not validating with string classname #368

Open kevinchappell opened 4 days ago

kevinchappell commented 4 days ago

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:

image

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:

image

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 https://github.com/Draggable/formeo/issues/359#issuecomment-2482618073

JordanGarciaDev commented 2 days ago

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:

image

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 commented 1 day ago

image