How to add custom attributes to AlloyUI form builder?

Question

I want to do something like this jsfiddle example , I need to put some custom attributes on left panel properties. Below I tried to make similarly but I can't drag the field

YUI().use('aui-form-builder',function (Y) {

Y.MyFormCustom = Y.Component.create({ NAME: 'form-node',

      ATTRS: {
          type: {
              value: 'custom'
          },
          customAttr: {
              validator: Y.Lang.isString,
              value: 'A Custom default'
          }
      },

      EXTENDS: Y.FormBuilderFieldBase,

      prototype: {
          getPropertyModel: function () {
              var instance = this;

              var model = Y.FormBuilderFieldBase.superclass.getPropertyModel.apply(instance, arguments);

              model.push({
                  attributeName: 'customAttr',
                  name: 'Custom Attribute'
              });

              return model;
          }
      }
  });

  Y.FormBuilder.types['custom'] = Y.MyFormCustom;

  var availableFields = [
    {
    iconClass: 'form-builder-field-icon-button',
    label: 'Button',
    type: 'custom'
    }
  ];

  myform= new Y.FormBuilder({
      availableFields: availableFields,
      boundingBox: '#myHolder'
  }).render();

I don't know why the form is not appearing. Any help will be appreciated.

Answer 1

Your example has been very helpful to me because I also needed to extend the Form Builder fields.

The fix to the above is simple. Replace the line:

Y.FormBuilder.types['custom'] = Y.MyFormCustom;

by

Y.FormBuilderField.types['custom'] = Y.MyFormCustom;

This solution is inspired from the source code found in the Alloy UI API. See link: AlloyUI Form Builder

Cheers