# M18 JSF Component

Version: 1.0 | Release Date: 30/6/2018

# inputText

# Attributes

Name Type Default Value Description
id String Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended.
value String Component's value.
style String Component's inline CSS.
styleClass String Component's CSS class name. Space separated.
rendered boolean true Indicate if the component should be rendered. If false, the component will not be generated in HTML.
visible boolean true Indicate if the component should be visible. If false, the component will not be visible in UI but the component will still be generated in HTML.
disabled boolean false Indicate if the component is disabled. Disabled components will not trigger events.
readOnly boolean false Indicate if the component is read-only. Read-only components will trigger events.
required boolean false Indicate if the component must be filled.
label String Component's prefix label.
labelVisible boolean true Indicate if the component's label is rendered.
suffixLabel String Component's suffix label.
tableName String Table related to the component's value.
columnName String Column related to the component's value.
info String Component's information.
infoPos String end Position of the component's information. Possible value: start, prefix, suffix, end.
trim boolean false Indicate if space needs to be removed from the beginning and the end of the value.
upperCase boolean false Indicate if the value should change to capital letters.
mask String Formatting of the value.
password boolean false Indicate if type of value is password.
regex String Regular Expression of the mask.
maxlength int Value's maximnum length.

# Events

Name Description
change Triggered by changing the value
blur Triggered by removing the focus from the component
focus Triggered by focusing on the component
click Triggered by clicking the component
dblclick Triggered by double clicking the component
keydown Triggered by pressing any keys
keypresss Triggered by pressing and releasing any character's keys. Non-character's key like Ctrl, Shift will not trigger this event.
keyup Triggered by releasing over any keys
mousedown Triggered by pointing device button pressing on the component
mouseup Triggered by pointing device button releasing over the component
mousemove Triggered by pointing device button moving over the component
mouseout Triggered by pointing device button moving off the component

# inputNum

# Attributes

Name Type Default Value Description
id String Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended.
value Number Component's value.
style String Component's inline CSS.
styleClass String Component's CSS class name. Space separated.
rendered boolean true Indicate if the component should be rendered. If false, the component will not be generated in HTML.
visible boolean true Indicate if the component should be visible. If false, the component will not be visible in the UI but the component will still be generated in HTML.
disabled boolean false Indicate if the component is disabled. Disabled components will not trigger events.
readOnly boolean false Indicate if the component is read-only. Read-only components will trigger events.
required boolean false Indicate if the component must be filled.
label String Component's prefix label
labelVisible boolean true Indicate if the component's label is rendered.
suffixLabel String Component's suffix label.
tableName String Table related to the component's value.
columnName String Column related to the component's value.
info String Component's information.
infoPos String end Position of the component's information. Possible value:start,prefix,suffix,end.
groupUsed boolean true Indicate if the integer part should be grouped.
groupSize int 3 Define how large is the size of the group of integer part.
length int Total length of the number.
decimal int Size of the fractional part.
decimalSeparator String . Define the fractional part separator.
thousandSeparator String , Define the thousand separator.
max double Define the maximum value of the number.
min double Define the minimum value of the number.

# Events

Same as inputText's events.

# inputDate

# Attributes

Name Type Default Value Description
id String Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended.
value Date Component's value.
style String Component's inline CSS.
styleClass String Component's CSS class name. Space separated.
rendered boolean true Indicate if the component should be rendered. If false, the component will not be generated in HTML.
visible boolean true Indicate if the component should be visible. If false, the component will not be visible in UI but the component will still be generated in HTML.
disabled boolean false Indicate if the component is disabled. Disabled components will not trigger events.
readOnly boolean false Indicate if the component is read-only. Read-only components will trigger events.
required boolean false Indicate if the component must be filled.
label String Component's prefix label
labelVisible boolean true Indicate if the component's label is rendered.
suffixLabel String Component's suffix label.
tableName String Table related to the component's value.
columnName String Column related to the component's value.
info String Component's information.
infoPos String end Position of the component's information. Possible value: start, prefix, suffix, end.
clearBtn boolean false Indicate if clear button should be shown in the panel.
daysOfWeekDisabled int[] Define the disabled days. Ranged from 0 to 6 in which 0 represent Sunday. Format like #[0, 1, 3] can be used in xhtml.
datesDisabled Date[] Define the disabled dates.
defaultViewDate Date Define the initial date picked. Default: today.
endDate Date Define the lastest day user can pick.
startDate Date Define the earliest day user can pick.
format String yyyy-mm-dd Format of the date.
minView String days The smallest unit that can be picked. Options: days, months, year, decades, centuries.
startView String days The initial view of the selected date. Options: days, months, year, decades, centuries.
orientation String auto Position of the panel. Combination of horizontal and vertical position. Horizontal options: left, right, auto. Vertical options: top, bottom, auto.
weekStart int 0 Define the start days of the week. Ranged from 0 to 6 in which 0 represent Sunday.
todayBtn boolean true Indicate if "Today" button should be shown in the panel.
todayHighlight boolean true Indicate if "Today" should be highlighted.
showOnFocus boolean false Indicate if the panel should open automatically when this component is in focused.

# Events

Same as inputText's events.

# inputTime

# Attributes

