Module: `form_elements`

Description 

form_elements module for reusable form elemenst which already have a basic css styling.

IMPORTANT CONCEPTS

FIELD - an HTMLElement which wraps a LABEL element (the fields name) and the INPUT element together. By default, FIELDS are a flat and stringy list of key-value pairs. Use SUBFORMS for nesting FIELDS. FIELDS come in the following flavours: - INTEGER - DOUBLE - DATE - RANGE - REFERENCE_DROP_DOWN
GROUP - a set of FIELDS and SUBFORMS. FIELDS and SUBFORMS can belong to

multiple groups. The group can be used to disable or enable a set of FIELDS or SUBFORMS at once. Therefore, GROUPS are mainly used for the look and feel of the form. However, disabled fields are also ignored in the json-conversion of a form.

SUBFORM - an HTMLElement which contains FIELDS and other SUBFORMS. SUBFORMS

can be used to nest FIELDS, which is not supported by HTML5 but allows only for flat key-value pairs.

Function: `get_cache_key`

get_cache_key()

Function: `get_cache_value`

get_cache_value()

Function: `cache_form`

cache_form()

Function: `set_cached`

set_cached()

Function: `set_cached_value`

set_cached_value()

Function: `is_set`

is_set()

Function: `load_cached`

load_cached()

Function: `_get_alert_decision`

_get_alert_decision()

Function: `_set_alert_decision`

_set_alert_decision()

Function: `make_alert`

Make an alert, that is a dialog which can intercept a function call and asks the user to proceed or cancel.

make_alert(config)

Arguments:

config (AlertConfig()) – Make an alert, that is a dialog which can intercept a function call and

asks the user to proceed or cancel. :return HTMLElement: Make an alert, that is a dialog which can intercept a function call and asks the user to proceed or cancel.

Function: `init`

init()

Function: `make_reference_option`

Return an OPTION element with entity reference.

The OPTION element for a SELECT form input shows a short summary/description of an entity and has the entity’s id as value.

If the desc parameter is undefined, the entity_id is shown instead.

make_reference_option(entity_id[, desc])

Arguments:

entity_id (string()) – the entity’s id.
desc (string()) – the description for the entity.

Return HTMLElement:

OPTION element.

Function: `_make_option`

Return an option element for a select.

_make_option(value, label)

Arguments:

value (string()) – the actual value of the option element.
label (string()) – the string which is shown for this option in the drop-down menu of the select input.

Return HTMLElement:

Return an option element for a select.

Function: `_init_functions`

(Re-)set this module’s functions to standard implementation.

_init_functions()

Function: `parse_script_result`

Convert the reponse of a server-side scripting call into a {@link ScriptingResult} object.

parse_script_result(result)

Arguments:

result (XMLDocument()) – Convert the reponse of a server-side scripting call into a {@link

ScriptingResult} object. :return ScriptingResult: Convert the reponse of a server-side scripting call into a {@link ScriptingResult} object.

Function: `make_reference_drop_down`

Search and retrieve entities and create a SELECT from element.

make_reference_drop_down(config)

Arguments:

config (ReferenceDropDownConfig()) – all necessary parameters for the configuration.

Return HTMLElement:

SELECT element.

Function: `init_select_picker`

Test 16

init_select_picker()

Function: `init_actions_box`

Test 17

init_actions_box()

Function: `field_ready`

Return a promise which resolves with the field when the field is ready.

This function is especially useful if the caller can not be sure if the field_ready_event has been dispatched already and the field is ready or if the fields creation is still pending.

field_ready(field)

Arguments:

field (HTMLElement()) – Return a promise which resolves with the field when the field is ready.

This function is especially useful if the caller can not be sure if the field_ready_event has been dispatched already and the field is ready or if the fields creation is still pending. :return Promise: the field-ready promise

Function: `form_to_object`

Generate a java script object representation of a form and extract the files from the form.

The property names (aka keys) are the names of the form fields and subforms. The values are single strings or arrays of strings. If the field was had a file-type input, the value is a string identifying the file blob which belongs to this key.

Subforms lead to nested objects of the same structure.

form_to_object(form)

Arguments:

form (HTMLElement()) – a form generated by this module.

Return Array.<object>:

an array of length 2. The first element is an

object representing the fields of the form. The second contains a list of file blobs resulting from file inputs in the form.

Function: `make_submit_button`

make_submit_button()

Function: `make_cancel_button`

make_cancel_button()

Function: `make_form_field`

