Skip to main content

Introducing Formengine - The New Formbuilder, try for FREE formengine.io.

Control components

This control is a header. It is created on SemanticUI Header component basis.

Additional General properties​

  • Size - sets Header size.
  • Content - Header text.
  • Subheader - subheader text.
  • Text align - Header alignment - Left, Right or Center.

Input​

This control represents main input fields options. It is based on the following components:

Additional General properties​

  • Type - Input field type. The following input field types are supported:
    • Text - text input.
    • Number - numbers input.
    • Password - input of texts which cannot be displayed in forms (for example, passwords).
    • File - single file upload.
    • Date - date only input.
    • Time - time only input.
    • Date & Time - date and time input.
  • Label - sets label text to be displayed with Input.
  • Label position - sets label position in correspondence to Input. Applied only if Input is outside Form or Form Group components.
  • Placeholder - text which will be displayed, until input field is filled in.
  • Size - sets Input size.
  • Disabled - disables Input editing option.
  • Transparent - makes Input transparent. This property works only for Text, Number or Password input types.
  • Fluid - takes on the size of its container.
  • Read Only - disables Input editing option. But it does not change Input style, in contrast to Disabled.

Events​

  • onChange - is called when changing value in Input.
  • onChange timeout - timeout value in milliseconds, after which onChange event will be sent, and other onChange events which took place during timeout will be ignored. This property is usually used when input value is used in grid filter to limit the number of requests on server.

Text Area​

This is a large area for text input. It is created on SemanticUI Text Area component basis.

Additional General properties​

  • Label - sets label text to be displayed near Text Area.
  • Placeholder - text which will be displayed until value is entered into Text Area.
  • Rows - number of lines in the Text Area.
  • Read only - makes control unavailable for editing.

Events​

  • onChange - is called when changing value in the Text Area.
  • onChange timeout - timeout value in milliseconds, after which onChange event will be sent, and other onChange events which took place during timeout will be ignored.

Dictionary​

Is used to select on or several values from dictionary (simple entity in database, such as Employees, Types, etc.). This component uses SemanticUI Dropdown component for display, but mostly it was written manually. It sends requests to server to display dropdown list.

Additional General properties​

  • Label - sets label text to be displayed near Dictionary.
  • Placeholder - text which will be displayed until value is entered into Dictionary.
  • Data Model - name which is used in the Dictionary to load a list of values to be selected.
  • Columns - sets sorting of the dropdown list and attributes of Data Model, values of which will be combined in a string. For example, Columns = 'Name ASC, Email' means that list will be filled with the following records: 'Mike User mike.user@mail.com', 'Silvia Accountant silvia.accountant@mail.com', etc. Sorting works only for those columns which are marked ASC or DESC.
  • Server pagination - if this checkbox is checked, list data will be loaded with server paging.
  • Page size - data page size for server paging.
  • Search - includes record search in dropdown list option; search is executed by LIKE expression in all columns listed in the Columns property.
  • Multiple - allows you to select several values from Dictionary.
  • Disabled - disables control editing function.
  • Read only - disables control editing option. But it does not change control style, in contrast to Disabled.
  • Clearable - allows you to reset selected value. Is applied to non-required form fields.
  • Selection - if this checkbox is checked, Dictionary looks like form field; if unchecked, Dictionary looks like menu.
  • Fluid - takes on the size of its container.
  • Filter - JSON object as string. Sets filter elements array:
[
    {
        column: "Column1Name",
        value: 1000,
        term: ">"
    },
    {
        column: "Column2Name",
        value: "Value",
        term: "like"
    }
]

All filter elements are combined by AND. The following values can be interpreted as term property value: '=', '!=', '>=', '<=', '<', '>', 'like', '*like', 'like*'s. Also in filters you can specify value, which will be taken from data, using the following expression: '{attributeName}', where 'attributeName' is attribute name from Data Model. Thus, you can create Dictionary fields linked to each other.

Events​

  • onChange - is called when selecting value from selection list.
  • onChange timeout - timeout value in milliseconds, after which onChange event will be sent, and other onChange events which took place during timeout will be ignored.

Tree picker​

Is used to select one or several values from the hierarchical dictionary. It is similar to Dictionary, but its data source is hierarchical, i.e. it contains like ParentId column. This component uses SemanticUI Dropdown for display, but mostly it was written manually. It sends requests to server to display dropdown list.

