Module: form_elements

Local Navigation

Children

Description

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

IMPORTANCE 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 (FieldConfig()) – 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.

make_select_input(config)
Arguments
  • config (SelectFieldConfig()) – Return a select field.

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: 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_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: data[undefined]:

Member: value:

Member: data[undefined]:

Member: data[undefined]:

Member: fieldname:

Member: filename:

Member: blob:

Member: data[undefined]:

Member: data[undefined]:

Member: field:

Member: field:

Member: field:

Member: field:

Member: field:

Member: field:

Member: field:

Member: field:

Member: field:

Member: cursor:

Member: "margin-left":

Member: form:

Member: form:

Member: form:

Member: name:

Member: submit:

Member: margin:

Member: cached:

Member: required:

Member: type:

Member: cached:

Member: required:

Member: type:

Member: type:

Member: display:

Member: type:

Member: "font-size":

Member: color:

Member: "margin-right":

Member: "font-weight":

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: 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