[Question] change the editForm fields for htmlelement based custom component.

[marcus-at-localhost]

I build a custom component, based on the html element. It's adding a predefined HTML Element (H1).

So far everything works, now I want to use a normal text field for the content, instead of the ace code editor. And I want to hide the field to define the HTML Tag.

This is my custom Element code:

 var HtmlComponent = Formio.Components.components.htmlelement;

 function HeaderComponent(component, options, data) {
 	HtmlComponent.prototype.constructor.call(this, component, options, data);
 }

// Perform typical ES5 inheritance
HeaderComponent.prototype = Object.create(HtmlComponent.prototype);
HeaderComponent.prototype.constructor = HeaderComponent;

// see: https://github.com/formio/formio.js/blob/master/src/components/html/HTML.js

 HeaderComponent.schema = function() {
 	return HtmlComponent.schema({
 		type: 'header',
 		tag: 'h1'
 	});
 };

 HeaderComponent.builderInfo = {
 	title: 'Header',
 	group: 'basic',
 	icon: 'fa fa-header',
 	weight: 70,
 	documentation: 'http://help.form.io/userguide/#table',
 	schema: HeaderComponent.schema()
 };

 HeaderComponent.prototype.render = function(element) {

 	return this.renderTemplate('html', {
 		component: this.component,
 		tag: this.component.tag,
 		attrs: this.component.attrs || {},
 		content: this.content,
 		singleTags: this.singleTags,
 	});
 };

// Use the htmlelement component edit form to build the form element
HeaderComponent.editForm = Formio.Components.components.htmlelement.editForm;

// Register the component to the Formio.Components registry.
Formio.Components.addComponent('header', HeaderComponent);

I suspect it has to do with this, but I can't tell, where to put this schema.

Thanks for any hint.

[randallknutson]

HeaderComponent.editForm has the edit form. You'll probably want to modify it to make your changes. Just look through the editForm and find the right component and make the changes to it.

[marcus-at-localhost]

I tried a few things, but I get lost in all the different json keys.

I made a fiddle with my custom Header Component. http://jsfiddle.net/nv9o51q3/2/

I couldn't find a way to modify HeaderComponent.editForm as advised, so I tried to overwrite the editForm key for my Header component in the init call, but there, I can only ignore fields.

How to achieve this?

And how can I set the weight in my builder.custom panel?
Do I have to write the full JSON schema or is it enough to set the keys I want to have changed and they get merged?

I hope that makes sense. Thank you.

[randallknutson]

When setting the editForm directly you need to send the whole form json. If you use the config in the component definition there is an extend functionality like this: https://github.com/formio/formio.js/blob/master/src/components/html/HTML.form.js#L7-L24

[marcus-at-localhost]

Thank you for pointing this out.

So I suppose I am able to merge my configuration this way:

HeaderComponent.editForm([{
      key: 'api',
      ignore: true,
    }
]);

but it doesn't do anything (removing the API tab) http://jsfiddle.net/0xfwh3cu/2/

(sorry for asking for support here, but gitter is not really active and hard to search in, and I found most solutions so far here.)

[travist]

I believe you need to add the array in "components" (i have not tried this so not sure if it would work, but it should)

HeaderComponent.editForm({
  components: [{
      key: 'api',
      ignore: true,
    }
]
});

[marcus-at-localhost]

@travist thank you. I tried it, but no luck http://jsfiddle.net/0xfwh3cu/4/ :/

From the code that @randallknutson linked to[1] and the compiled source [2]

it should be just

[{
      key: 'api',
      ignore: true,
    }
]

that gets merged, but it doesn't do anything (or I'm missing something)

I'm trying really hard to find a rule of thumb when and how to use what keys and where (switching between chrome console, source code, docs and trial&error), but it's still overwhelming with all those options. So much potential.

[1] https://github.com/formio/formio.js/blob/master/src/components/html/HTML.form.js#L7-L24
[2]

[randallknutson]

editForm is a function that returns an edit form. The edit form is NOT an array but an edit form object. The object contains a components array. Your best bet is to replace the function with a function that returns the form object with the components that you want.

[marcus-at-localhost]

ok, I almost gave up, but I managed to customize the edit form for my custom component.

The solution to merge custom definitions was to use, as @randallknutson recommended a function and via trial and error I found the HtmlComponent.editForm() to be working. (In hindsight, it makes sense)

HeaderComponent.editForm = function() {
 	return HtmlComponent.editForm([
    {
      key: 'layout',
      ignore: true
    }
  ]);
 };

A working jsfiddle is here: http://jsfiddle.net/0xfwh3cu/9/

My custom Header component is derived from the htmlelement, but removes a bunch of tabs and form fields in the component editor.

The last question I have is: How do I turn the content key from a textarea into a simple textfield?

How can I overwrite this field?

Thanks so far for the hints...

[marcus-at-localhost]

I have to come back to this.

For my custom component I'm able to overwrite most components in the modal.
I can overwrite the ignore keys per tabs and set the label of the tabs, but I just can't change field types like below. I want to replace the Ace.js editor with a simple textfield, but none of these changes (change of label or type) gets applied.

http://jsfiddle.net/23f1g485/3/

HeaderComponent.editForm = function() {
 	return HtmlComponent.editForm([
    {
      label: 'OVERWRITE ME',
      weight: 100,
      key: 'display',
      ignore: false,
	  components:[
		{
			key: 'refreshOnChange',
			ignore: true
		},
		{

			// originally a textarea with Ace editor.
			type: 'textfield',
			key: 'content',
			input: true,
			ignore: false,
			//editor: 'ace',
			//rows: 10,
			//as: 'html',
			label: 'xContent'
			weight: 80
		}
]
    }
  ]);
 };

I went through the code with the debugger and tried to make sense out of it, but at some point (presumably here: https://github.com/formio/formio.js/blob/90c7c71b31/src/components/_classes/component/Component.form.js) the default settings overwrite my custom settings and nothing happens.
ignore: true, works though... which is weird.

If someone could make that fiddle (http://jsfiddle.net/23f1g485/3/) work, that would be fantastic (or maybe it's a bug in the code)

Thanks.

[thiagomeireless]

Hey @marcus-at-localhost, did you find a solution for this problem?

I'm also trying to change some of the default keys, like changing the label/tooltip of the hidden checkbox in textfield, but no success.

I can create new checkboxes with custom keys without problem, setting the desired label/tooltip, but I need to use the hidden key to keep it's functionality.

[marcus-at-localhost]

@thiagomeireless unfortunately not. ignore is the on accepted key. Maybe some day there will be a solution. Or I guess, if we really want to add/change fields in the formbuilder, we have to extend and build from the source...

[vlont]

Maybe that will help:

formio/angular#554 (comment)

[marcus-at-localhost]

New docs helped :) https://help.form.io/developers/custom-components#header-component