components

components

This class doesn't actually exist. It is merely used to group and document the HTML components that come with the Kiss system. Each method represents a new HTML tag offered by the Kiss system. Although these methods are shown with an underscore in their name, the actual tag they represent would have a dash instead.

In addition to the additional capabilities offered by some of these controls, many are enhancements over features already provided by HTML. These enhancements offer significant additional functionality as well as a more consistent interface.

In addition to the tag attributes and content documented here, most of these new HTML tags also support the standard attributes that HTML normally supports (such as "style" and "id"). Each of these controls (except radio-button) require the "id" attribute in order for your code to reference the control.

Components are accessed via the $$ global function. For example, if you have HTML containing:

     <text-input id="fname"></text-input>

You would access that control in your code with $$('fname') Methods available withing that control are accessed from that point. For example, one method available to text-input is hide(). This method can be accessed as follows:

     $$('fname').hide()

The documentation for each element includes three sections labeled Attributes, Content, and API. These are used as follows:

     <text-input Attributes>Content</text-input>

The API is what is used within JavaScript.

Functions that don't have a meaningful result otherwise, return 'this' so that function chaining can occur.

All of the controls support all of the standard HTML global attributes. The following lists some of the attributes commonly used:

Common Attributes
autofocus
class="class-name"
disabled
hidden
id="control-id"
readonly
style="..."

Constructor

new components()

Source:
There is no constructor.

Methods

(static) check_box()

Source:
This HTML tag, "check-box", adds functionality and a consistent and convenient API to the HTML provided checkbox tag.

AttributeDescription
checked pre-selects the element

Content

The Content represents the label associated with the checkbox.

APIDescription
clear() uncheck the box
disable([flg]) the control remains visible but inactive (or the reverse if the optional argument is false)
enable([flg]) the control is set to visible and enabled (or the reverse if the optional argument is false)
focus() sets focus on control
getValue() returns true if checked and false if unchecked
hide([flg]) the control is hidden (or the reverse if the optional argument is false)
isDirty() true if the user changed its state
isDisabled() true if the control is disabled
isHidden() true if the control is hidden (not visible)
isReadOnly() true if the control is read-only
isVisible() true if the control is visible (not hidden)
onChange(fun) execute fun whenever the state of this control changes. fun is passed the value of the control.
processChanges(flg) if false, checkbox should not register changes (no data was changed) See Utils.someControlValueChanged()
readOnly([flg]) sets control to read-only (or the reverse if the optional argument is false)
readWrite([flg]) sets control to read-write (or the reverse if the optional argument is false)
setValue(val) if val is true check the box, uncheck if false
show([flg]) the control is made visible (or the reverse if the optional argument is false)

(static) date_input()

Source:
This HTML tag, "date-input", adds functionality and a consistent and convenient API for user date input. This control is custom and doesn't use the native browser date input offering the advantage of a significantly smaller width requirements. Also see native-date-input tag.

AttributeDescription
max="20181231" the maximum date allowed
min="20180101" the minimum date allowed
no-placeholder do not display mm/dd/yyyy when field is empty
required an entry is required

Content

The Content represents the placeholder or what is shown as a prompt inside the control when there is no value.

APIDescription
clear() clear the control value
disable([flg]) the control remains visible but inactive (or the reverse if the optional argument is false)
enable([flg]) the control is set to visible and enabled (or the reverse if the optional argument is false)
focus() sets the focus (where the cursor is located) to this control
getDateValue() returns the date as a Date instance
getIntValue() returns the date as an integer with the "YYYYMMDD" format
getSQLValue() returns the date as a string with the "YYYY-MM-DD" format
hide([flg]) the control is hidden (or the reverse if the optional argument is false)
isDirty() true if the user changed the value
isDisabled() true if the control is disabled
isError(desc) used for error checking. If error, display error message and return true. desc is a description of the user field.
isHidden() true if the control is hidden (not visible)
isReadOnly() true if the control is read-only
isVisible() true if the control is visible (not hidden)
onCChange(fun) execute fun immediately when the value is changed by the user, fun is passed the control value
onChange(fun) execute funwhenever the user exits the control if the value changed, fun is passed the control value
onEnter(fun) execute fun when enter key hit
readOnly([flg]) set control to read-only (or the reverse if the optional argument is false)
readWrite([flg]) set control to read-write (or the reverse if the optional argument is false)
setValue(val) sets the control value. val may be a Date, number (20180608), or string ("2018-06-08")
show([flg]) the control is made visible (or the reverse if the optional argument is false)

