quick to make fields with labels (or multi-field fields) (via templates and groups)

[djay]

User problem

Still too many clicks to create a typical form.
Should be one click to get:

• a field of a certain type (with relevant default validations),
• a label which can be edited quickly after and
• some hint text.

Options

Templates (stencils?)

Implement the palette and have it display templates.
Templates are forms contained in the imported macro dbs with names that slart with template_.

The template will be inserted into the layout as a group. A group is a special non-editable html with a id. This allows the group to be dragged as one who unit within tinymce. Nonedititable mode in tinymce allows for editable sections within noneditable. This should allow the fields etc within a group to be selected and settings edited while still being able to move the group within the layout.

Once inserted a copy is made of all their contents with a new unique prefix or postfix.

There will be a group and ungroup button to create groups anytime (in tinymce toolbar? or perhaps when selecting in tinymce the fields settings tab should show create group button?).

A group can be renamed. Select the group, go to group settings (2nd tab) and change the id. Doing this will find all the elements contained in the group and prefix each.

e.g.

1. a phone template is called template_phone and contains fields country_code and number.
2. When inserted it the group id is phone_1 (or what ever to make it unique) and the fields are phone_1_country_code and phone_1_number.
3. The group is renamed to patient_phone. The fields get renamed to patient_phone_country_code and patient_phone_number.

Could also call this

• snippets?
• fragments?
• field groups?
• layout macros?
• stencils?

Advanced

• perhaps merge in any form macros from the layout
• have the ability to select fields in a form "save as layout macro" to create instant layout macros.
• some how fix formulas/macros in fields that refer to other fields in the template. e.g. hidewhens based on other field values.
• some way to handle rearranging a template at its source and having all the corresponding groups be updated. (what happens if the field settings change?).

Plan

• A api to return the list of templates as json. return name and id.
• JS includes templates in the palette as first options.
• A api to add the template to the current form. return the mapping from old id to new id for each of the contained elements. also the group id.
• JS handles inserting the right non-editible regions and getting example html for each element.
• show handle selecting group and changing id.
• A api for renaming a group. return a mapping from old id to new id for each of the contained elements. also the group id (in case the requested wasn't unique? or perhaps return an error requested id causes any element to not be unique?)
• JS to show unlock button and implement it (just changes the layout to remove the group markup).
• include basic templates for all the standard field types and also some widget options, e.g. have seperate ones for radios vs dropdown.

[djay]

@ebrehault our plan is to implement this as part of the doing the palette for the IDE. Any feedback would be helpful before we start.

[ebrehault]

Sounds very interesting but not easy :)

I guess "layout" is probably confusing, it is usually named "templates" (that's how TinyMCE and CKeditor call them at least).

[djay]

I think its not hard. I have an idea on how to solve the rename problem @ebrehault. When a template is inserted we wrap it in a noneditable which groups the template. This group can be renamed or ungrouped. Each of the fields within the group can still be editable even while grouped but they can't be rearranged. Tinymce noneditable allows for this.

[djay]

I tested the groups idea with the tinymce noneditable plugin. Works well

For example the following allows me to drag around the whole group while still allowing me to edit the field inside it. You can also drag the field outside of the group. not sure if that is a plus or a minus but its a bit tricky to drag it back into the group again as the slot will close up. Might be able to solve this with a min width or something

<p> </p>
<div class="mceNonEditable">
My field
<p><span class="mceEditable"><span class="plominoFieldClass mceNonEditable" data-plominoid="defaultfield"> <input id="defaultfield" name="defaultfield" type="text" /> </span>
</span></p>
<p><br /> </p>
</div>