Enhancements

[eradin]

File this under feature enhancements:

1. I would like to see an api accessible "data" stash per field. I currently have a user amendable form that has several mandatory fields (as opposed to required) that the user can't delete. The way I implemented this is by adding a class called mandatory to the class attribute in the default form data they start with. I add additional javascript to detect when they attempt to delete a mandatory field. Ideally, the class attribute is not the best place to stash this mandatory attribute but it works for me. I would like a hidden attribute that would be included in a getData call but not visible in the field configuration panel. The "stash" would be a programmer level attribute that could store anything the programmer wanted for later use.

2. If the current implementation is going to load asynchronously, instead of a promise, which is a rather techie solution, you should implement a few events like formbuilder.event.loaded and renderer.event.loaded. I'm sure you could think of a few others (how about formbuilder.event.openAttributePanel). I find myself getting around some of the limitations by subclassing. This requires knowledge of the dom structure which could theoretically change in future releases and break the implemented code. More api level events and methods would really round out this product.

3. Just to chime in once again, how about multi-columns? I see formeo is looking much better these days. Would love to have it here in formbuilder too. Hopefully we won't have to wait much longer. ;-) Implemented by Bootstrap feature

Thanks for a great product.

[spasarto]

If anyone is looking for a column solution, this approach is a bit hacky, but gets the job done.

1. create a new template called "grouper"

2. create a new template called "endgrouper"

3. Override appendFormFields with the following code. The sample below relies on bootstrap's grid system, but can be adapted to other systems.

      Element.prototype.appendFormFields = function(fields) {
        if (!Array.isArray(fields)) {
          fields = [fields];
        }
   
        const renderedFormWrap = document.createElement("div");
        renderedFormWrap.className = "rendered-form container";
        let currentContainer = renderedFormWrap;
   
        this.appendChild(renderedFormWrap);
        fields.forEach(field => {
          if (field.className.includes("fb-grouper")) {
            const colGroup = document.createElement("div");
            colGroup.className = "rendered-form row";
            currentContainer = colGroup;
            renderedFormWrap.appendChild(colGroup);
   
          } else if (field.className.includes("fb-endgrouper")) {
            currentContainer = renderedFormWrap;
   
          } else {
            if (currentContainer !== renderedFormWrap) {
              field.className += " col";
   
            }
            currentContainer.appendChild(field);
          }
          // field.dispatchEvent(events.fieldRendered); I didn't have access to events, and didn't need this.
        });
      };
   

[criticalfault]

I came up with just adding fields as class names. This uses foundation, but it seems to work alright for me.

So something like this:

var classList = {
                  'small-12 medium-12 large-12 columns': 'Full',
                  'small-12 medium-6 large-6 columns': 'Half',
                  'small-12 medium-12 large-4 columns': 'Third', 
                  'small-12 medium-6 large-3 columns': 'Quarter'
                }

typeUserAttrs: 
    {
        text: 
        {
            className: 
            {
                label: 'Class',
                options: classList  
            }
        }
}