Name Type Default Value Description
id String Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended.
value String Component's value.
style String Component's inline CSS.
styleClass String Component's CSS class name. Space separated.
rendered boolean true Indicate if the component should be rendered. If false, the component will not be generated in HTML.
visible boolean true Indicate if the component should be visible. If false, the component will not be visible in UI but the component will still be generated in HTML.
disabled boolean false Indicate if the component is disabled. Disabled components will not trigger events.
readOnly boolean false Indicate if the component is read-only. Read-only components will trigger events.
required boolean false Indicate if the component must be filled.
label String Component's prefix label
labelVisible boolean true Indicate if the component's label is rendered.
suffixLabel String Component's suffix label.
tableName String Table related to the component's value.
columnName String Column related to the component's value.
info String Component's information.
infoPos String end Position of the component's information. Possible value: start,prefix,suffix,end.
maxHours int 24 Define the maximum hour.
showSeconds boolean true Indicate if value of second should be shown.
defaultTime String Default time.

# Events

Name Description
changeTime Triggered by changing the value
show Triggered when time panel is shown
hide Triggered when time panel is hidden

# inputCombo

# Attributes

Name Type Default Value Description
id String Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended.
value Number, String Component's value.
style String Component's inline CSS.
styleClass String Component's CSS class name. Space separated.
rendered boolean true Indicate if the component is rendered. If false, the component will not be generated in HTML.
visible boolean true Indicate if the component should be visible. If false, the component will not be visible in the UI but the component will still be generated in HTML.
disabled boolean false Indicate if the component should be disabled. Disabled components will not trigger events.
readOnly boolean false Indicate if the component should be read-only. Read-only components will trigger events.
required boolean false Indicate if the component must be filled.
label String Component's prefix label
labelVisible boolean true Indicate if the component's label is rendered.
suffixLabel String Component's suffix label.
tableName String Table related to the component's value.
columnName String Column related to the component's value.
info String Component's information.
infoPos String end Position of the component's information. Possible value: start, prefix, suffix, end.
multiple boolean false Indicate if the value can be multi-selected.
liveSearch boolean false Indicate if searching is enabled.
keepInvalid boolean false Indicate if the invalid value should be kept.
emptyValue Object "" Define the empty value.

# Events

Name Description
change Triggered by changing the value
blur Triggered by removing the focus from the component
focus Triggered by focusing on the component
click Triggered by clicking the component
dblclick Triggered by double clicking the component

# Optional Child-Tags

  • selectItem, a single option. Attributes:
Name Type Default Value Description
itemLabel String Option's label.
itemValue Number, String Option's value.
description String Options's description.
style String Inline CSS.
styleClass String CSS class name.
disabled boolean false Indicate if the component should be disabled.
rendered boolean true Indicate if the component should be rendered.
  • selectItems, a group of options. Attributes:
Name Type Default Value Description
value Object A group of options.
  • selectItemGroup, a combination of selectItem, selectItems, selectItemGroup. Attributes:
Name Type Default Value Description
itemLabel String Group's label

# inputColor

# Attributes

Name Type Default Value Description
id String Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended.
value String Component's value.
style String Component's inline CSS.
styleClass String Component's CSS class name. Space separated.
rendered boolean true Indicate if the component should be rendered. If false, the component will not be generated in HTML.
visible boolean true Indicate if the component should be visible. If false, the component will not be visible in the UI but the component will still be generated in HTML.
disabled boolean false Indicate if the component is disabled. Disabled components will not trigger events.
readOnly boolean false Indicate if the component is read-only. Read-only components will trigger events.
required boolean false Indicate if the component must be filled.
label String Component's prefix label.
labelVisible boolean true Indicate if the component's label is rendered.
suffixLabel String Component's suffix label.
tableName String Table related to the component's value.
columnName String Column related to the component's value.
info String Component's information.
infoPos String end Position of the component's information. Possible value: start, prefix, suffix, end.
withInput boolean true Indicate if input should be shown.
format String rgba Format of the color. Options: hex, rgb, rgba.
horizontal boolean false Indicate if the setting bar of transparency and color should be horizontal.
defaultColors String[] Define the default colors.

# Events

Same as inputText's events.

# inputCheck

# Attributes

Name Type Default Value Description
id String Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended.
value boolean Component's value.
style String Component's inline CSS.
styleClass String Component's CSS class name. Space separated.
rendered boolean true Indicate if the component should be rendered. If false, the component will not be generated in HTML.
visible boolean true Indicate if the component should be visible. If false, the component will not be visible in the UI but the component will still be generated in HTML.
disabled boolean false Indicate if the component is disabled. Disabled components will not trigger events.
readOnly boolean false Indicate if the component is read-only. Read-only components will trigger events.
required boolean false Indicate if the component must be filled.
label String Component's prefix label.
labelVisible boolean true Indicate if the component's label is rendered.
suffixLabel String Component's suffix label.
tableName String Table related to the component's value.
columnName String Column related to the component's value.
info String Component's information.
infoPos String end Position of the component's information. Possible value: start, prefix, suffix, end.
textPos String right Position of the component's label. Options: left, right.

# Events

Name Description
change Triggered by changing the value

# inputRadio

# Attributes

