draggable / formeo Goto Github PK

Hi,

Appreciate you're still very early stage, but it might be worth considering input grids (a collection of inputs that in the render world allow a submitter to add multiples of the collection). This is a pretty common requirement for data capture and would be a great feature.

Thanks for all the work, looking good so far.

The checkbox to set the fieldset option of a row is not visible and thus the option can't be activated. The changes in #75 should be the cause. The checkbox within an input group have to be excluded from them or at least overwritten. The follwing styles are needed to show them:
opacity: 1; width: auto; position: static

Hi Kevin, Salesforce have launched a new framework called lightning framework and this library doesn't work with lightning framework.

There are some variable which being used without declaring them .

Hello guys,

Trying to import formeo through npm and use its throwing error

here is the code

import Formeo from 'formeo'

function renderDataLayout (result) {
  console.log(result.data)
  var dataLayout = JSON.stringify(result.data)
  let renderContainer = document.querySelector('.render-form-editlayout')

  sessionStorage.removeItem('formData')
  sessionStorage.setItem('formData', dataLayout)

  let container = document.querySelector('.build-wrap-editlayout')

  var fbOptions = {
    container,
    allowEdit: true,
    controls: {
      groupOrder: [
        'common',
        'layout'
      ]
    },
    svgSprite: 'https://draggable.github.io/formeo/assets/img/formeo-sprite.svg',
    sessionStorage: true,
    editPanelOrder: ['attrs', 'options']
  }

  var formeo1 = new Formeo(fbOptions)

  setTimeout(function () {
    formeo1.render(renderContainer)
  }, 1000)
}

Error

Uncaught (in promise) TypeError: __WEBPACK_IMPORTED_MODULE_1_formeo___default.a is not a constructor
    at renderDataLayout (Fillform.vue?d386:48)
    at eval (Fillform.vue?d386:67)

@kevinchappell

When inserting several options in the checkbox field, these html elements assume the same ID (error) with obvious error when loading initial values or error while saving data.
You need to generate different IDs for each checkbox you have entered

I apologize for English, I used an automatic translator
Luigi Scavelli

It should be possible to have the different sections (form action buttons, stage, controls etc) added anywhere on the page. This should be definable via a container option that accepts either a JS dom object or a selector.

Details: On mouseup when sorting controls an element is appended to the stage.
Browser: Firefox 46.0.1

Currently attribute's label is displayed as attrs.attributeName . Is there a way to edit the Label?And I need to add some additional parameters to the attrs as well like 'type','multiple'
{
"tag": "select",
"attrs": {
"type": "select",
"value": "",
"formElementId": "296",
..
}
}

I've just followed the install instructions.
I've got NodeJS and Webpack installed, cloned the repo and ran npm install

When attempting to npm run dev I get the error:

npm ERR! missing script: dev

I am running on windows.
Any help would be appreciated, thank you

I am trying to render a form created using Formeo but not successful in doing so (Trying to render a form for actual users to use). Here is the script I am using.

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

const formeo = new window.Formeo(formeoOpts, formData);
formeo.render(renderContainer);

Upon running it, the browser console returns an error 'formeo.render is not a function'.

Add the ability to define an output template for collected answers under control.output.template. Radio input example:

Q: How does the patient feel?
A: well

Output: "The patient feels well"

This would be defined as control.output.template: 'The patient feels {{answer}}'

for multiple choice

control.output.template should accept a String or Function for value.
When a function is supplied, the question's answers and control configuration are supplied as arguments.

Dear Kevin
I try to restart with your plugin and follow the Formeo Guidelines but get an error when trying to run the command:
npm install && npm run dev
Find hereafter the npm log
If you could advise me...

npm-debug.txt

Hi,

I am looking to integrate Formeo into a plugin we are building for a client. The builder will be in the admin area with the rendering of the form visible to frontend users.

