Implement the declarative rich form creator (generator, builder)

[oleq]

📝 Provide a description of the new feature

A follow-up of #6049.

Until the table (cell) properties UI, our forms were fairly simple, usually a single field and some action buttons. But now we have forms with multiple rows and multiple fields and I learned the hard way that creating and validating them becomes a problem.

We need a form builder that would:

• allow defining the structure of the form (rows),
• allow placing inputs/dropdowns/buttons/toolbars in the rows (also adding classes to them to customize sizes/layout in CSS),
• allow writing (multiple) validators for each form field,
• allow using action buttons (like "save" or "cancel") with custom actions.
• allow defining a data interface of the form, automatically bound to the fields.

Such a builder would make creating new forms a breeze, there would be no low–level code but a declarative form definition only.

An issue about validating the table properties form.

A related issue about form validation with some (old) ideas.

---

If you'd like to see this feature implemented, add a 👍 reaction to this post.

[oleq]

A very brief PoC:

import { generateForm, bindProperty } from 'form/utils.js';
import FormValidators from 'validators.js';

const form = generateForm( {
	items: [
		{
			type: 'row',
			items: [
				{
					name: 'borderStyle',
					type: 'dropdown',
					label: t( 'Border style' ),
					isEnabled: true,
					defaultValue: 'none',
					options: [
						{ value: 'none', label: t( 'None' ) },
						{ value: 'solid', label: t( 'Solid' ) },
						{ value: 'dotted', label: t( 'Dotted' ) },
					],
					on: {
						change: ( oldValue, newValue ) => {
							// Do something in the controller.
							editor.execute( 'tableCellBorderStyle', {
								value: newValue
							} );
						}
					}
				},
				{
					name: 'borderWidth',
					type: 'inputtext',
					label: t( 'Border width' ),
					isEnabled: bindProperty( 'borderStyle', 'isEnabled', value => {
						value !== 'none';
					} ),
					defaultValue: '',
					validators: [
						FormValidators.unit( {
							units: [ 'em', 'px', '%', 'pt' ],
							message: t( 'The border width must be either em, px or...' )
						} ), 
						FormValidators.length( {
							minLength: 1, 
							maxLength: 20,
							message: t( 'Border width must be 1 up to 20 characters' )
						} )
					],
					on: {
						input: ( value ) => {
							// Do something in the controller.
							editor.execute( 'tableCellBorderWidth', value );
						}
					}
				},
				{
					name: 'borderColor',
					type: 'inputtext',
					label: t( 'Border color' ),
					isEnabled: bindProperty( 'borderStyle', 'isEnabled', value => {
						value !== 'none';
					} ),					
					defaultValue: '',
					validators: [
						FormValidators.color( {
							formats: [ 'rgb', 'hex' ],
							message: t( 'The border color must be either in rgb (rgb(255,255,255)) or hex (#FFFFFF) format.' )
						} ),
						FormValidators.regex( {
							// ...
						} )
					],
					on: {
						input: ( value ) => {
							// Do something in the controller.
							editor.execute( 'tableCellBorderWidth', value );
						}
					}					
				}
			]
		},
		{
			type: 'row',
			// Labeled form row like "Border" in table cell properties.
			label: t( 'Border' ),
			items: [
				// ...
			]
		}				
	],

	actions: [
		{
			type: 'save',
			label: t( 'Save form' ),
			// #isFormValid could be a property of FormView.
			isEnabled: bindProperty( 'isFormValid' ),
			action: () => {
				// Close the form
			}
		},
		{
			type: 'cancel',
			label: t( 'Cancel' ),
			isEnabled: true,
			action: () => {
				// Undo changes made by the form.
				editor.execute( 'undo' );
			}
		}
	]
} );

// As the fields are defined so are the observable properties that can be used to communicate
// as an external interface.
form.set( {
	borderStyle: 'dotted',
	borderWidth: '3px'
} );

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[CKEditorBot]

We've closed your issue due to inactivity over the last year. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).