Name Type Default Value Description
id String Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended.
value String, Number, boolean Component's value.
style String Component's inline CSS.
styleClass String Component's CSS class name. Space separated.
rendered boolean true Indicate if the component should be rendered. If false, the component will not be generated in HTML.
visible boolean true Indicate if the component should be visible. If false, the component will not be visible in the UI but the component will still be generated in HTML.
disabled boolean false Indicate if the component is disabled. Disabled components will not trigger events.
readOnly boolean false Indicate if the component is read-only. Read-only components will trigger events.
required boolean false Indicate if the component must be filled.
label String Component's prefix label.
labelVisible boolean true Indicate if the component's label is rendered.
suffixLabel String Component's suffix label.
tableName String Table related to the component's value.
columnName String Column related to the component's value.
info String Component's information.
infoPos String end Position of the component's information. Possible value: start, prefix, suffix, end.
textPos String right Position of the component's label. Options: left, right.

# Events

Name Description
change Triggered by changing the value

# inputSpinner

# Attributes

Name Type Default Value Description
id String Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended.
value Number Component's value.
style String Component's inline CSS.
styleClass String Component's CSS class name. Space separated.
rendered boolean true Indicate if the component should be rendered. If false, the component will not be generated in HTML.
visible boolean true Indicate if the component should be visible. If false, the component will not be visible in the UI but the component will still be generated in HTML.
disabled boolean false Indicate if the component is disabled. Disabled components will not trigger events.
readOnly boolean false Indicate if the component is read-only. Read-only components will trigger events.
required boolean false Indicate if the component must be filled.
label String Component's prefix label.
labelVisible boolean true Indicate if the component's label is rendered.
suffixLabel String Component's suffix label.
tableName String Table related to the component's value.
columnName String Column related to the component's value.
info String Component's information.
infoPos String end Position of the component's information. Possible value: start, prefix, suffix, end.
min doube 0 Define the minimum value.
max double 100 Define the maximum value.
step double 100 Define the legal number intervals.
decimal int 0 Define the number of fractional part.
verticalButton boolean false Indicate if Add/Subtract button should be aligned vertically.

# Events

Same as inputText's events.

# inputSwitch

# Attributes

Name Type Default Value Description
id String Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended.
value boolean Component's value.
style String Component's inline CSS.
styleClass String Component's CSS class name. Space separated.
rendered boolean true Indicate if the component should be rendered. If false, the component will not be generated in HTML.
visible boolean true Indicate if the component should be visible. If false, the component will not be visible in the UI but the component will still be generated in HTML.
disabled boolean false Indicate if the component is disabled. Disabled components will not trigger events.
readOnly boolean false Indicate if the component is read-only. Read-only components will trigger events.
required boolean false Indicate if the component must be filled.
label String Component's prefix label.
labelVisible boolean true Indicate if the component's label is rendered.
suffixLabel String Component's suffix label.
tableName String Table related to the component's value.
columnName String Column related to the component's value.
info String Component's information.
infoPos String end Position of the component's information. Possible value: start, prefix, suffix, end.
onColor String primary Define the color when the switch is on. Options: primary, success, danger, warning, info.
offColor String primary Define the color when the switch is off. Options: primary, success, danger, warning, info.
onText String ON Indicate the text when the switch is on.
offText String OFF Indicate the text when the switch is off.
handleWidth int Define the width of the switch.
labelWidth int Define the width of the switch's label.

# Events

Name Description
change Triggered by changing the value

# inputSlider

# Attributes

Name Type Default Value Description
id String Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended.
value Number Component's value.
style String Component's inline CSS.
styleClass String Component's CSS class name. Space separated.
rendered boolean true Indicate if the component should be rendered. If false, the component will not be generated in HTML.
visible boolean true Indicate if the component should be visible. If false, the component will not be visible in the UI but the component will still be generated in HTML.
disabled boolean false Indicate if the component is disabled. Disabled components will not trigger events.
readOnly boolean false Indicate if the component is read-only. Read-only components will trigger events.
required boolean false Indicate if the component must be filled.
label String Component's prefix label
labelVisible boolean true Indicate if the component's label is rendered.
suffixLabel String Component's suffix label.
tableName String Table related to the component's value.
columnName String Column related to the component's value.
info String Component's information.
infoPos String end Position of the component's information. Possible value: start, prefix, suffix, end.
min double 0 Define the minimum value.
max double 10 Define the maximum value.
step double 1 Define the legal number intervals.

# Events

Name Description
change Triggered by changing the value

# inputTexearea

# Attributes

Name Type Default Value Description
id String Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended.
value String Component's value.
style String Component's inline CSS.
styleClass String Component's CSS class name. Space separated.
rendered boolean true Indicate if the component should be rendered. If false, the component will not be generated in HTML.
visible boolean true Indicate if the component should be visible. If false, the component will not be visible in the UI but the component will still be generated in HTML.
disabled boolean false Indicate if the component is disabled. Disabled components will not trigger events.
readOnly boolean false Indicate if the component is read-only. Read-only components will trigger events.
required boolean false Indicate if the component must be filled.
label String Component's prefix label.
labelVisible boolean true Indicate if the component's label is rendered.
suffixLabel String Component's suffix label.
tableName String Table related to the component's value.
columnName String Column related to the component's value.
info String Component's information.
infoPos String end Position of the component's information. Possible value: start, prefix, suffix, end.
rows int Define the number of component's rows.
cols int Define the number of component's columns.
maxlength int Value's maximnum length.
trim boolean false Indicate if space need to be removed from the beginning and the end of the value.
upperCase boolean false Indicate if the value should change to capital letters.

