cnc-form-builder
The visual editor that PRODUCES cnc-form-renderer layouts: drag fields in, reorder
them, configure each one. It is the authoring half of the builder pair, and by far the largest
widget in the library.
Quick start
Bind layout, state and data. The layout is what you
persist — hand the same object to a cnc-form-renderer and you have the form
the author just drew.
<cnc-form-builder $layout="layout" $state="state" $data="data"></cnc-form-builder>
<!-- elsewhere, rendering what was built -->
<cnc-form-renderer :layout="layout" :data="answers"></cnc-form-renderer>Naming a field from the data
Select a field above and press the + beside its Name box. It lists the keys
of the layout's dataTemplate, here phone and company
with its name and website. Past five keys a search box narrows the
list. Picking a key, by click or Enter, makes it the field's name, the key capitalised its label,
and its dotted path the field's path. With no Data Template, the + explains
where names come from and opens the Data Template tab, which shows an example of a template.
No events
The builder emits nothing. Everything it does shows up as changes to the bound
layout, so the way to know the author edited something is to watch that object.
There is no change to hang a save on and no dirty flag — a save button beside
the builder, or a watcher on the layout, is how persistence is normally wired.
Usage guidance
Persist layout and nothing else. state is the editor's working scratch
and data is sample values for the preview; the layout alone is what
cnc-form-renderer
needs, and what should go in your database.
This is an ADMINISTRATOR's tool, not an end-user one. It is the heaviest widget here and puts a
full editing surface on the page, so it belongs on a settings or authoring screen — the
people filling the form in should only ever meet cnc-form-renderer.
Watch the layout object to know when to save. With no events, a save control the author presses is the simplest reliable trigger; polling or deep-watching a large layout is not.