Return a new form field (or a subform).

This function is intended to be called by make_form and recursively by other make_* functions which create subforms or other deeper structured form fields.

This function also configures the caching, whether a form field is ‘required’ or not, and the help for each field.

make_form_field(config)

Arguments:

config (FieldConfig()) – the configuration of the form field

Return HTMLElement:

Return a new form field (or a subform).

This function is intended to be called by make_form and recursively by other make_* functions which create subforms or other deeper structured form fields.

This function also configures the caching, whether a form field is ‘required’ or not, and the help for each field.

Function: `add_help`

add_help()

Function: `make_heading`

make_heading()

Function: `make_form_wrapper`

make_form_wrapper()

Function: `make_form`

Create a form.

The returned element is a container which contains a HTML form element. The fields are ready or they will emit a {@link field_ready_event} when they are.

make_form(config)

Arguments:

config (FormConfig()) – Create a form.

The returned element is a container which contains a HTML form element. The fields are ready or they will emit a {@link field_ready_event} when they are. :return HTMLElement: Create a form.

The returned element is a container which contains a HTML form element. The fields are ready or they will emit a {@link field_ready_event} when they are.

Function: `make_subform`

Return a new subform.

make_subform(config)

Arguments:

config (SubFormConfig()) – the configuration of the subform.

Return HTMLElement:

Return a new subform.

Function: `dismiss_form`

dismiss_form()

Function: `enable_group`

enable_group()

Function: `disable_group`

disable_group()

Function: `get_group_fields`

get_group_fields()

Function: `get_fields`

Return an array of field with name

get_fields(name)

Arguments:

name (string()) – the field name

Return Array.<HTMLElement>:

array of fields

Function: `add_field_to_group`

add_field_to_group()

Function: `disable_fields`

disable_fields()

Function: `enable_fields`

enable_fields()

Function: `enable_name`

enable_name()

Function: `disable_name`

disable_name()

Function: `make_script_form`

make_script_form()

Function: `make_generic_form`

Return a generic form, bind the config.submit to the submit event of the form.

The config.fields array may contain form_elements.field_config objects or HTMLElements.

make_generic_form()

Return HTMLElement:: Return a generic form, bind the config.submit to the submit event

of the form.

The config.fields array may contain form_elements.field_config objects or HTMLElements.

Function: `init_form_caching`

init_form_caching()

Function: `show_results`

show_results()

Function: `show_errors`

show_errors()

Function: `make_error_message`

make_error_message()

Function: `make_success_message`

make_success_message()

Function: `make_submitting_info`

make_submitting_info()

Function: `make_message`

make_message()

Function: `make_range_input`

Return a new form field representing a range of numbers.

make_range_input(config)

Arguments:

config (RangeFieldConfig()) – Return a new form field representing a range of numbers.

Return HTMLElement:

Return a new form field representing a range of numbers.

Function: `_make_field_wrapper`

Return a DIV with class caosdb-f-field and a data attribute data-field-name which contains the name.

The DIV is used to wrap LABEL and INPUT elements of a form together.

_make_field_wrapper(name)

Arguments:

name (string()) – the name of the field.

Return HTMLElement:

a DIV.

Function: `make_date_input`

Return a new date field.

make_date_input(config)

Arguments:

config (FieldConfig()) – Return a new date field.

Return HTMLElement:

Return a new date field.

Function: `make_text_input`

Return a new text field.

make_text_input(config)

Arguments:

config (TextFieldConfig()) – Return a new text field.

Return HTMLElement:

Return a new text field.

Function: `make_double_input`

Return an input field which accepts double values.

config.type is set to “number” and overrides any other type.

make_double_input(config.)

Arguments:

config. (FieldConfig()) – Return an input field which accepts double values.

config.type is set to “number” and overrides any other type. :return HTMLElement: a double form field.

Function: `make_integer_input`

Return an input field which accepts integers.

config.type is set to “number” and overrides any other type.

make_integer_input(config.)

Arguments:

config. (FieldConfig()) – Return an input field which accepts integers.

config.type is set to “number” and overrides any other type. :return HTMLElement: an integer form field.

Function: `make_file_input`

Return a new form field for a file upload.

make_file_input(config)

Arguments:

config (FileFieldConfig()) – configuration for this form field.

Return HTMLElement:

Return a new form field for a file upload.

Function: `make_select_input`

Return a select field.