# Events

Same as inputText's events.

# inputFile

# Attributes

Name Type Default Value Description
id String Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended.
multiple boolean false Indicate if multiple files can be uploaded at once.
briefStyle boolean false Indicate if brief style is enabled. Brief Style: Show all buttons, images but no content.
download boolean true Indicate if the uploaded files can be downloaded.
reloadable boolean false Indicate if the file can be reloaded.
styleClass String Component's CSS class name. Space separated.
style String Component's inline CSS.
disabled boolean false Indicate if the component is disabled. Disabled components will not trigger events.
readonly boolean false Indicate if the component is read-only. Read-only components will trigger events.
instantUpload boolean false Indicate if the file should be transfer to server once it has uploaded.
dropZone boolean false Indicate if the drop zone should be shown.
caption boolean true Indicate if caption should be shown.
keepData boolean false Indicate if the information of keeping the data will be shown in the component.
uploadListener EL expression Define the listener used to handle the event after uploaded the files. State the method using EL expression.
maxCount int Define the maximum number of files that can be selected.
maxFileSize long Define the maximum file's size.
removeable boolean true Indicate if selected files can be removed.
fileType string Define the file's type. Options: image, html, text, video, audio, flash, pdf, object, other. Comma(,) Separated.
fileExtension string Define the file's extension. Comma(,) Separated.

# lookup

# Attributes

Name Type Default Value Description
id String Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended.
value String Component's value.
style String Component's inline CSS.
styleClass String Component's CSS class name. Space separated.
rendered boolean true Indicate if the component should be rendered. If false, the component will not be generated in HTML.
visible boolean true Indicate if the component should be visible. If false, the component will not be visible in the UI but the component will still be generated in HTML.
disabled boolean false Indicate if the component is disabled. Disabled components will not trigger events.
readOnly boolean false Indicate if the component is read-only. Read-only components will trigger events.
required boolean false Indicate if the component must be filled.
label String Component's prefix label.
labelVisible boolean true Indicate if the component's label is rendered.
suffixLabel String Component's suffix label.
tableName String Table related to the component's value.
columnName String Column related to the component's value.
info String Component's information.
infoPos String end Define the Position of the component's information. Possible value:start, prefix, suffix, end.
lookupType String searchType, defined in stSearch.xml, of the current lookup component.
checkAccess boolean true Indicate if the data should be filtered based on user's access right.
lookupDto StLookupDto Define the data transfer object of the lookup.

# treeCombo

# Attributes

Name Type Default Value Description
id String Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended.
value Number, String Component's value.
style String Component's inline CSS.
styleClass String Component's CSS class name. Space separated.
rendered boolean true Indicate if the component should be rendered. If false, the component will not be generated in HTML.
visible boolean true Indicate if the component should be visible. If false, the component will not be visible in UI but the component will still be generated in HTML.
disabled boolean false Indicate if the component is disabled. Disabled components will not trigger events.
readOnly boolean false Indicate if the component is read-only. Read-only components will trigger events.
required boolean false Indicate if the component must be filled.
label String Component's prefix label.
labelVisible boolean true Indicate if the component's label is rendered.
suffixLabel String Component's suffix label.
tableName String Table related to the component's value.
columnName String Column related to the component's value.
info String Component's information.
infoPos String end Position of the component's information. Possible value: start, prefix, suffix, end.
items Object Define the tree node, it can be TreeComboData or a group of TreeComboNode.
liveSearch boolean false Indicated if searching should be supported.
emptyValue Object null Define the empty's value.

# Events

Name Description
change Triggered by changing the value

# fluidPanel

# Attributes

Name Type Default Value Description
id String Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended.
style String Component's inline CSS.
styleClass String Component's CSS class name. Space separated.
rendered boolean true Indicate if the component should be rendered.
column int 2 Define the maximum columns divided inside the panel. Value should be factor of 12, i.e. 1, 2, 3, 4, 6, 12. 1, 2, 3, 4 are recommended.
wide boolean true Indicate if the width of the panel should be same as the width of the parent component.
title String Define the title.
bordered boolean false Indicate if border should be existed and title will be inside the container.
groupBorder boolean false Indicate if border should be existed and title will be in line with the border.
collapsible boolean false Indicate if the panel can be collapsed.
status String normal Define the initial state. Options: normal, collapsed.
titleAlign String left Define the alignment of title. Options: left, center, right.
actionAlign String left Define the alignment of expand/collapse buttons Options: left, center, right.
collapseText String Define the label of the collapse button.
expandText String Define the label of the expand button.

# codeEditor

# Attributes