Additional General properties​

  • Label - sets label text to be displayed near Tree picker.
  • Placeholder - text which will be displayed until value is entered into Tree Picker.
  • Data Model - name, which is used in Tree Picker to load a tree to pick a value from.
  • ParentId field - attribute name which set hierarchy in data model.
  • Columns - sets sorting of the dropdown list and attributes of Data Model, values of which will be combined in a string. Works similar to the same-name Dictionary property.
  • Server pagination - if this checkbox is checked, tree data will be loaded with server paging.
  • Page size - data page size for server paging.
  • Multiple - allows you to select several values from tree.
  • Disabled - disables control editing function.
  • Read only - disables control editing option. But it does not change control style, in contrast to Disabled.
  • Clearable - allows you to reset selected value. Is applied to non-required form fields.
  • Selection - if this checkbox is checked, Tree Picker looks like form field; if unchecked, Tree Picker looks like menu.
  • Fluid - takes on the size of its container.

Events​

  • onChange - is called when selecting value from Tree Picker.
  • onChange timeout - timeout value in milliseconds, after which onChange event will be sent, and other onChange events which took place during timeout will be ignored.

This is a selection list with a fixed set of values. Based on SemanticUI Dropdown.

  • Label - sets label text to be displayed near Dropdown.
  • Placeholder - text which will be displayed until value is entered into Dropdown.
  • Search - includes record search in Dropdown list option.
  • Multiple - allows you to select several values from Dropdown.
  • Disabled - disables control editing function.
  • Read only - disables control editing option. But it does not change control style, in contrast to Disabled.
  • Clearable - allows you to reset selected value. Is applied to non-required form fields.
  • Selection - if this checkbox is checked, Dropdown looks like form field; if unchecked, Dropdown looks like menu.
  • Allow add items - allows you to add values to Dropdown when editing. You can check this checkbox, only if Search is checked.
  • Data - you can set a list for selection in this table to be shown in Dropdown. Each element description contains the following properties:
    • Value - element value which will be updated in data when selecting this element.
    • Text - displayed element name.
  • onChange - is called when selecting value from Dropdown.
  • onChange timeout - timeout value in milliseconds, after which onChange event will be sent, and other onChange events which took place during timeout will be ignored.
  • onClick - is called by clicking on Dropdown.

Checkbox​

This is a checkbox. Based on SemanticUI Checkbox.

Additional General properties​

  • Label - sets label text to be displayed near Checkbox.
  • Fitted - removes padding for a label.
  • Indeterminate - if field value is undefined, this Checkbox will be in an indeterminate state (not checked, not unchecked).
  • Disabled - disables control editing function.
  • Read only - disables control editing option. But it does not change control style, in contrast to Disabled.
  • Toggle - transforms Checkbox into toggle.
  • Slider - transforms Checkbox into slider.

Events​

  • onChange - is called when changing Checkbox state.
  • onChange timeout - timeout value in milliseconds, after which onChange event will be sent, and other onChange events which took place during timeout will be ignored.

Radio group​

Radio buttons group. Uses SemanticUI Radio to display one radio button.

Additional General properties​

  • Label - sets label text to be displayed near Radio group.
  • Group direction - direction in which radio buttons are aligned in group - Horizontal or Vertical.
  • Read only - disables control editing function.
  • Data - you can set a list of radio buttons in this table. Each element description contains the following properties:
    • Value - element value which will be updated in data when selecting this element.
    • Text - displayed element name.

Events​

  • onChange - is called when selecting another element.
  • onChange timeout - timeout value in milliseconds, after which onChange event will be sent, and other onChange events which took place during timeout will be ignored.

Button​

This is a button. It's based on SemanticUI Button.

Additional General properties​

  • Icon - specifies an icon from a set of icons to display on the Button.
  • Content - text displayed on Button.
  • Size - sets Button size.
  • Basic - basic Button style.
  • Circular - creates a circle Button.
  • Compact - compact Button style.
  • Disabled - disables Button and does not send events.
  • Fluid - Button can take the width of its container.
  • Primary and Secondary - predefined Button styles.
  • Floated - Button can be aligned to the left or right of its container.

Event​

  • onClick - is called by clicking on Button.

Label​

Label with text. Based on SemanticUI Label.

Additional General properties​

  • Content - text displayed in Label.
  • Size - sets Label size.
  • Attached - Label can be attached to content segment. With this property you can create Form or Form Group headers, displayed from different sides.
  • Basic - basic Label style.
  • Circular - creates a circle Label.
  • Corner - Label will be displayed in the corner of its parent component.
  • Floating - floats above another element in the upper right corner.
  • Pointing - Label can point to content next to it.

Message​

Message displays information that explains nearby content. Based on SemanticUI Message.

Additional General properties​

  • Header - Message header.
  • Content - Message content.
  • Compact - compact Message style.
  • Error, Info, Negative, Positive, Success, Warning - different Message display styles, depending on its content.
  • Floating - Message can float above content that it is related to.
  • Size - sets message size.