IMPORTANT: The select picker has to be initialized by the client by calling form_elements.init_select_picker(ret, config.value) (see below and https://gitlab.com/linkahead/linkahead-webui/-/issues/208).

make_select_input(config)

Arguments:

config (SelectFieldConfig()) – Return a select field.

IMPORTANT: The select picker has to be initialized by the client by calling form_elements.init_select_picker(ret, config.value) (see below and https://gitlab.com/linkahead/linkahead-webui/-/issues/208). :return HTMLElement: a select field.

Function: `make_checkbox_input`

Return a checkbox input field.

make_checkbox_input(config.)

Arguments:

config. (form_elements.checkbox_config()) – Return a checkbox input field.

Return HTMLElement:

a checkbox form field.

Function: `set_required`

Add caosdb-f-form-field-required class to form field.

set_required(field)

Arguments:

field (HTMLElement()) – the required form field.

Function: `make_required_marker`

Return a span which is to be inserted before a field’s label text and which marks that field as required.

make_required_marker()

Return HTMLElement:: span element.

Function: `get_enabled_required_fields`

get_enabled_required_fields()

Function: `get_enabled_fields`

get_enabled_fields()

Function: `check_form_validity`

Check form validity and return if the form is valid.

check_form_validity(form)

Arguments:

form (HTMLElement()) – the form elemeng.

Return boolean:

true iff the form is valid.

Function: `all_required_fields_set`

all_required_fields_set()

Function: `is_valid`

is_valid(form)

Arguments:

form (HTMLElement()) – the form be validated.

Function: `toggle_submit_button_form_valid`

toggle_submit_button_form_valid()

Function: `init_validator`

init_validator()

Function: `make_scripting_submission_button`

Return a submission button that triggers a given server-side-script.

make_scripting_submission_button(script, buttonName)

Arguments:

script (string()) – Name of the server-side script to be triggered
buttonName (string()) – Display name of the submission button

Function: `_make_input`

Return an input and a label, wrapped in a div with class caosdb-f-field.

_make_input(config, input)

Arguments:

config (object()) – config object with name, type and optional label
input (string()) – optional specification of the HTML input element. <input class=”form-control caosdb-f-property-single-raw-value” type=”’ + type + ‘” name=”’ + name + ‘” /> is used as default where name and type stem from the config object.

Return HTMLElement:

a form field.

Function: `_make_input_label_str`

Return a string representation of a LABEL element, ready for parsing.

This function is used by other functions to generate a LABEL element.

The config’s name goes to the for attribute, the label is the text node of the resulting LABEL element.

_make_input_label_str(config)

Arguments:

config (object()) – a config object with name and label.

Return string:

a html string for a LABEL element.

Member: version:

Member: dependencies:

Member: logger:

Member: cancel_form_event: Event. On form cancel.

Member: submit_form_event: Event. On form submit.

Member: field_changed_event: Event. On field change.

Member: field_enabled_event: Event. On field enabled.

Member: field_disabled_event: Event. On field disabled.

Member: field_ready_event: Event. On field ready (e.g. for reference drop downs)

Member: field_error_event: Event. On field error (e.g. for reference drop downs)

Member: form_success_event: Event. Form submitted successfully.

Member: form_error_event: Event. Error after form was submitted.

Member: cache[undefined]:

Member: localStorage[undefined]:

Member: checkbox:

Member: desc:

Member: type:

Member: actions_box:

Member: data[undefined]:

Member: value:

Member: data[undefined]:

Member: fieldname:

Member: filename:

Member: blob:

Member: data[undefined]:

Member: field:

Member: cursor:

Member: "margin-left":

Member: form:

Member: name:

Member: submit:

Member: margin:

Member: cached:

Member: required:

Member: type:

Member: cached:

Member: required:

Member: type:

Member: display:

Member: type:

Typedef: `AlertConfig`

Config for an alert

Properties 

string title: an optional title for the alert.
string severity: a bootstrap class suffix. Other
examples: warning, info
string message: informs the user what they are about to do.
function proceed_callback: the function which is called
then the user hits the “Proceed” button.
function cancel_callback: a callback which is called then
the cancel button is clicked. By default, only the alert is being closed an nothing happens.
string proceed_text: the text on the proceed button.
string cancel_text: the text on the cancel button.
string remember_my_decision_id: if this parameter is
present, a checkbox is appended to the alert (“Don’t ask me again.”). If the checkbox is checked the next time the make_alert function is called with the same remember_my_decision_id is created, the alert won’t show up and the proceed_callback is called without any user interaction.
string remember_my_decision_text: label text for the checkbox.
HTMLElement proceed_button: an optional custom proceed
button.
HTMLElement cancel_button: an optional custom cancel
button.

Typedef: `FieldConfig`

The configuration for double, integer, date input elements.

There are several specializations of this configuration object. {@link ReferenceDropDownConfig}, {@link RangeFieldConfig}, {@link SelectFieldConfig}, {@link FileFieldConfig}

Properties 

string name: The configuration for double, integer, date input elements.

There are several specializations of this configuration object. {@link ReferenceDropDownConfig}, {@link RangeFieldConfig}, {@link SelectFieldConfig}, {@link FileFieldConfig} - string type: The configuration for double, integer, date input elements.

There are several specializations of this configuration object. {@link ReferenceDropDownConfig}, {@link RangeFieldConfig}, {@link SelectFieldConfig}, {@link FileFieldConfig} - string label: The configuration for double, integer, date input elements.

There are several specializations of this configuration object. {@link ReferenceDropDownConfig}, {@link RangeFieldConfig}, {@link SelectFieldConfig}, {@link FileFieldConfig} - string help: The configuration for double, integer, date input elements.

There are several specializations of this configuration object. {@link ReferenceDropDownConfig}, {@link RangeFieldConfig}, {@link SelectFieldConfig}, {@link FileFieldConfig} - boolean required: The configuration for double, integer, date input elements.

There are several specializations of this configuration object. {@link ReferenceDropDownConfig}, {@link RangeFieldConfig}, {@link SelectFieldConfig}, {@link FileFieldConfig} - boolean cached: The configuration for double, integer, date input elements.

There are several specializations of this configuration object. {@link ReferenceDropDownConfig}, {@link RangeFieldConfig}, {@link SelectFieldConfig}, {@link FileFieldConfig}

Typedef: `ReferenceDropDownConfig`

Configuration object for a drop down menu for selecting references. make_reference_drop_down generates such a drop down menu using a SELECT input with the references as its OPTION elements.

The query parameter contains a query which is executed. The resulting entities are used to generate the OPTIONs.

The OPTIONs’ values are generated by the make_value call-back function from the entities. If make_value is undefined the entities’ ids are used as values. The description which is generated by a make_desc call-back function. If make_desc is undefined, the ids are shown instead.

The generated HTMLElements also contain a LABEL tag showing the text defined by label. If the label property is undefined, the name is shown instead.

Properties 

string name: The name of the select input.
string query: Query for entities.
function make_value: Call-back for the generation of
the OPTIONs’ values from the entities.
function make_desc: Call-back for the generation of
the OPTIONs’ description from the entities.
boolean multiple: Whether it is possible to select
multiple options at once.
string value: Pre-selected value of the SELECT.
string label: LABEL text.
string type: This should be “reference_drop_down” or
undefined. This property is used by make_form_field to decide which type of field is to be generated.

Typedef: `ScriptingResult`

Properties 

string code:
string call:
string stdout:
string stderr:

Typedef: `FormConfig`

Configuration objects which are passed to {@link make_form}.

Note: either the script or the name property must be defined. If the former is defined, the latter will be overriden.

Properties 

Array.<FieldConfig> fields: array of fields. The order is the
order in which they appear in the resulting form.
string script: if present the form will call a
server-side script on submission.
string name: The name of the form. This is being
overridden by the script parameter if present.
function submit: a callback which handles the submission
of the form. This parameter is being overridden if the script parameter is present.

Typedef: `SubFormConfig`

Properties 

Array.<FieldConfig> fields: array of fields. The order is the
order in which they appear in the resulting subform.

Typedef: `RangeFieldConfig`

Properties 

FieldConfig from: the start point of the range. This is
usually an integer or double input field.
object {FieldConfig: to - the end point of the range. This is
usually an integer or a double input field.

Typedef: `TextFieldConfig`

Field config for a text field (config.type = ‘text’).

Properties 

string pattern: a regex pattern which validates the value of the text field.

Typedef: `FileFieldConfig`

Properties 

boolean multiple: whether to accept multiple files.
string accept: a comma separated list of file extensions
which are accepted (exclusively).

Typedef: `SelectOptionConfig`

Properties 

string value: the value of the select option.
string label: a visible representation (think:
description) of the value of the select option. defaults to the value itself.

Typedef: `SelectFieldConfig`

Properties 

SelectOptionConfig SelectFieldConfig: options

Module: form_elements

Module: `form_elements`