diff --git a/docs/formBuilder/overview.md b/docs/formBuilder/overview.md
index 0a8046c63..8dd484b2a 100644
--- a/docs/formBuilder/overview.md
+++ b/docs/formBuilder/overview.md
@@ -99,7 +99,19 @@ static get definition() {
}
}
```
-
+
+* `disabledAttrs` - used primarily by control plugins. This allows you to disable default attrs for a control plugin where attributes are not used by the plugin or serve no purpose.
+```javascript
+static get definition() {
+ return {
+ disabledAttrs: [
+ 'description',
+ 'placeholder',
+ ],
+ }
+}
+```
+
The label for a control in the list of form builder controls should be defined as the translation for the `type`. E.g. if you want to rename the label for a textarea, you would update the mi18n translation for `textarea`, or define an override in the `i18n` property.
# Layouts
diff --git a/src/js/form-builder.js b/src/js/form-builder.js
index 1d7ecc038..1a03e425e 100644
--- a/src/js/form-builder.js
+++ b/src/js/form-builder.js
@@ -587,6 +587,11 @@ function FormBuilder(opts, element, $) {
useDefaultAttr.push(!typeDisabledAttrs.includes(attr))
}
+ if (typeClass.definition.hasOwnProperty('disabledAttrs')) {
+ const userDisabledAttrs = typeClass.definition.disabledAttrs
+ useDefaultAttr.push(!userDisabledAttrs.includes(attr))
+ }
+
if (typeClass.definition.hasOwnProperty('defaultAttrs')) {
const userAttrs = Object.keys(typeClass.definition.defaultAttrs)
useDefaultAttr.push(!userAttrs.includes(attr))
diff --git a/tests/form-builder-custom.test.js b/tests/form-builder-custom.test.js
new file mode 100644
index 000000000..f55dbe8de
--- /dev/null
+++ b/tests/form-builder-custom.test.js
@@ -0,0 +1,97 @@
+require('./setup-fb')
+require('./../src/js/form-builder.js')
+
+beforeAll(() => {
+ window.fbControls = []
+
+ window.fbControls.push(function(controlClass) {
+ class controlTest extends controlClass {
+ static get definition() {
+ return {
+ icon: 'T',
+ i18n: {
+ default: 'Test Control Plugin',
+ },
+ disabledAttrs: [
+ 'description', 'placeholder',
+ ],
+ defaultAttrs:{
+ 'Extra Content': {
+ 'label': 'extracontent',
+ 'value' : '',
+ 'type': 'textarea'
+ }
+ }
+ }
+ }
+
+ build() {
+ this.dom = this.markup('div', null, this.config)
+ return {
+ field: this.dom,
+ layout: 'hidden',
+ }
+ }
+ }
+
+ // register this control for the following types & text subtypes
+ controlClass.register('testPlugin', controlTest)
+ })
+})
+
+describe('controlPlugins', () => {
+ test('ensure plugin appears in fieldTypes', async () => {
+ expect(window.fbControls).toHaveLength(1)
+ const config = {}
+
+ const fbWrap = $('
')
+ const fb = await $(fbWrap).formBuilder(config).promise
+
+ expect(fb.actions.getFieldTypes()).toContain('testPlugin')
+ })
+
+ test('add control plugin to stage', async () => {
+ const config = {}
+
+ const fbWrap = $('
')
+ const fb = await $(fbWrap).formBuilder(config).promise
+
+ const field = {
+ type: 'testPlugin',
+ class: 'form-control'
+ }
+ fb.actions.addField(field)
+
+ expect(fb.actions.getData()).toHaveLength(1)
+ })
+
+ test('control plugin can disable attrs', async () => {
+ const config = {}
+
+ const fbWrap = $('
')
+ const fb = await $(fbWrap).formBuilder(config).promise
+ const field = {
+ type: 'testPlugin',
+ class: 'form-control'
+ }
+ fb.actions.addField(field)
+
+ expect(fbWrap.find('.label-wrap')).toHaveLength(1)
+ expect(fbWrap.find('.description-wrap')).toHaveLength(0)
+ expect(fbWrap.find('.placeholder-wrap')).toHaveLength(0)
+ })
+
+ test('control plugin can set default attrs', async () => {
+ const config = {}
+
+ const fbWrap = $('
')
+ const fb = await $(fbWrap).formBuilder(config).promise
+ const field = {
+ type: 'testPlugin',
+ class: 'form-control'
+ }
+ fb.actions.addField(field)
+
+ expect(fbWrap.find('textarea[name="Extra Content"]')).toHaveLength(1)
+ })
+})
\ No newline at end of file
diff --git a/tests/form-builder.test.js b/tests/form-builder.test.js
index 06ed06076..af753bb83 100644
--- a/tests/form-builder.test.js
+++ b/tests/form-builder.test.js
@@ -522,4 +522,30 @@ describe('FormBuilder disabling attributes', () => {
expect(fbWrap.find('.className-wrap').css('display')).toBe('none')
expect(fbWrap.find('.label-wrap').css('display')).toBe('block')
})
+
+ test('attributes not on stage when disabled via typeUserDisabledAttrs', async () => {
+ const config = {
+ typeUserDisabledAttrs: {'text': ['label','description']},
+ }
+
+ const fbWrap = $('
')
+ const fb = await $(fbWrap).formBuilder(config).promise
+ const field = {
+ type: 'text',
+ class: 'form-control'
+ }
+ fb.actions.addField(field)
+ const field2 = {
+ type: 'textarea',
+ class: 'form-control'
+ }
+ fb.actions.addField(field2)
+ expect(fbWrap.find('.form-field[type="text"] .subtype-wrap')).toHaveLength(1)
+ expect(fbWrap.find('.form-field[type="text"] .label-wrap')).toHaveLength(0)
+ expect(fbWrap.find('.form-field[type="text"] .description-wrap')).toHaveLength(0)
+
+ expect(fbWrap.find('.form-field[type="textarea"] .subtype-wrap')).toHaveLength(1)
+ expect(fbWrap.find('.form-field[type="textarea"] .label-wrap')).toHaveLength(1)
+ expect(fbWrap.find('.form-field[type="textarea"] .description-wrap')).toHaveLength(1)
+ })
})
\ No newline at end of file