Add new element and Modify existing one

[tknazn]

Hi Kevin,

I'm trying to make changes to some existing form elements. For example: instead of checkbox, I want to make it like a True & False toggle.
I am kinda lost when going thu your code. Wonder if you can shed some lights on how to either add new element or modify existing one.

Thanks,
Trong

[kevinchappell]

Hey Trong,
Adding it to the editor itself is a bit tricky as you would need to make the changes in a few places. If the toggle is meant to completely replace the checkbox you could update the markup for the checkbox field template here.

If you only need the toggle at render you can use something like this and call it after formRender(). To use it with the checkbox rendered by formRender() you would need to call it like $('input[type="checkbox"]', document.getElementById('rendered-form')).kcToggle()

I made a quick jsFiddle example

[tknazn]

Revising checkbox to toggle at render using your kcToggle seems like the most straighforward way. However, the script has to be run after an user finishs drag & drop the checkbox field to the Preview area.

Where is the most optimal place in your code to put that script? Please suggest.

[kevinchappell]

Hi Trong,
This pull-request may be of interest to you.

[tknazn]

Having option to change from checkbox to toggle would work in some scenarios. I'm looking for a clean way to replace checkbox entirely with toggle.

Besides, another part of my question is how we can add an entirely new element? Besides the ones you have, I really need to create the star-rating element (value: 0-5).

Please advise.

[kevinchappell]

Star rating is a good idea. There are plans to add new inputs, star rating could certainly be one of them. In the meantime you could use the radio group to accomplish a star rating with some css. Here is one example

[tknazn]

Thank you Kevin! I was able to leverage the css you shared.

[kevinchappell]

Excellent!