How to extend basic component field properties

[dslshweta]

We would like to extend basic components field properties provided by formio in our Angular project.
I am using angular-formio as base. How we can extend components in this.

Screenshot attached for what addons we need.

1. Add a new tab along with display as - basic
2. Add new field properties as - Business logic , which will be normal text field same as label.

[asalhani]

@dslshweta You can achive this by playing with render part formio.js
The above library is considred as the core for both render and builder.
Now, after clonning the formio.js repo, check src >> components >> datepicker.
Check the file "Datepicker.edit.config.js" and see how the developer is adding a custom checkbox on the designer default screen.

[dslshweta]

@asalhani You mean we would need to fork on with formio.js library. Is it possible to achieve it in angular2 without changing the library code?

[asalhani]

@dslshweta Since on my project where I used formio library, I had to build a couple of custom components to fulfill my requirements. Initially, I developed the components on my Angular project. The issue raised was how I can inject (register) the edit configurations for a custom component. I you saw on my answer to your other question on how to register a component in Angular 2+ project, this can be achieved easily by calling the following line in your Module initialization:

import { Formio } from 'formiojs';  
...
export class AppModule {
  constructor() {
   Formio.registerComponent('<CUSTOM_COMPONENT_NAME>', <CUSTOM_COMPONENT_CLASS>);
  }
}

I tried to do the same to register edit form but I couldn't. Therefore, I forked the formio.js library and I moved my custom component to there, I added my edit form and everything worked as expected.

[dslshweta]

Well as per my requirements, We would not prefer forking the formio.js library and making changes in core js.
@travist - Can you confirm if we can and how to achieve above requirements (as shown in diagram) using angular-formio in form builder?

[asalhani]

I totally agree with you. Fortunately just yesterday @travist published a gist demostrating what you want to achive
https://gist.github.com/travist/59fa77086ec899e24992fc1508e61075

[lvmmth]

@asalhani Hi, I would like to extend new components field properties provided by formio, like in the picture of @dslshweta has posted.
But now my code is like this:
MyComponent.editForm = Formio.Components.components.htmlelement.editForm;

reference.

I would like to know how to do as in the picture of @dslshweta. Do I need to use Angular? I really don't know about this.

Could you please suggest me to do like this please?

[randallknutson]

You don't need to use angular to do this. Check out the gist from Travis for an example of how to do it.

[lvmmth]

@randallknutson Do you mean this one -> https://gist.github.com/travist/59fa77086ec899e24992fc1508e61075?

But I really don't know how can I change the default form.
Example, In the picture above, on "Display" tab, there are fields like:

• Lable
• Label Position
• Placeholder
• Description
• Tooltip

If I would like to hidden the 'Placeholder' field, can I do please?

[randallknutson]

You can do this by changing the editForm on a component directly or use the options array like this: http://formio.github.io/formio.js/app/examples/custombuilder.html

[lvmmth]

@randallknutson Ahh! Its called Custom Form Builder! I thought its called Custom Components and do with formio.full.min.js. Thank you very much!

But the formio.builder.min.js isn't there, I'm trying to find it out but I really found only formio.builder.min.css .

[travist]

For now use formio.full.min.js instead. That includes everything. We will look to see what happened to the builder min file.

[sayyar-source]

i have same problem. please help

[guiassemany]

@randallknutson can you give me an example of how to change the editForm directly inside a custom component?

Thank you :)

[randallknutson]

You can do this by creating a MyComponent.form.js and modify the existing form like this:
https://github.com/formio/formio.js/blob/master/src/components/day/Day.form.js and then set it in the MyComponent class as

import editFrom from './MyComponent.form.js';

export default class MyComponent {
  static editForm = editFrom;
}