(static) drop_down()

Source:
This HTML tag, "drop-down", adds functionality and a consistent and convenient API to the HTML provided select tag.

AttributeDescription
default-option="label" what is shown before the user makes a selection. This would often be something like "(choose)"
required a selection is required

Content

The Content represents the HTML that would normally be inside an HTML select element. This would only be used in cases of a static list. List contents that depended on data would use the add method.

APIDescription
add(val, lbl, data) add a new list item. val is the value associated to the option, lbl is the text shown in the list, and data represents optional and arbitrary data associated to the option
addItems(items, valField, lblField [, dataField]) used to add an array of items at one time. items is the array of items to add. valField and lblField are the names of the fields in the array. lblField an also be a function that formats the label. It is passed the row in items. dataField is the name of a field whose data is stored along with the item. If null, the whole item is stored.
clear() remove the list contents except the default-option
disable([flg]) the control remains visible but inactive (or the reverse if the optional argument is false)
enable([flg]) the control is set to visible and enabled (or the reverse if the optional argument is false)
fill(selectedItem, items, valField, labelField [, dataField]) clear and fill a dropdown selecting the specified item
focus() sets focus on the control
getAllLabels() returns an array of all the labels
getAllData() returns an array of all the data associated with the control
getData(idx) returns the data associated to an option. If idx is undefined, the selected row is used otherwise the row indexed by idx is used.
getLabel(idx) returns the label associated to an option. If idx is undefined, the selected row is used otherwise the row indexed by idx is used.
getValue(idx) returns the string value associated to an option (returns an array if multiple attribute included). If idx is undefined, the selected row is used otherwise the row indexed by idx is used.
hide([flg]) the control is hidden (or the reverse if the optional argument is false)
isDirty([flg]) true if user changed value (or the reverse if the optional argument is false)
isDisabled() true if control is disabled
isHidden() true if control is hidden (not visible)
isError(desc) used for error checking. If error, display error message and return true. desc is a description of the user field.
isReadOnly() true if control is read-only
isVisible() true if control is visible (not hidden)
onChange(fun) execute funwhenever the state of this control changes. fun is called as follows fun(val, lbl, data)
readOnly([flg]) make control read-only (or the reverse if the optional argument is false)
readWrite([flg]) make control read-write (or the reverse if the optional argument is false)
removeByIndex(idx) remove the row indicated by idx
selectedIndex() returns the index of the selected item (-1 if none)
selectIndex(row) selects the indicated row index
setLabel(lbl, idx) sets a row label to lbl. If idx is undefined, the selected row is affected otherwise the row indexed by idx is updated.
setValue(val, idx) sets a row value to val. If idx is undefined, the selected row is affected otherwise the row indexed by idx is updated.
show([flg]) the control is made visible (or the reverse if the optional argument is false)
size() returns the number of rows in the list (including default-option
triggerGlobalChange(flg) Default true. If false then control changes will not trigger a global control change. See Utils.someControlValueChanged()

(static) file_upload()

Source:
This HTML tag, "file-upload", adds functionality and a consistent and convenient facility uploading files and taking pictures with the camera.
Please note: When this control is used, you must use Server.fileUploadSend() rather than Server.call().

AttributeDescription
multiple the user may select multiple files
required an entry is required (at least 1 file)
accept types of files allowed (see HTML input type="file")
custom rather than the native HTML control, use a Kiss button to upload files.

Content

The Content of this control is unused.

APIDescription
clear() erases the contents of the control
click() simulate a user click on the control
disable([flg]) the control remains visible but inactive (or the reverse if the optional argument is false)
enable([flg]) the control is set to visible and enabled (or the reverse if the optional argument is false)
focus() sets the focus (where the cursor is located) to this control
getFormData() gets the upload file data for transmission to the back-end
hide([flg]) the control is hidden (or the reverse if the optional argument is false)
isDirty() has the control contents been changed by user
isError(desc) used for error checking. If error, display error message and return true. desc is a description of the user field.
isDisabled() is the control disabled?
isHidden() is the control hidden?
isReadOnly() is the control read-only?
isVisible() is the control visible?
numberOfUploadFiles() the number of files the user selected is returned
onChange(fun) execute fun when control changes
readOnly([flg]) set control to read-only (or the reverse if the optional argument is false)
readWrite([flg]) set control to read-write (or the reverse if the optional argument is false)
show([flg]) the control is made visible (or the reverse if the optional argument is false)
uploadFile(idx) the JavaScript FileList object of file number idx. If idx is missing, the whole FileList is returned.
uploadFileExtension(idx) the file name extension of file number idx
uploadFilename(idx) the name of file number idx

(static) list_box()

Source:
This HTML tag, "list-box", adds functionality and a consistent and convenient API to the HTML provided select tag.

Be sure to call the clear() method between uses otherwise the system won't detect the same file being accessed.

AttributeDescription
default-option="label" what is the default selection
multiple multiple entries may be selected (an array will be returned)
required a selection is required
size="20" the minimum number of visible lines (will expand to fill the area it is in)

Content

The Content represents the HTML that would normally be inside an HTML select element. This would only be used in cases of a static list. List contents that depended on data would use the add method.

APIDescription
add(val, lbl, data) add a new list item. val is the value associated to the option, lbl is the text shown in the list, and data represents optional and arbitrary data associated to the option
addItems(items, valField, lblField [, dataField]) used to add an array of items at one time. items is the array of items to add. valField and lblField are the names of the fields in the array. lblField an also be a function that formats the label. It is passed the row in items. dataField is the name of a field whose data is stored along with the item. If null, the whole item is stored.
clear() remove the list contents except the default-option
clearSelection() de-select all elements
disable([flg]) the control remains visible but inactive (or the reverse if the optional argument is false)
enable([flg]) the control is set to visible and enabled (or the reverse if the optional argument is false)
focus() sets focus on control
getAllLabels() returns an array of all the labels
getAllData() returns an array of all the data associated with the control
getData(idx) returns the data associated to an option. If idx is undefined, the selected row is used otherwise the row indexed by idx is used.
getLabel(idx) returns the label associated to an option. If idx is undefined, the selected row is used otherwise the row indexed by idx is used.
getValue(idx) returns the string value associated to an option (returns an array if multiple attribute included). If idx is undefined, the selected row is used otherwise the row indexed by idx is used.
hide([flg]) the control is hidden (or the reverse if the optional argument is false)
isDirty() true if user has changed control value
isDisabled() true if control is disabled
isError(desc) used for error checking. If error, display error message and return true. desc is a description of the user field.
isHidden() true if control is hidden (not visible)
isReadOnly() true if control is read-only
isVisible() true if control is visible (not hidden)
onChange(fun) execute funwhenever the state of this control changes. fun is called as follows fun(val, lbl, data)
onClick(fun) execute funwhenever the user clicks on an item. fun is called as follows fun(val, lbl, data)
onDblClick(fun) execute funwhenever the user double-clicks on an item. fun is called as follows fun(val, lbl, data) (Note that double-click does not function on mobile devices.)
readOnly([flg]) sets control to read-only (or the reverse if the optional argument is false)
readWrite([flg]) sets control to read-write (or the reverse if the optional argument is false)
removeByIndex(idx) remove the row indicated by idx
setLabel(lbl, idx) sets a row label to lbl. If idx is undefined, the selected row is affected otherwise the row indexed by idx is updated.
setValue(val, idx) sets a row value to val. If idx is undefined, the selected row is affected otherwise the row indexed by idx is updated.
selectedIndex() returns the index of the selected item (-1 if none)
selectIndex(row) selects the indicated row index
show([flg]) the control is made visible (or the reverse if the optional argument is false)
size() returns the number of rows in the list
triggerGlobalChange(flg) Default true. If false then control changes will not trigger a global control change. See Utils.someControlValueChanged()

(static) native_date_input()

Source:
This HTML tag, "native-date-input", adds functionality and a consistent and convenient API to the HTML provided date input. Also see the date-input tag.

AttributeDescription
max="20181231" the maximum date allowed
min="20180101" the minimum date allowed
required an entry is required

Content

The Content represents the placeholder or what is shown as a prompt inside the control when there is no value.

APIDescription
clear() clear the control value
disable([flg]) the control remains visible but inactive (or the reverse if the optional argument is false)
enable([flg]) the control is set to visible and enabled (or the reverse if the optional argument is false)
focus() sets the focus (where the cursor is located) to this control
getDateValue() returns the date as a Date instance
getIntValue() returns the date as an integer with the "YYYYMMDD" format
getSQLValue() returns the date as a string with the "YYYY-MM-DD" format
hide([flg]) the control is hidden (or the reverse if the optional argument is false)
isDirty() true if the user changed the value
isDisabled() true if the control is disabled
isError(desc) used for error checking. If error, display error message and return true. desc is a description of the user field.
isHidden() true if the control is hidden (not visible)
isReadOnly() true if the control is read-only
isVisible() true if the control is visible (not hidden)
onCChange(fun) execute fun immediately when the value is changed by the user, fun is passed the control value
onChange(fun) execute funwhenever the user exits the control if the value changed, fun is passed the control value
onEnter(fun) execute fun when enter key hit
readOnly([flg]) set control to read-only (or the reverse if the optional argument is false)
readWrite([flg]) set control to read-write (or the reverse if the optional argument is false)
setValue(val) sets the control value. val may be a Date, number (20180608), or string ("2018-06-08")
show([flg]) the control is made visible (or the reverse if the optional argument is false)

(static) numeric_input()

Source:
This HTML tag, "numeric-input", adds functionality and a consistent and convenient API to the HTML input text element. For example, it will only accept numbers, can verify decimal places, and formats the number when the control is exited by the user.

AttributeDescription
decimal-places="2" controls the maximum number of digits past the decimal point (default 0)
dollar-sign adds a dollar sign when formatting the number
min="20" sets the minimum acceptable value (default 0)
max="200" sets the maximum acceptable value
money sets min="0" dollar-sign decimal-places="2"
no-comma do not format number with commas
required an entry is required
show-zero show zero values (instead of blank if zero)
size="20" width of control in number of characters (default 20)

Content

The Content represents the placeholder or what is shown as a prompt inside the control when there is no value.

APIDescription
clear() erases the contents of the control
disable([flg]) the control remains visible but inactive (or the reverse if the optional argument is false)
enable([flg]) the control is set to visible and enabled (or the reverse if the optional argument is false)
focus() sets the focus (where the cursor is located) to this control
getValue() returns the numeric value of the control
hide([flg]) the control is hidden (or the reverse if the optional argument is false)
isDirty() did user change control content?
isDisabled() is control disabled?
isError(desc) used for error checking. If error, display error message and return true. desc is a description of the user field.
isHidden() is control hidden?
isReadOnly() is control read-only?
isVisible() is control visible?
onCChange(fun) execute fun immediately when the value is changed by the user, fun is passed the control value
onChange(fun) execute funwhenever the user exits the control if the value changed, fun is passed the control value
onEnter(fun) execute fun when enter key hit
readOnly([flg]) set control to read-only (or the reverse if the optional argument is false)
readWrite([flg]) set control to read-write (or the reverse if the optional argument is false)
setValue(val) sets the numeric value of the control
show([flg]) the control is made visible (or the reverse if the optional argument is false)

(static) picture()

Source:
This HTML tag, "picture", adds the ability to display an image.

APIDescription
clear() erases the image
hide([flg]) the image is hidden (or the reverse if the optional argument is false)
isHidden() is image hidden?
isVisible() is image visible?
onclick(fun) fun is executed when the user clicks on the image
setValue(filename, image) sets the image to be displayed
show([flg]) the image is made visible (or the reverse if the optional argument is false)

(static) popup()

Source:
This HTML tag, "popup", adds the ability to define a popup window. Within it, the tags "popup-title" and "popup-body" should be used to define the respective parts of the popup window.

AttributeDescription
height="400px" sets the height of the body of the popup window
width="200px" sets the width of the body of the popup window

(static) push_button()

Source:
This HTML tag, "push-button", adds functionality and a consistent and convenient API to the HTML provided button input.

No new attributes are defined.

Content

No element content is defined.

APIDescription
click() simulate a button click
disable([flg]) the control remains visible but inactive (or the reverse if the optional argument is false)
enable([flg]) the control is set to visible and enabled (or the reverse if the optional argument is false)
focus() sets focus to control
getValue() returns the label on the push button
hide([flg]) hides the control (or the reverse if the optional argument is false)
isDisabled() true if control is disabled
isHidden() true if control is hidden (not visible)
isReadOnly() true if control is read-only
isVisible() true if control is visible (not hidden)
readOnly([flg]) sets control to read-only (or the reverse if the optional argument is false)
readWrite([flg]) sets control to read-write (or the reverse if the optional argument is false)
onclick(fun) fun is executed when the user clicks on the button
setValue(val) sets the label on the push button
show([flg]) the control is made visible (or the reverse if the optional argument is false)

(static) radio_button()

Source:
This HTML tag, "radio-button", adds functionality and a consistent and convenient API to the HTML provided radio input element.

One thing that makes this control different from the others is that it can be referred to with the $$ function by its group name or the individual radio button id. When the group name is used, the entire group is effected. When an individual radio button is addressed by its id, only that control is effected.

All the radio buttons in the same group should share the same group name.

AttributeDescription
align-horizontal align the buttons horizontally (default)
align-vertical align the buttons vertically
button-style="style" style used for the button portion of the radio button
checked pre-selects the particular radio button
group="name" the name of the group this radio button is a part of (the same for each radio button in a group)
label-style="style" style used for the label portion of the radio button
name="name" this is an alternate to the group attribute for HTML consistency
required a selection is required
value="value" required unique value associate with each radio button (different for each radio button)

Content

This is the label associated with the radio button.

APIDescription
APIDescription
clear() sets the radio button group to none selected
disable([flg]) set the control to disabled (or the reverse if the optional argument is false)
enable([flg]) set the control to enabled (or the reverse if the optional argument is false)
focus() set focus on the current control
getIntValue() the integer value of the selected ratio button group
getValue() the string value of the selected ratio button group
hide([flg]) hides the control (or the reverse if the optional argument is false)
isDirty() true if the user changed the value
isDisabled() true if the control is disabled
isError(desc) used for error checking. If error, display error message and return true. desc is a description of the user field.
isHidden(desc) true if the control is hidden (not visible)
isReadOnly() true if the control is read-only
isVisible() true if the control is visible (not hidden)
onChange(fun) execute fun whenever the state of this control changes. fun is passed the value of the control group.
readOnly([flg]) sets the control to read-only (or the reverse if the optional argument is false)
readWrite([flg]) sets the control to read-write (or the reverse if the optional argument is false)
setLabel(val) selects the label for the control
setValue(val) selects the button with the associated value
show([flg]) sets the control to show (not hide) (or the reverse if the optional argument is false)

(static) text_input()

Source:
This HTML tag, "text-input", adds functionality and a consistent and convenient API to the HTML provided text input.

AttributeDescription
fixcap auto-correct capitalization of each word (first char uppercase, rest lowercase)
minlength="5" sets the minimum acceptable string length
maxlength="20" sets the maximum number of characters
password the character are not shown on the screen
required an entry is required (at least 1 character)
size="20" width of control in number of characters (default 20)
upcase when the user enters text, it is auto-upcased

Content

The Content represents the placeholder or what is shown as a prompt inside the control when there is no value.

APIDescription
clear() erases the contents of the control
disable([flg]) the control remains visible but inactive (or the reverse if the optional argument is false)
enable([flg]) the control is set to visible and enabled (or the reverse if the optional argument is false)
focus() sets the focus (where the cursor is located) to this control
getValue() returns the string associated with the control
hide([flg]) the control is hidden (or the reverse if the optional argument is false)
isDirty() has the control contents been changed by user
isError(desc) used for error checking. If error, display error message and return true. desc is a description of the user field.
isDisabled() is the control disabled?
isHidden() is the control hidden?
isReadOnly() is the control read-only?
isVisible() is the control visible?
onCChange(fun) execute fun immediately when the value is changed by the user, fun is passed the control value
onChange(fun) execute funwhenever the user exits the control if the value changed, fun is passed the control value
onEnter(fun) execute fun when enter key hit
readOnly([flg]) set control to read-only (or the reverse if the optional argument is false)
readWrite([flg]) set control to read-write (or the reverse if the optional argument is false)
setPassword(val) if true, treat as a password control; if false, treat as text input - previous value is returned
setValue(val) sets the string inside the control
show([flg]) the control is made visible (or the reverse if the optional argument is false)

(static) text_label()

Source:
This HTML tag, "text-label", adds functionality and a consistent and convenient API to the HTML provided label tag when the 'for' attribute is used or the 'span' tag otherwise.

Content

The Content represents the content of the label.

APIDescription
clear() erases the contents of the control
getValue() returns the string associated with the control
hide([flg]) the control is hidden (or the reverse if the optional argument is false)
isHidden() is the control hidden?
isVisible() is the control visible?
onclick(fun) fun is executed when the user clicks on the text
setColor(val) sets the color of the text
setValue(val) sets the string inside the control
setHTMLValue(val) sets the HTML inside the control
show([flg]) the control is made visible (or the reverse if the optional argument is false)

(static) textbox_input()

Source:
This HTML tag, "textbox-input", adds functionality and a consistent and convenient API to the HTML provided multi-line text input. Static HTML content can be used inside this control.

AttributeDescription
minlength="5" sets the minimum acceptable string length
maxlength="200" sets the maximum number of characters
placeholder="" text to be displaced in the control until the user enters data
required an entry is required (at least 1 character)
upcase when the user enters text, it is auto-upcased

Content

The Content represents the placeholder or what is shown as a prompt inside the control when there is no value.

APIDescription
clear() erases the contents of the control
disable([flg]) the control remains visible but inactive (or the reverse if the optional argument is false)
enable([flg]) the control is set to visible and enabled (or the reverse if the optional argument is false)
focus() sets the focus (where the cursor is located) to this control
getValue() returns the string associated with the control
hide([flg]) the control is hidden (or the reverse if the optional argument is false)
isDirty() true if user changed control contents
isDisabled() true if control is disabled
isError(desc) used for error checking. If error, display error message and return true. desc is a description of the user field.
isHidden() true if user control is hidden (not visible)
isReadOnly() true if control is read-only
isVisible() true if control is visible (not hidden)
onCChange(fun) execute fun immediately when the value is changed by the user, fun is passed the control value
onChange(fun) execute funwhenever the user exits the control if the value changed, fun is passed the control value
readOnly([flg]) sets control to read-only (or the reverse if the optional argument is false)
readWrite([flg]) sets control to read-write (or the reverse if the optional argument is false)
setValue(val) sets the string inside the control
show([flg]) the control is made visible (or the reverse if the optional argument is false)

(static) time_input()

Source:
This HTML tag, "time-input", provides a control where the user can enter a time. The time appear like "3:30 PM". A 24 hour clock is also supported automatically (like 14:30). The values this control interacts with is a plain integer in the form HHMM in a 24 hour clock. So, "1:30 PM" would be 1330.

AttributeDescription
min="0800" the minimum time allowed
min="1800" the maximum time allowed
required an entry is required
size="20" width of control in number of characters (default 20)
zero-fill zero fill the display

Content

The Content represents the HTML that would normally be inside an HTML select element. This would only be used in cases of a static list. List contents that depended on data would use the add method.

APIDescription
clear() remove the value associated with the control
disable([flg]) the control remains visible but inactive (or the reverse if the optional argument is false)
enable([flg]) the control is set to visible and enabled (or the reverse if the optional argument is false)
focus() sets the focus (where the cursor is located) to this control
getValue() returns the value associated with the control
hide([flg]) the control is hidden (or the reverse if the optional argument is false)
isDirty() true if user changed control value
isDisabled() true if control is disabled
isError(desc) used for error checking. If error, display error message and return true. desc is a description of the user field.
isHidden() true if control is hidden (not visible)
isReadOnly() true if control is read-only
isVisible() true if control is visible (not hidden)
onCChange(fun) execute fun immediately when the value is changed by the user, fun is passed the control value
onChange(fun) execute funwhenever the user exits the control if the value changed, fun is passed the control value
onEnter(fun) execute fun when enter key hit
readOnly([flg]) sets control to read-only (or the reverse if the optional argument is false)
readWrite([flg]) sets control to read-write (or the reverse if the optional argument is false)
setValue(val) sets the value associated with the control
show([flg]) the control is made visible (or the reverse if the optional argument is false)