Name Type Default Value Description
id String Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended.
value String Component's value.
style String Component's inline CSS.
styleClass String Component's CSS class name. Space separated.
rendered boolean true Indicate if the component should be rendered. If false, the component will not be generated in HTML.
visible boolean true Indicate if the component should be visible. If false, the component will not be visible in UI but the component will still be generated in HTML.
disabled boolean false Indicate if the component is disabled. Disabled components will not trigger events.
readOnly boolean false Indicate if the component is read-only. Read-only components will trigger events.
required boolean false Indicate if the component must be filled.
label String Component's prefix label.
labelVisible boolean true Indicate if the component's label is rendered.
suffixLabel String Component's suffix label.
tableName String Table related to the component's value.
columnName String Column related to the component's value.
info String Component's information.
infoPos String end Position of the component's information. Possible value: start, prefix, suffix, end.
lineNumbers boolean true Indicate if line numbers should be shown.
language String javascript Define the programming language. Options: javascript, formula, plaintplt, html, htmltplt, sql, sqltplt.
lineWrapping boolean true Indicate if line wrapping should be enabled.

# Events

Name Description
change Triggered by changing the value

# jqGrid

# Attributes

Name Type Default Value Description
id String Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended.
style String Component's inline CSS.
styleClass String Component's CSS class name. Space separated.
rendered boolean true Indicate if the component should be rendered.
visible boolean true Indicate if the component should be visible.
searchable boolean true Indicate if searching should be supported.
columns List<JqGridCol> Define the columns.
sortable boolean true Indicate if sorting should be supported.
supportPage boolean true Indicate if pagination should be supported.
multiselect boolean false Indicate if multiple selection should be supported.
height int 250 Define the height of the container.
rowNum int Define the number of rows per page.
rownumbers boolean false Indicate if row number should be shown.
rowList int[] Define the selection of the number of rows per page.
sortname String Define the initital sorting column.
sortorder String asc Define the initital sorting order. Options: asc, desc,
treeGrid boolean false Indicate if the container should be presented like a tree.
ExpandColumn String Define the column used for expansion of the tree.
autoencode boolean true Indicate if html tag should be encoded.
rownumWidth int 35 Define the width of the column of row number.

# Events

Name Description
onClickRow Triggered by clicking any rows
onDblClickRow Triggered by double clicking any rows

# Optional Child-Tags

  • tableColumn, columns of the table. Attributes:
Name Type Default Value Description
name String Define the name. Unique key.
label String Define the label.
align String left Define the alignment. Options: left, center, right.
formatter String Define the type presented in the UI. Value should be javascript's function,Built-in formatter: checkbox, image.
classes String Define the CSS style class.
width int 150 Define the width.
sortable boolean true Indicate if sorting is supported.
hidden boolean false Indicate if this column should be hidden.
resizable boolean true Indicate if this column can be resized in the UI.
sorttype String text Define the type of sorting. Value can be pre-defined type or javascript function. Pre-defined types: int, float, date, text.
cellattr String Define a javascript function to add additional attribute to the component.

# checkGroup & radioGroup

# Attributes

Name Type Default Value Description
id String Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended.
value String Component's value.
style String Component's inline CSS.
styleClass String Component's CSS class name. Space separated.
rendered boolean true Indicate if the component should be rendered. If false, the component will not be generated in HTML.
visible boolean true Indicate if the component should be visible. If false, the component will not be visible in UI but the component will still be generated in HTML.
disabled boolean false Indicate if the component is disabled. Disabled components will not trigger events.
readOnly boolean false Indicate if the component is read-only. Read-only components will trigger events.
required boolean false Indicate if the component must be filled.
label String Component's prefix label.
labelVisible boolean true Indicate if the component's label is rendered.
suffixLabel String Component's suffix label.
info String Component's information.
infoPos String end Position of the component's information. Possible value:start,prefix,suffix,end.
column int 2 Define the maximum columns divided inside the panel. Value should be factor of 12, i.e. 1, 2, 3, 4, 6, 12. 1, 2, 3, 4 are recommended.
groupTitle String Define the group title.
type String If type="border", border will be added.
nativeCheck boolean false Indicate if native stype checkbox will be used. If false, Bootstrap style checkbox will be used.
textPos String left Define the position of the checkbox's text. Options: left, right.
dataOption Collection<OptionItem> Define the items in the checkbox/ radio group.
onchange Define the function to handle the change of value.

# Optional Child-Tags

  • selectItem, single item. Attributes:
Name Type Default Value Description
itemLabel String Define the label.
itemValue Number, String Define the value.
description String Define the description.
style String Define the inline css.
styleClass String Define the css class name.
disabled boolean false Indicate if the component is disabled.
rendered boolean true Indicate if the component should be rendered.
  • selectItems, a group of items. Attributes:
Name Type Default Value Description
value Object Define a group of items.

# toolbar

# Attributes

Name Type Default Value Description
id String Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended.
style String Component's inline CSS.
styleClass String Component's CSS class name. Space separated.
rendered boolean true Indicate if the component should be rendered. If false, the component will not be generated in HTML.
visible boolean true Indicate if the component should be visible. If false, the component will not be visible in UI but the component will still be generated in HTML.
disabled boolean false Indicate if the component is disabled. Disabled components will not trigger events.
labelVisible boolean true Indicate if the component's label is rendered.
iconStyle String small Define the style of the icon. Options:small, large, hide.
toolStyle String Define the style between the tools' icon. Options: noborder, nospace.
moreStyle String secondary Define the style of more button,only works with autoFit="true". Options: primary, secondary, success, warning, danger
autoFit boolean false Indicate if the size of toolbar should be calibrated base on the with of the container.