I have enqueued the required scripts and have the form builder visible in the admin area but whenever I click on any Formeo buttons (such as edit field etc) the page reloads....any idea what is causing this?

Thanks in advance,

Will

Hi,
I have added this package via yarn, but it only provides the formeo.min.js and no css-file, as you can see in the picture. Am I missing something?

Please help.

Regards,
apmyp1990

Are there any plans to update the package with onSave \ onUpdate examples? I've tried a few different ways and I can't get it work, does anyone have a working example?

This is what I have currently, but have tried a few different ways;

$(document).ready(function () {
    new window.Formeo({
        container: '.build-form',
        style: '/assets/css/formeo.min.css',
        debug: true,
        onSave: function() {
            console.log("save");
        }
    });

    console.log("ready!");
});

So, is there a way to add new "blocks" to the form builder, with input types not in it? And if so, is it possible to add a bock that has 2 or more inputs? For example, a single block that has username and password. And finally, is it possible to disable existing input types?
Thanks!

is it possible to use bootstrap styling?

How to trigger error:
Add select element -> remove one of the higher options -> Edit label/value for any of the options bellow->
"Uncaught TypeError: Cannot read property 'label/value' of undefined".
The formData show me that the removal of an option will set the option to "null" if done in a wrongful order.

"options": [ { "label": "Option 1", "value": "option-1", "selected": false }, { "label": "Option 2", "value": "option-2", "selected": false }, { "label": "Option 3", "value": "option-3", "selected": false }, { "label": "Option 4", "value": "option-4", "selected": false }, null ]

Any suggestions on how this could be fixed? I've spent hours trying to figure it out without no progress, what so ever.

Thanks in advance

Hey Guys,

Love the library. Recently started using it for a project to allow custom surveys to be sent out. I got the form builder to load, and got he ajax call back to my api. I have the formData to a mongo db. Then I got an ajax to load it back. But I can't get the form to load back from that form data.

It looks like the order of the object is not preserved when putting it into mongo. Could that be the issue?

Please see the attached screenshot

Effective CSS:

.formeo input[type="checkbox"] + .checkable::after, .formeo input[type="checkbox"] + .checkable::before, .formeo input[type="radio"] + .checkable::after, .formeo input[type="radio"] + .checkable::before {
left:50%
}

dragging any controls into another causing error.
and then user unable to drag anything

hi, i try to disable elements from common doing this

 controls: {
		    disable: {
		        elements: ['input']
		    },

But i get an error

libs.min.js:1 Uncaught (in promise) TypeError: Cannot read property 'config' of undefined
    at e.isAllowedAttr (libs.min.js:1)
    at e.panelContent (libs.min.js:1)
    at libs.min.js:1
    at Object.forEach (libs.min.js:1)
    at e.editPanel (libs.min.js:1)
    at libs.min.js:1
    at Object.forEach (libs.min.js:1)
    at e.fieldEdit (libs.min.js:1)
    at new e (libs.min.js:1)
    at DOM.addField (libs.min.js:1)

any help with this?

Sorry to be asking obvious questions but I'm not quite sure how the onSave event works and where to put it exactly. Can you show me an example of the onSave function that shows the data?

This is how I have done it:

const options = {
            container: ReactDOM.findDOMNode(this.refs.builder),
            svgSprite: 'https://draggable.github.io/formeo/assets/img/formeo-sprite.svg',
            i18n: {
                langsDir: '/assets/lang/',
                langs: [
                    'en-US',
                ],
            },
            onSave: (evt) => {
                const attr = window.prompt(evt.message.attr);
                let val;
                if (attr) {
                    val = String(window.prompt(evt.message.value, ''));
                    evt.addAction(attr, val);
                }
            }
        };

But it doesn't do anything at all.

i dont find how to load a created form to edit it, is it possible to do with formeo?

Good Afternoon, Would you have any basic documentation on how to specify or add function to the "Save" button as well as adding new controls?

I am also struggling with the svg icons due to the way my program is setup i think. Is there a way to override the svg and utilize local icons?

The onUpdate event does not get triggered when a new element is dropped on the stage unless you add then delete an element.

This bug is replicated in this codepen

When instantiating formeo in IE 11 I get an "Object doesn't support this action" error. formeo.min.js (6,37350).

Elements like Header and Paragraph are not editable. These should accept text and be format-able.

Just curious if the Settings button is currently not ready, or if it's an issue. When I click it, it doesn't do anything. I'm assuming it should (or will) open up some form wide settings that you can specify.

And, on this note, wondering if the settings will be something extendable so adding custom settings to a particular form would be doable.

Provide API to filter Controls and other elements in Formeo

Hello,

I want to use this for a project and I was wondering if you had a roadmap of ideas until 1.0? I'd like to help where I can, but I don't see any sort of list of things to be done/are done.

Thanks

Kevin, soem feedback. I've periodically played with the demo and I just can't seem to create columns. And when I do, it's just plain luck. Personally, I don't find the columns intuitive. Is it still a work in progress? My suggestion is to rework it so it's obvious how to drop a control onto a column. Perhaps a landing zone on either side of a row.

Steps to reproduce:

1. Add 5 or more form elements to stage
2. Drag them into the same row

Be able to render a formeo form by calling:

var formeo = new Formeo(formeoOpts, JSON.stringify(formJSONData));

and get formeo FormData by calling:

formeo.formData()

However, this FormData json contains ONLY form elements data, without input data in it .

Is there possible to get this ?

FormData json data like this:

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"
        }
    }
}

