can't quickly add (via palette)

[djay]

User problem

I think most users think visually. They want to layout a form visually and think about details like validation, ids, defaults etc later.

• This PR [WIP] form layout is error prone and intimidating (dnd fields) #750 means you have to click a button and specify an id, pick a type and hit save before you can insert the field.
• The current UI you have to write the id into the text and select it and use the button to enter the details.
• The new IDE requires you to go to the sidebar, click plus, enter id and details, then drag and drop it into the layout.

Options

Palette

Split the IDE side bar into a browser and palette. The palette can be expanded when you creating the form and shrunk when you are working on code or settings and want to browse existing objects.

• Palette contains new objects that can be created. This includes all the field types, forms, views etc. The list is the same regardless of context.
• you can drag and drop into the layout or click and drop into the layout. It will generate a new id. You can double click to edit.
• if you aren't editing a layout, it will create the object in the current context. E.g if you are editing a field code, and you drag a new field onto it, it will create the field in the same form and switch tabs to edit the new field.
• if you drag a form into a layout it will create an empty subform
• if you drag onto the browser it will create a new element without edting.
• the search can filter both the browser and the palette
• will need icons or visual representations of the widgets
• hidewhens would be dragged on and then you can drag the start or end to the right place. Perhaps you can also select text and click the palette to add. Same with labels.
• layout macros would also appear in the palette. Like formula macros they are defined by a form. They return a fragment of html. They have settings and can refreshed.

So typical scenario might be

1. Enter label into form layout
2. Drag label obj from palette next to label. Move end to other side of text
3. type "text" into sidebar filter.
4. drag text field onto form layout
5. repeat 1-4 until form looks right
6. go back and edit ids, defaults and label linkages.
7. drag new hidewhen into form layout. Move other end to other side of input.

Might need warnings on save for unentered info or red lines on fields/labels/hidewhens etc.

[djay]

This is close to the UI I suggest above.

[djay]

This is covered by the latest mockup in #705