# Optional Child-Tags

  • actionItem, toolbar base action. Attributes:
Name Type Default Value Description
action String Define the name of the action. Unique Key.
onstart String Define the Javascript to handle the event triggered before the action start.
oncomplete String Define the Javascript to handle the event triggered when the action is completed.
onsuccess String Define the Javascript to handle the event triggered when the action's request return success.
onerror String Define the Javascript to handle the event triggered when the action's request return errors.
async boolean false Indicate if the action should be synchronized.
partialSubmit boolean true Indicate if the action only submit partial data.
process String Define the component in which the value is needed.
actionListener EL expression Define the listener used to handel the action.
update String Define the id of the components that need to be updated after the action finished.
style String Define the inline CSS.
styleClass String Define the CSS class name. Space separated.
colorStyle String Define the button's color style. Options: primary, secondary, success, warning, danger.

Use <caw:icon> to define the image of the actionItem

  • actionGroup

    Put a group of actionItem together (Side by side).

  • actionStack

    Present a group of actionItem as a drop down menu. The first actionItem's icon will be shown in the toolbar, others will become items inside the drop down menu.

  • actionMenu

    Present a group of actionItem as a drop down menu. Use label to define the text shown in the toolbar.

  • actionFacet

    Put other components into toolbar.

<caw:toolbar id="toolbar">
  <caw:actionItem action="action1" onstart="" oncomplete="" 
                  process="@this" update="#{caw:webIDs('id1 id2')}"
                  actionListener="#{xxxBean.action1}"
                  disabled="false" rendered="true"
                  mess-label="actionMess" title="#{caw:mess('actionMess')}">
    <caw:icon name="cicon-panel" library="font/cawIcon"></caw:icon
  </caw:actionItem>
  <caw:actionGroup>
    <caw:actionItem ...></caw:actionItem>
    <caw:actionItem ...></caw:actionItem>
  </caw:actionGroup>
  <caw:actionStack>
     <caw:actionItem ...></caw:actionItem>
     <caw:actionItem ...></caw:actionItem>
  </caw:actionStack>
  <caw:actionMenu label="Dropdown">
     <caw:actionItem ...></caw:actionItem>
     <caw:actionItem ...></caw:actionItem>
  </caw:actionMenu>
  <caw:actionFacet name="udfaction">
    <caw:inputText></caw:inputText>
  </caw:actionFacet>
</caw:toolbar>

# tabView

# Attributes

Name Type Default Value Description
id String Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended.
style String Component's inline CSS.
styleClass String Component's CSS class name. Space separated.
rendered boolean true Indicate if the component should be rendered. If false, the component will not be generated in HTML.
visible boolean true Indicate if the component should be visible. If false, the component will not be visible in UI but the component will still be generated in HTML.
tabStyle String card Defined the tab's style. Options: tab, pill, card.
colorStyle boolea Defined the tab's label's color. Options:primary, info, success, warning, danger.
colorful boolean Indicated if the tab's label should use different color.
tabPosition String above Defined the tab's position. Options: above, right, below, left.
tabAlign String left Defined the tab's alignment. Options: left, center, right.
bordered boolean false Indicate if bordered should be shown.
activeTab String Defined the activated tab using the id of <caw:tab>.
syncActive boolean false Indicated if the tab's state should be synchronized to Back-end Java bean.

# Optional Child-Tags

  • tab, define the content of the tab. Attributes:
Name Type Default Value Description
id String Unique Key. Same id should not exist under the same parent component. ID assigned to every component is recommended.
style String Component's inline CSS.
styleClass String Component's CSS class name. Space separated.
rendered boolean true Indicate if the component should be rendered. If false, the component will not be generated in HTML.
disabled boolean false Indicate if the current tab should be disabled.
ajaxLoad boolean false Indicate if the content of the tab should be loaded only when the tab have been activated once.
onAjaxLoad ELExpression Define the method to handle the event before the content loaded.
onActive ELExpression Define the method to handle the event when the tab is activated.

# Events

Name Description
shown Triggered when tab view is shown
hidden Triggered when tab view is hidden
beforeShow Triggered before the tab view is shown
beforeHide Triggered before the tab view is hidden

# waterMark

# Attributes

Name Type Default Value Description
id String Unique Key. Same id should not exist under the same parent component. id assigned to every component is recommended.
style String Component's inline CSS.
styleClass String Component's CSS class name. Space separated.
rendered boolean true Indicate if the component should be rendered. If false, the component will not be generated in HTML.
visible boolean true Indicate if the component should be visible. If false, the component will not be visible in UI but the component will still be generated in HTML.
name String Define the Name.
library String Define the library used.
opacity float 1 Define the opacity. Ranged from 0 to 1. 0 represent invisible.
zIndex int 0 Define the level. The larger the value, the highest the water mark will be placed.
position String Define the position of the water mark. Options:topleft, topright, bottomleft, bottomright, bottom, top, left, right, center
positionX String Define the horizontal position. Options: left, center, right, other format like 10px. Mutually exclusive with position.
positionY String Define the vertical position. Options: top,center,bottom,other format like 10%. Mutually exclusive with position.
size String Define the size of the water mark. Options: cover, contain. cover means resizing the water mark to cover the background. contain means resizing the water mark to its largest size. Exact value can also be input like size: 100px 200px.
width String auto Define the width of the water mark, like 100px, 50%. Mutually exclusive with size.
height String auto Define the height of the water mark, like 100px, 50%. Mutually exclusive with size.