Hi,
I want to have control grouping ability in jQuery formbuilder something like "row" control in formeo. How can I use "row" in jquery formbuilder? Is it possible to move it there? because it is like architectures are different.

Seen the Custom in Define column widths Layout Preset
and then try to restore it with 50:50 or other... nothing happens

Saving the locale a form is created in will make it easier to create translations.

It's not quite clear how we should start importing this package, the only place it mentions it is here:

To start building forms with this module include formeo.min.js and formeo.min.css in your project and call:

There is no formeo.min.css file in the project and the formeo.min.js file is in the demo folder.

Can you please provide some clear instructions on how to get this set up as the folder structure is quite confusing.

Thanks

Hi,

We are about to start developing a custom plugin that requires a form builder capability. Formeo looks like it might be the right one for the job but doesn't seem to be quite ready for use yet? Can you give me any update on when it might be production ready and have documentation available?

Thanks in advance,

Will

I added a new attribute with the name "class" to a radio and checkbox group, but it doesn't appear to add the attribute to the inputs.

Edit: it appears to not add any attribute to the input, no matter what I name it.

Hi ,
in the onSave event I json all formData to the server. This works fine, but it seems that only the values of text fields are being sent. Other field types have no 'value' index in field->attrs[].

Joachim

Hi,
First of all I'd like to thank you for all your work. Formeo is a great plugin. I've tried to attach it to my project today but it looks like src folder isn't part of bower pack - bower install formeo outputs only dist folder. It basically means that lang folder isn't available and needs to be uploaded separately. Is it an issue or this is what you intended?

Thank you,
Max

Translations are working great but UI needs some support for RTL languages like تونسي and فارسى.

Recommend adding a dir string to the language files to later be read by the editor.

Any provision for conditional logic.

ie. if boolean checked show a field

This issue should be addressed in 2 parts.

1. Individual options have their own correct label, however even when defining a label for the field in config.label of field config object, it still does not appear.
2. Adding an empty options to a field config object should create the options panel without options. Currently it causes an error.

Any component that has to be rendered to the dom and manipulated should now be a directive, isolate code that is pure logic into services, expose the Angular-ized version through an elegant and extensible API.

Make use of isolated scopes to provide the user with the ability to propagate changes only by supplying parameters.

Can I use formBuilder features as (add custom control rate control ) in formeo plugin?
I tried to do but it is noot working