Methods

addClass
appendElement
appendElements
clear
clearSearch
clearSort
getColorStyle
getColumns
getFilteredRecords
getHighlightSelection
getMaxPageIndex
getPageIndex
getPageSize
getRecord
getRecordCount
getRecordIndex
getRecordOnPage
getRecords
getRecordsOnPage
getRowForView
getSelectedIndex
getSelectedIndices
getSelectedRecord
getSelectedRecordCount
getSelectedRecords
getTableStyle
getTitle
getType
getWidth
hide
isBound
isEnabled
isLabelVisible
isRecordSelected
isVisible
propagateUpValueChange
removeRecord
search
setAllRecordsSelected
setColorStyle
setColumns
setEnabled
setHeadersVisibility
setHighlightSelection
setLabelVisible
setPageIndex
setPageSize
setRecordSelected
setSortCriteria
setTableStyle
setTitle
setVisible
setWidth
show
sort
triggerFormulaUpdates

Parent

CoachView

Helpers

bpmext.log
bpmext.number
bpmext.text
bpmext.ui
bpmext.ui.View
bpmext.ui.util
Table
The Table control allows you to create a table using other controls such as Text, Decimal, Output Text, etc.
null
Columns: Specifications of the columns (Render As, Visibility, Sortable, Options, CSS, Width, Label) TableColumn[]
Appearance
Table style: The table style
{Default | Elegant | Bordered | Striped | Hover Row | Condensed}		 TableStyle
Color style: Color style of the table
{None | Light | Primary | Info | Success | Warning | Danger}		 TableColorStyle
Highlight selection: Shade selected rows. A Color Style other than None must be specified. Boolean
Width: The width in px, % or em.\r\nFor example\: 50px, 20%, 0.4em. If no unit is specified, px is assumed. String
Height: The height of the table in px, %, em. The header or footer are not included.\r\nFor example\: 50px, 20%, 0.4em. If no unit is specified, px is assumed. String
Wrap column headers: Allow column headers to wrap Boolean
Show pop-ups: Show pop-up menus and controls over the table when no height is specified. For example, show a Date Time Picker control over the table. If this option is not selected, the Date Time Picker is embedded in the table cell. Boolean
Behavior
Selection mode: How many rows a user can select.
{None | Single | Multiple}		 TableSelectionMode
Show Delete button: Show or hide the button to delete a row. Boolean
Show footer: Show or hide the footer. The footer is also displayed if any of footer controls are enabled such as Show add button. Boolean
Show Add button: Show or hide the button to add a row. If the table is sorting or filtering, the newly added row might not be displayed properly until sorting or filtering is cleared. Boolean
Show table stats: Enables the display of table stats in the footer. For example, Showing 1 to 5 of 59 entries Boolean
Show pager: Show or hide the number of pages. The number is displayed in the footer. Boolean
Show page sizer: Show or hide the page sizer which displays the number of rows on a page. Boolean
Initial page size: The number of rows displayed on a page. Integer
Performance
Async loading: Provides a better UI experience for large data sets (at the expense of slower overall row-loading time once the section starts loading). Boolean
Async batch size: The number of rows that loaded synchronously in an asynchronous batch. This can help tune or optimize synchronous vs. asynchronous loading performance. Integer
Events
On Load:
Description: Controls: Table, Service Data Table. This event is triggered when the table is loaded.
Example: me.setPageIndex(0);
On Custom Cell:
Description: Controls: Table, Service Data Table. This event fires whenever a cell loads with custom rendering options. In order to make use of this event, you must set the Render as configuration value to Custom in Columns.
Example: var div = document.createElement("div"); div.innerHTML = cell.row.data[cell.varName]; return div;
Context Variables cell {object}
Properties colIndex
controlType
parentNode
row {data, index}
varName
On Rows Loaded:
Description: Controls: Table, Service Data Table. This event is applicable only for paged tables, it fires when rows are displayed.
Example: alert("All rows have " + (all ? "" : "NOT") + " been loaded");
Context Variables all {boolean}
On Row Selected by User:
Description: Controls: Table, Service Data Table. This event fires whenever a row is selected by the user
Example: alert("Selected row has index " + row.index);
Context Variables row {object}
Properties index
data (object containing the table row data properties)
On All Rows Selected:
Description: Controls: Table, Service Data Table. This event fires whenever all rows in a table are selected or all rows are deselected
Example: alert("All rows selected: " + all);
Context Variables all {boolean} True if all rows selected, false if all rows deselected
On Deleting Record:
Description: Controls: Table, Service Data Table. This event is fired when the asks to delete a record. If the event returns false the record will not be deleted
Example: return confirm("Are you sure you want to delete item " + item.str1);
Context Variables item {object}
Properties table row data properties
On Service Data Loaded:
Description: Controls: Service Data Table only. This event is triggered when AJAX service supplying the table data completes successfully.
Example: alert("AJAX service has returned with data");
On Service Data Error:
Description: Controls: Service Data Table only. This event is triggered when AJAX service supplying the table data completes sunuccessfully.
Example: alert("AJAX service has returned with an error");
Extends:
com.ibm.bpm.coach.CoachView
Methods:
Inherited addClass(name, [replaced])
Add/replace CSS class(es) for this control
NameTypeDefaultDescription
name{string}CSS class name(s) to add to the control. Separate class names by a space if more than one class.
replaced{string}CSS class name(s) to be replaced by the first argument. Separate class names by a space if more than one class.
Example
Button.addClass("green");
appendElement(obj)
Adds the specified element to the table -- appendRecord() and add() are aliases to this method.
NameTypeDefaultDescription
obj{object}The element to be added
Examples
${Table}.appendElement({}); //to create a new empty row
${Table}.appendElement({"str1":"strVal", "int1": 3}); //new row with data
appendElements(objs)
Adds the specified elements/records to the table -- appendRecords() and addAll() are aliases to this method. Because adding an element causes the table to re-render, use this method for better performance while adding multiple records instead of repeatedly calling appendElement()
NameTypeDefaultDescription
objs{object[]}The element/record to be added
Example
${Table}.appendElements([{"str1":"strVal", "int1": 3}, {"str1":"strVal2", "int1": 4}]); //new row with data
clear()
Clear the records from this table (leaves it empty but the column headers remain)
clearSearch()
Clears the search filter and reloads the table
clearSort()
Clears the sort and redisplays the table
getColorStyle() Returns: {string}
Gets color style of table. NOTE: This always returns the color as set, to avoid ambiguity always set the color using "D"|"L"|"P"|"I"|"S"|"W"|"G"
getColumns() Returns: {object}
Gets column specifications for the Service Data Table
getFilteredRecords(col, exp, caseInsensitive, [useRegex]) Returns: {Object[]}
Returns the records matching the search parameters. This methods does not modify the table and is not affected by a table's existing filtering or sorting
NameTypeDefaultDescription
col{any}When the type is "number" this is the column to be searched or null for all columns. When type is "string" this is the property name in the table to be searched. When the type is "function" this is the comparator function to use for the search. Note that when the type is function, the other parameters are ignored.
exp{string}regular expression or string to use for the search depending on useRegex
caseInsensitive{boolean}whether the search should be case insensitive
useRegex{boolean}whether or not to use the regular expression set
getHighlightSelection()
This returns whether a row is highlighted when selected. Not in Service Data Tables
getMaxPageIndex() Returns: {integer}
Get the maximum page index
getPageIndex() Returns: {integer}
Returns the page index
getPageSize(index, actual) Returns: {integer}
Returns the page size
NameTypeDefaultDescription
index{integer}(Optional) Index of page - if null, uses the current page
actual{boolean}If true, gets the actual page size (i.e. number of rows on the page) instead of the configured page size
getRecord(index, asInTable) Returns: {Object}
Returns the record at the specific index
NameTypeDefaultDescription
index{integer}0-based index/position of record
asInTable{boolean}If true, returns record as sorted and/or filtered in the table, if false or omitted returns the record unfiltered and according to the original order. Record indices with "asInTable" take sorting and filtering into account but are independent of whether the table is paging or not.
getRecordCount(asInTable) Returns: {integer}
Returns the number of records in the table
NameTypeDefaultDescription
asInTable{boolean}If true, returns count of records filtered by search, if false or omitted returns the unfiltered record count. Record counts ith "asInTable" take sorting and filtering into account but are independent of whether the table is paging or not.
getRecordIndex(null, asInTable) Returns: {integer}
Returns the record at the specific index
NameTypeDefaultDescription
{Object}record
asInTable{boolean}If true, returns the index of the record as sorted and/or filtered in the table, if false or omitted returns the index of the record unfiltered and according to the original order. Record indices with "asInTable" take sorting and filtering into account but are independent of whether the table is paging or not.
getRecordOnPage(null, pageIdx) Returns: {Object}
Returns the record at the index and page specified - respecting the sorting and filtering that may be active on the table.
NameTypeDefaultDescription
{integer}recIdx
pageIdx{integer}(Optional) If not specified, assumes current page
getRecords(asInTable) Returns: {Object[]}
Returns the record at the specific index
NameTypeDefaultDescription
asInTable{boolean}If true, returns records as sorted and/or filtered in the table, if false or omitted returns the records unfiltered and according to the original order. Record indices with "asInTable" take sorting and filtering into account but are independent of whether the table is paging or not.
getRecordsOnPage(pageIdx) Returns: {Object[]}
Returns the records at page index specified - respecting the sorting and filtering that may be active on the table.
NameTypeDefaultDescription
pageIdx{integer}(Optional) If not specified, assumes current page
getRowForView(v) Returns: {Row}
getRow is an alias for this method. Gets the row containing the specified child view. The row object can be used to retrieve data associated with the row [using .getData()], or any view instance on the row [using .getView()].
NameTypeDefaultDescription
v{object}A view instance in the table (in one of the table cells)
getSelectedIndex(asInTable) Returns: {integer}
Returns the selected record (if any)
NameTypeDefaultDescription
asInTable{boolean}If true, returns the index of the selected record based on the current filtering and sort order of the table. If false or omitted returns the index of the selected record regardless of table filtering and based on the natural/original order of the records. Record indices with "asInTable" take sorting and filtering into account but are independent of whether the table is paging or not.
getSelectedIndices(asInTable) Returns: {integer[]}
Returns the selected records (if any) - Note that the indices array may not always be sorted in ascending order of indices
NameTypeDefaultDescription
asInTable{boolean}If true, returns the indices of the selected records based on the current filtering and sort order of the table. If false or omitted returns the index of the selected records regardless of table filtering and based on the natural/original order of the records. Record indices with "asInTable" take sorting and filtering into account but are independent of whether the table is paging or not.
getSelectedRecord(asInTable) Returns: {Object}
Returns the selected record (if any)
NameTypeDefaultDescription
asInTable{boolean}If true, returns the selected record (if any) from the records not filtered out in the table. If false or omitted returns the selected record (if any) regardless of table filtering. Records returned with "asInTable" take sorting and filtering into account but are independent of whether the table is paging or not.
getSelectedRecordCount(asInTable) Returns: {integer}
Returns the selected record (if any)
NameTypeDefaultDescription
asInTable{boolean}If true, returns the count of selected records from the records not filtered out in the table. If false or omitted returns the count of selected record regardless of table filtering. Record counts with "asInTable" take sorting and filtering into account but are independent of whether the table is paging or not.
getSelectedRecords(asInTable) Returns: {Object[]}
Returns the selected record (if any)
NameTypeDefaultDescription
asInTable{boolean}If true, returns the selected records (if any) from the set of records not filtered out in the table. If false or omitted returns the selected records (if any) regardless of table filtering. Records returned with "asInTable" take sorting and filtering into account but are independent of whether the table is paging or not.
getTableStyle()
Gets the table style. NOTE: This always returns the table style as set.
getTitle()
Gets the table title/label
getType() Returns: {string}
Get descriptive string representing the type of control
getWidth() Returns: {string}
Get configured width for section (including unit)
Inherited hide(collapseFlag)
Hide this view/control
NameTypeDefaultDescription
collapseFlag{boolean}Set to true to collapse the view (equivalent to a view setting of "NONE")
Example
MyView.hide();
Inherited isBound() Returns: {boolean}
Indicates bound status of control.
Inherited isEnabled() Returns: {boolean}
Checks if the view is enabled or not
Example
var enabled = MyView.isEnabled();
Inherited isLabelVisible() Returns: {boolean}
Checks if control label is visible
Example
var labelVisible = MyView.isLabelVisible();
isRecordSelected(record, asInTable) Returns: {boolean}
Returns whether a particular record is selected
NameTypeDefaultDescription
record{integer|object}the index of the record to be removed, or the record object itself
asInTable{boolean}(Only used with index) If true, checks the selected status of the record at the sorted and/or filtered index position, if false or omitted checks the selected status of the record at the index according to the original order and regardless of filtering.
Inherited isVisible() Returns: {boolean}
Checks whether or not view is visible
Example
var visible = MyView.isVisible();
Inherited propagateUpValueChange(event) Returns: {boolean}
Propagates value change of control up through parent views
NameTypeDefaultDescription
event{Event}Value change event (usually an onchange event)
Example
MyView.propagateUp(event);
removeRecord(record, asInTable) Returns: {boolean}
Remove the specified table record. Not in Service Data Table
NameTypeDefaultDescription
record{integer|object}the index of the record to be removed, or the record object itself
asInTable{boolean}(Only used with index) If true, removes the record at the sorted and/or filtered index position, if false or omitted removes the record at the index according to the original order. Record indices with "asInTable" take sorting and filtering into account but are independent of whether the table is paging or not.
search(col, exp, caseInsensitive, [useRegex])
Retrieves record according to the specified parameters -- alias to filter() method
NameTypeDefaultDescription
col{any}When the type is "number" this is the column to be searched or null for all columns. When type is "string" this is the property name in the table to be searched. When the type is "function" this is the comparator function to use for the search. Note that when the type is function, the other parameters are ignored.
exp{string}regular expression or string to use for the search depending on useRegex
caseInsensitive{boolean}whether the search should be case insensitive
useRegex{boolean}whether or not to use the regular expression set
Example
me.search(0, "[0-9]", true, true)
setAllRecordsSelected(selected, asInTable)
Selects or unselects records
NameTypeDefaultDescription
selected{boolean}Flag to indicate whether to select or unselect the records
asInTable{boolean}(Only used with index) If true, sets the selected status of the records that are not filtered out, if false or omitted sets the selected status of all records regardless of filtering
setColorStyle(style)
Sets color style of table. NOTE: to avoid ambiguity always set the color using "D"|"L"|P"|"I"|"S"|"W"|"G"
NameTypeDefaultDescription
style{string}"DEFAULT"|"DEF"|"D"=Default | "LIGHT"|"L"=Light | PRIMARY"|"P"=Primary | "INFO"|INF"|"I"=Info | "SUCCESS"|"S"=Success | "WARNING"|"WARN"|"W"=Warning | "ERROR"|"ERR"|"DANGER"|"G"=Danger
setColumns(columnSpecs)
Sets column specifications for the Service Data Table (results in complete table reset if the table had loaded records)
NameTypeDefaultDescription
columnSpecs{object}The specifications for the columns
Example