# EditTable

# Attributes

Name Type Required Default Value Description
model String Define an interface which is default implemented by EditTableModel. TableData(model of SqlTable) extends EditTableModel
tableName String Y Define the name of EditTable
primarykey String Define the primary field(s) of EditTable, ; separated. If all primary fields of a row are empty, system will consider it as an empty row.
caption String Define the title of EditTable. If set, expand/collapse EditTable function will be enabled.
style String Define the CSS type of EditTable.
styleClass String Define the style class name of EidtTable. Use blank space to separate the classes.
expandColumn String Y in Tree mode Define the column to expand the Tree
height int 200 Define the height of EditTable
rownumWidth int 40 Define the width of row number
readonly boolean false Indicate if this EditTable is read-only
editable boolean true Indicate if this EditTable is editable
sortable boolean true Indicate if this EditTable supports sorting
paging boolean false Indicate if this EditTable supports page turning. If not set, it will opposite the editable attribute.
changeOrder boolean false Indicate if this EditTable will show the "Move Up" and "Move Down" buttons in "Action" column (row operation)
showDefAction boolean true Indicate if this EditTable will show the "Add Row Above", "Add Row Below" and "Delete Row" buttons in "Action" column (row operation). Only effective when editable = true.
showAddDeforeIcon boolean true Indicate if this EditTable will show "Add Row Above" button in "Action" column (row operation). Only effective when editable = true.
dupRowAction boolean true Indicate if this EditTable will show "Copy Row" button in "Action" column (row operation). Only effective when editable = true.
rownumbers boolean true Indicate if this EidtTable will show row numbers
treeGrid boolean false Indicate if this EditTable will present Tree mode
batchUpdate boolean false Indicate if this EditTable supports Batch Update function. If enabled, a column of checkbox will be inserted into the EditTable. Only rows withcheckbox being ticked will be updated.
showFooterRow boolean false Indicate if this EditTable will show the summary row (place at the bottom of EditTable by default)
showTopSummary boolean false Indicate if the summary row is placed on the top of EditTable
showYScrollBar boolean true Indicate if this EditTable will show the scroll bar of Y-axis
supportFormat boolean true Indicate if this EditTable supports Table Format Setup
supportModifyChange boolean true Indicate if “*” should be marked before the title of current page when value changes in the cell of this EditTable
supportUDFValid boolean true Indicate if this EditTable supports validation of compulsory field that defined in UDF Layout
supportArrowKeyPageTurning boolean false Indicate if this EditTable supports turning page through the arrow keys when page turning is enabled
supportSrollPageTurning boolean false Indicate if this EditTable supports turning page through scrolling the mouse when page turning is enabled
needDefRow boolean true Indicate if an empty row is needed in this EditTable
copyExcelData boolean false Indicate if this EditTable supports copying data from Excel
addRowWhenChanged boolean true Indicate if an empty row should be added to the bottom after value changed in the last row
needRowSelectEvent boolean false Indicate if the rowSelectEvent in function ActionPerformed of JSF Bean should be triggered when the row in EditTable is on focus
showLeftIcon boolean true Indicate if the icon of "Shift Column Left" in the function area of column title should be shown
showRightIcon boolean true Indicate if the icon of "Shift Column Right" in the function area of column title should be shown
showDeleteIcon boolean true Indicate if the icon of "Delete Column" in the function area of column title should be shown (only available in non-compulsory column)
showFrozenIcon boolean true Indicate if the icon of "Freeze" in the function area of column title should be shown
showDupColIcon boolean false Indicate if the icon of "Copy Column" in the function area of column title should be shown. If enabled, a column of checkbox will be inserted into the EditTable. The value of selected cell will be updated to other cells of current column, only rows with thischeckbox being ticked will be updated.
showAddRowIcon boolean true Indicate if the icon of "Add Row" in the function area of this EditTable should be shown (add to be the last row)

# Element

tableColumn : column of the EditTable, common attribute

