<form-builder>

A web component for building form using Drag'n'Drop.

API

<draggable-entity>

Control which can be put on the form

Properties

NameAttributeDescriptionTypeDefault
controlundefinedControl which can be put on the formundefinedundefined

<form-item>

Control from the form panel

Attributes

NameDescriptionTypeDefault
selectedIs current control selectedbooleanundefined

Properties

NameAttributeDescriptionTypeDefault
selectedselectedIs current control selectedbooleanundefined
isFromTopToBottomundefinedIs drag'n'drop being done from top to bottom or vice versaundefinedundefined
isDraggedOverundefinedIs control being dragged over this elementundefinedfalse

<item-separator>

Separator between controls in the form panel

Properties

NameAttributeDescriptionTypeDefault
indexundefinedIndex in the form for this element (same as assosiated control)undefinedundefined
isDraggedOverundefinedIs control being dragged over this elementundefinedfalse

<item-spot-placeholder>

Placeholder for a control to be dropped, placed at the bottom of the form panel

Properties

NameAttributeDescriptionTypeDefault
isDraggedOverundefinedIs control being dragged over this elementundefinedundefined

<form-builder>

Form Builder using Drag'n'Drop written in LitElement

Properties

NameAttributeDescriptionTypeDefault
NOT_SELECTED_INDEXundefinedValue for not selected indexundefined999999
isDragOverFormPanelFromControlPanelundefinedProperty to determine whether drag over is being done over form panel using item from control panelundefinedfalse
selectedIndexundefinedIndex of the selected item from control panelundefined"NOT_SELECTED_INDEX"
selectedInFormIndexundefinedIndex of the selected item from form panelundefined"NOT_SELECTED_INDEX"
inFormHoveredOverItemIndexundefinedApplicable only to reordering inside the form panel. Property to determine index of hovered over controlundefined"NOT_SELECTED_INDEX"
formItemListundefinedList of controls on the form.undefined[]
controlListundefinedList of available controls to be dragged onto form.undefined[{"control":"textbox"},{"control":"number"},{"control":"combobox"}]
isDndInsideFormundefinedProperty to determine whether Drag'n'Drop is being done from controls panel to form panel, or just inside form panelundefinedfalse
isFromTopToBottomundefinedApplicable only to reordering inside the form panel. Property to determine whether drag'n'drop performed from top to bottom or vice versaundefinedfalse

Events

NameDescription
form-builder-updatedEvent which is thrown at any given form modification.