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)