Name Type Default Value Description
columnName String Define the name of column. It's compulsory and unique.
width int 150 Define the width of column
editType String cawText Define the type of column
label String Define the title of column
pattern String Define the constraint rule of column value input and presentation, corresponds to pattern.xml
required boolean false Indicate if this column is a compulsory field
editable boolean Indicate if this column is editable. The value is as same as that in EditTable by default.
sortable boolean true Indicate if this column supports sorting
frozen boolean false Indicate if this column is frozen
hidden boolean false Indicate if this column is hidden by default
resizable boolean true Indicate if this column supports adjusting its width through mouse
  • Available options for attribute editType :

    • cawText :

      • trim : Indicate if the blank space ahead or behind the words input should be removed. Default as false.

      • upperCase : Indicate if the words input should be turned into uppercase. Default as false.

      • maxLength : Define the max length of words input.

      • mask : Define the validation rule of words input. (e.g. mask="alias(email)")

        • <caw:tableColumn columnName="email" edittype="cawText" mask="alias(email)"/>
          
    • cawLookup:

      • multiSelect : Indicate if multiple select is supported in Lookup Dialog. Default as false.
      • lookupType : Define the Lookup Type of this column. Corresponds to stsearch.xml.
      • allowAnyValue : Indicate if the input value will NOT be validated in this column. Default as false.(Define the column as cawText with Lookup function if set as true)
      • showCode : Indicate if to show the code of Lookup when the cell is not on focus. Default as true. (description of Lookup will be shown if it's set as false)
    • cawMemo :

      • readonly|editable : Indicate if the content in the memo is read-only / editable.
    • cawNum :

      • length : Define the width of numeric (including decimal)
      • decimal : Define the decimal places of numeric
      • max : Define the maximum value allowed to input
      • min : Define the minimum value allowed to input
    • cawButton :

      • showValueAsTitle : Indicate if showing the title of this button as the value of column. This column should be a real column in SqlTable. Default as false.
      • useBtnClass : Indicate if "Sharp Corner" should be shown in the button when it is clicked. Default as true.
    • cawCheckbox :

      • allowSelectAll : Indicate if the checkbox which controls the whole column of checkbox should be shown in the column title. Default as false.
    • cawLabel:

    • cawHtml:

    • cawDate:

    • cawTime:

      • showSeconds : Indicate if "seconds" should be shown. Default as true.
    • cawMess:

    • cawSelect :

      • selectType :
        • input\mess\lookup;
        • If selectType = "input", InputSelectInfo should be provided.
        • If selectType = "mess", it will search messcode automatically.
        • If selectType = "lookup", it will search Pattern automatically.
    • cawTreeCombo :

      • treeOption : Corresponds to the combo data in TreeComboData type.
    • cawCombo :

      • comboOption : Corresponds to the List data in OptionItem type (or use pattern attribute).
      • showBlankOption : Indicate if blank option “--” should shown. Default as false.
      • keepInvalid : Indicate if this combo keeps the option of component value while this value is not available in predefined options. Default as false.
    • cawFile:

    • cawPhoto:

    • cawColor:

# Interfaces

  • TableActionListener
    • Unlimited Listener are supported. The execution order is in the order of adding the Listener.
  • beforeAction(TableAction action)
    • Function executed before Table Action
  • afterAction(TableAction action)
    • Function executed after Table Action
  • afterDupCol(String tableName, int orgIndex, int tarIndex, String columnName)
    • Function executed after copying column
  • beforeBatchUpdate(String tableName, int rowIndex, List<UpdateColumn> columnList)
    • Function executed before batch update columns
  • afterBatchUpdate(String tableName, int rowIndex, List<UpdateColumn> columnList)
    • Function executed after batch update columns
  • isCellEditable(String tableName, int rowIndex, String columnName)
    • Indicate if specific cell is editable or not
  • isShowLookupIcon(String tableName, int rowIndex, String columnName)
    • Indicate if the icon of Lookup should be shown
  • isActionEnable(String tableName, int rowIndex, String columnName, String action)
    • Indicate if column "Action" should be shown in the EditTable
  • isCellVisible(String tableName, String columnName)
    • Indicate if specific column should be shown
  • isCellRequired(String tableName, String columnName)
    • Indicate if specific column is compulsory
  • getCellStyle(String tableName, int rowIndex, String columnName)
    • Return the UDF html style of specific cell
  • getCellStyleClass(String tableName, int rowIndex, String columnName)
    • Return the UDF css style of specific cell
  • getRowStyleClass(String tableName, int rowIndex)
    • Return the UDF css style of specific row
  • getRowStyle(String tableName, int rowIndex)
    • Return the UDF html style of specific row
  • getLookupSearchType(String tableName, int rowIndex, String columnName)
    • Used to search the UDF Lookup configuration in Lookup Dialog
  • getLookupType(String tableName, int rowIndex, String columnName)
    • Used to set the UDF Lookup Type for Lookup field
  • getComboOption(String tableName, int rowIndex, String columnName)
    • Used to set the UDF options for Combo field
  • getNumberDecimal(String tableName, int rowIndex, String columnName)
    • Used to set the UDF decimal places for numeric field
  • getTreeOption(String tableName, int rowIndex, String columnName)
    • Used to set the UDF options for Treefield
  • getInputSelectInfo(String tableName, int rowIndex, String columnName)
    • Used to set the UDF InputSelectInfo for the cawSelect field which set selectType="input"
  • assignedLookupData(String tableName, int tarIndex, SqlTable lookupResult, int rowIndex)
    • Used to assign the selected data in Lookup dialog

# Hot Key

  • Ctrl + I : add row
  • Ctrl + K : delete row
  • Ctrl + ↑ : last EditTable
  • Ctrl + ↓ : next EditTable
  • Ctrl + Shift + E : export Excel
  • Ctrl + Shift + F : auto fit
  • Ctrl + Shift + S : Table format Setting
  • Page Up : turn previous page (available in paging mode)
  • Page Down : turn next page (available in paging mode)