Image​

Displays image. Based on SemanticUI Image.

Additional General properties​

  • Src - Image path.
  • Href - renders Image as an <a> tag with this href.
  • Avatar - Image can be formatted to appear inline with text as an avatar.
  • Bordered - Image can include a border to emphasize edges of white or transparent content.
  • Centered - Image can appear centered in a content block.
  • Disabled - Image can show that it is disabled.
  • Inline - Image can appear inline.
  • Spaced - Image can specify that it needs additional spacing to separate it from nearby content.
  • Floating - Image can float above content that it is related to.
  • Vertical align - Image can specify its vertical alignment.

Statistic​

Displays statistics elements (label - value pairs). Based on SemanticUI Statistic.

Additional General properties​

  • Size - sets component size.
  • Horizontal - statistics elements will be positioned progressively.
  • Data - you can set a list of control displayed label - value pairs in this table. Each element description contains the following properties:
    • Label
    • Value

Custom control​

Allows you to create and customize third-party React components. Uses React.createElement to create components.

Additional General properties​

  • Control type - component title (type).
  • Props - JSON describing an object, which represents React component props.
  • Children - JSON, describing an object, which represents current component children components.

Dropdown menu with a list of pre-defined values. This component uses SemanticUI Dropdown to display components, but mostly it was written manually.

  • Default Value - default value; it is checked if no other value was set to data.
  • Image url - url of an image displayed near control.
  • Items - menu items list. Each menu item is described by three properties:
    • Target - sets value which will be transferred to onItemClick event.
    • Title - menu item displayed name.
    • Visible Condition - function which returns true or false. It is similar to Visible Condition function in Other tab. It defines menu item visibility.
  • onItemClick - event is called by clicking on menu item.

Is used to draw menu. Based on SemanticUI Menu.

  • Pointing - Menu can point to show its relationship to nearby content.
  • Secondary - Menu can adjust its appearance to de-emphasize its contents.
  • Tabular - Menu can be formatted to show tabs.
  • Fluid - vertical Menu can take the size of its container.
  • Vertical - vertical Menu displays elements vertically.
  • Link - if this checkbox is checked, all Menu items will represent a link, not text.
  • Items - hierarchical (please, note that Menu items editor allows you to form a hierarchical menu) list of elements. Each Menu item is described by three properties:
    • Target - link which redirects by clicking on a Menu item.
    • Title - displayed Menu item name.
    • Visible Condition - function which returns true or false. Similar to Visible Condition function in Other tab. Defines Menu items visibility.
  • onItemClick - event is called by clicking on menu item.

(File) Dropzone​

Dropzone to load several files on server. Uses React Dropzone Component.

Additional General properties​

  • Icon file types - sets file types, which icons will be displayed in the Dropzone as uploaded file types.
  • Show file type icons - displays icons with allowed file types in Icon file types property.
  • Auto process queue - if checked, uploaded files will be automatically posted on server.
  • Add remove links - adds buttons to remove files.

Notes​

Use the window.FORMBUILDER_TIMEOUT parameter to set the timeout for large file uploads.

Events​

  • success - is called when file has been uploaded successfully.
  • fail - is called when file upload failed.

Breadcrumbs menu. Based on SemanticUI Breadcrumb.

  • Items - menu items list. Each menu item is described by four properties:
    • Text - displayed value.
    • Url - url for transition.
    • Active - if checked, this element will be additionally highlighted. As a rule it is used to mark current pages.
    • Divider icon - name of the icon which divides between menu items. See full list of icons here.
  • onItemClick - event is called by clicking on menu item.

Control to organize custom search. Based upon SemanticUI Search.

Additional General properties​

  • Url - url which process search queries from this component. Find an example of controller handling a request here. Controller receives a single string parameter named 'term'. Controller must return a serialized JSON objects array. Object must contain Title property.

    public class SearchItem
    {
        ...
        public string Title;
    }

  • Enable Categories - found data is grouped by category. In this case Search component expects to receive from server a different object.

    public class Categories
    {
        ...
        public object Category1;
        public object Category2;
    }

    Where each category object is an object of

    public class Categories
    {
        ...
        // category name such as Category1, Category2 etc
        public string Name;
        public List<SearchItem> Results;
    }

Events​

  • onSelect - is called when selecting an element from found elements list. In events handler you can get access to selected object and its fields which were transmitted from server by the following method:

    onSelectHandler: function (args) {
        var selection = args.parameters;
        ...
    }

    All properties which were transmitted from server in SearchItem object will be available in selection.