var table1 = page.ui.get("Table1");
var columnSpecs = [
{width: "20%", visibility: true, sortable: true, cssClass: "", dataElementName: "str1", type: "Text", label: "Str1", showLabel: true},
{width: "25%", visibility: true, sortable: true, cssClass: "", dataElementName: "int1", type: "Integer", label: "Int1", showLabel: false},
{width: "25%", visibility: true, sortable: true, cssClass: "", dataElementName: "dec1", type: "Decimal", label: "Dec1", showLabel: true, options:{decimalPlaces: 2, prefix: "$", thousandSeparator: ","}},
{width: "30%", visibility: true, sortable: false, cssClass: "", dataElementName: "date1", type: "Date", label: "Date1", showLabel: true, options:{datePattern: "yyyy-MM"}},
];

table1.setColumns(columnSpecs);
table1.refresh();
Inherited setEnabled(enabled, required)
Enable/disable this view/control
NameTypeDefaultDescription
enabled{boolean}Enabled/read-only flag (true to enable view, false to disable/make read-only)
required{boolean}Enable/disable required field flag for control
Example
MyView.setEnabled(false); //Make MyView read-only
setHeadersVisibility((boolean[]))
Sets the visibility of the table headers based on the boolList argument passed
NameTypeDefaultDescription
(boolean[])boolList is a list of booleans that corresponds to the table columns
setHighlightSelection(highlight)
This sets whether a row is highlighted when selected. Not in Service Data Tables
NameTypeDefaultDescription
highlight{boolean}Set to true to enable selection highlights
Inherited setLabelVisible(visible)
Show/hide the label of this view/control
NameTypeDefaultDescription
visible{boolean}Label visibility flag (true to show view label, false to hide)
Example
MyView.setLabelVisible(false);
setPageIndex(idx)
Set the page index, 0-based indexing
NameTypeDefaultDescription
idx{integer}the page index
setPageSize(size)
Set the page size, number of rows in a given page
NameTypeDefaultDescription
size{integer}the page size
setRecordSelected(record, selected, asInTable)
Returns whether a particular record is selected
NameTypeDefaultDescription
record{integer|object}the index of the record to be removed, or the record object itself
selected{boolean}Flag to indicate whether to select or unselect the record
asInTable{boolean}(Only used with index) If true, sets the selected status of the record at the sorted and/or filtered index position, if false or omitted sets the selected status of the record at the index according to the original order and regardless of filtering
setSortCriteria(col, [asc], use)
Sets the predefined column sort criteria when sort() is called without parameters
NameTypeDefaultDescription
col{string}the column name
asc{boolean}falseascending order
use{boolean}sort value that was specified at cell render time using cell.setSortValue() instead of simply using the displayed text
setTableStyle(style)
This programmatically sets the table style. NOTE: No error checking.
NameTypeDefaultDescription
style{string}"D"=Default | "E"=Elegant | "B"=table-bordered | "S"=table-striped | "H"=table-hover | "C"=table-condensed
setTitle(null)
Programmatically sets the table title/label in the table's header
NameTypeDefaultDescription
{string}title
Inherited setVisible(visible, collapse)
Show/hide this view/control
NameTypeDefaultDescription
visible{boolean}Visibility flag (true to show view, false to hide)
collapse{boolean}Set to true to collapse the control space when visible is set to false.
Examples
MyView.setVisible(false, false); //Equivalent to MyView.hide()
MyView.setVisible(false, true); // Sets visibility to "None"
setWidth(width)
Set width of table (e.g. 50px, 20%, 2em - omitting the unit assumes px)
NameTypeDefaultDescription
width{string}sets the width
Inherited show()
Show this view/control
Example
MyView.show();
sort(col, [asc], use)
Sort by column and whether it should be in ascending order
NameTypeDefaultDescription
col{string}the column name
asc{boolean}ascending order, default is false
use{boolean}sort value that was specified at cell render time using cell.setSortValue() instead of simply using the displayed text
Inherited triggerFormulaUpdates([phase])
Broadcasts the expression trigger for the specified view
NameTypeDefaultDescription
phase{int}bpmext.ui.PHASE_NORMALThe phase we are currently in
Example
MyView.triggerFormulaUpdates();