Methods

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

Parent

CoachView

Helpers

bpmext.log
bpmext.number
bpmext.text
bpmext.ui
bpmext.ui.View
bpmext.ui.util
Table
Allows you to create a table using other views such as Text, Decimal, and Display text.
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 views over the table when no height is specified. For example, show a Date Time Picker view over the table. If this option is not selected, the Date Time Picker is embedded in the table cell. Boolean
Style header and footer: Apply a different header and footer style. Modern, for example, streamlines pagination in the header and footer.
{Default | Modern}		 TableHFStyle
Behavior
Selection mode: How many rows a user can select.
{None | Single | Multiple}		 TableSelectionMode
Allow rows to expand: Allow rows to expand to display additional information. Boolean
Render expanded row as: Choose how the content is rendered. For Custom, add HTML code to provide content for the row. The default rendering type is Coach View.
{Coach View | Custom}		 TableRowRenderType
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 views 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
Resize columns: Allows the user to resize columns by dragging the column separators. Boolean
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 Expandable Row Loaded:
Description: Controls: Table, Service Data Table. This event fires when an expandable row loads. In order to make use of this event, you must enable allow expandable rows config option.
Example when the row is rendered as Coach View: row.views.forEach(function(view) { switch(view.context.viewid) { case "Text1": view.setData(row.data[varName]); break; case "Text2": view.setData(row.data[varName]); break; } }); Example when the row is rendered as Custom: var div = document.createElement("div"); div.innerHTML = row.data[varName] + " " + row.data[varName]; return div;
Context Variables row {object}
Properties data
index
td
tr
views
On Row Expanded:
Description: Triggers when the row expands.
Example: 
${Service_Call1}.execute();
On Row Collapsed:
Description: Triggers when the control collapses.
Example: alert("Collapsed row has index " + row.index);
On Row Selected:
Description: Controls: Table, Service Data Table. This event fires whenever a row is selected by the user.
Example: alert("Selected row has index " + row.recordIndex);
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 Row Added:
Description: Controls: Table only. This event is called when a row is being added by the user through the Add Row button. If it returns a JavaScript object, then the object is added , otherwise an empty object is added.
Example: alert("New row will be added");
On Row Deleted:
Description: Controls: Table only. This event is fired when the user asks to delete a row. If the event returns false the row 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 unsuccessfully.
Example: alert("AJAX service has returned with an error");
On Sorting by Column Header:
Description: Controls: Table, Service Data Table. Activated when the user clicks the sort icon in a table column header. Return false to use the custom sorting and skip the default table sorting. You can use this event to set me.context.binding.set("value", myCustomSortedList) to a custom sorted list.
Example: alert("Sorting " + col + " column in " + order + " order"); me.context.binding.set("value", myCustomSortedList); return false;
Context Variables col {String} order {String}
On Page Sizer Change:
Description: Controls: Table, Service Data Table. Activated when the user changes the value for the per page input field.
Example: me.showPager(true);
Context Variables newSize {Integer} oldSize {Integer}
On Column Dropped:
Description: Controls: Table only. Activated when the user drags and drops a column.
Example: alert("Column dropped");
On Column Resize:
Description: Controls: Table only. Activated when the user resizes a column.
Example: alert("Column resized");
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 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
getHeaderFooterStyle() Returns: {string}
Gets the current header foot style for the table
getHelpText() Returns: {string}
Get help text associated with Table control
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
getQueryData() Returns: {any}
Gets the input for the AJAX Data Service. Service Data Tables only.
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(record, asInTable) Returns: {integer}
Returns the record at the specific index
NameTypeDefaultDescription
record{Object}The record to look for
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(recIdx, 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
recIdx{integer}The index of the record
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[]}
Return a list of selected records, if any
NameTypeDefaultDescription
asInTable{boolean}If true, it returns the selected records, if any, from the set of records that are not filtered out from the table. If false or omitted, it returns the selected records, if any, regardless of the table filtering. Records returned with "asInTable" take sorting and filtering into account, but do not depend on the table paging.
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();
hideColumns(columns)
Hides the specified columns. For example [1,3,4] will hide the first, third and fourth columns.
NameTypeDefaultDescription
columns{integer[]}List of columns to 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);
refresh(fetchNewData)
Refreshes the table, takes in a parameter indicating whether to fetch new data from the service.
NameTypeDefaultDescription
fetchNewData{boolean}(Optional) Set true or false whether new data load on refresh
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
setColumnLabel(index, label)
Changes the label of the specified columns. For example setColumnLabel(1, "Name") will change the label of the first column to "Name". Note: If the "selectionMode" of the table changes after this method is called, the header changes will be reverted and will need to be re-applied.
NameTypeDefaultDescription
index{integer}Index of the column to change the label.
label{string}The new label.
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, css: "", dataElementName: "str1", type: "Text", label: "Str1", showLabel: true, rearrangeColumn: true, columnOrder: 1, required: true},
{width: "25%", visibility: true, sortable: true, css: "", dataElementName: "int1", type: "Integer", label: "Int1", showLabel: false, rearrangeColumn: false, columnOrder: 0, required: true},
{width: "25%", visibility: true, sortable: true, css: "", dataElementName: "dec1", type: "Decimal", label: "Dec1", showLabel: true, rearrangeColumn: true, columnOrder: 3, options:{decimalPlaces: 2, prefix: "$", thousandSeparator: ","}},
{width: "30%", visibility: true, sortable: false, css: "", dataElementName: "date1", type: "Date", label: "Date1", showLabel: true, rearrangeColumn: false, columnOrder: 2, options:{datePattern: "yyyy-MM"}},
];

table1.setColumns(columnSpecs);
table1.refresh();
setDefaultPageSize(defaultPageSize)
Sets the default page size range
NameTypeDefaultDescription
defaultPageSize{integer}the default page size
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
setHeaderFooterStyle(style)
Sets the header foot style for the table
NameTypeDefaultDescription
style{string Modern|Default}Style option for the header and footer style
setHeadersVisibility(boolList, collapseHeader)
Sets the visibility of the table headers based on the boolList argument passed
NameTypeDefaultDescription
boolList{boolean[]}List of booleans that corresponds to the table columns
collapseHeader{boolean}Set to true to collapse the thead element. Applies only when all the columns are hidden.
setHelpText(helptext)
Set help text for Table control
NameTypeDefaultDescription
helptext{string}Help text for the control
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
setPageSizeRange(minSize, maxSize)
Sets the page size range
NameTypeDefaultDescription
minSize{integer}the minimum page size
maxSize{integer}the maximum page size
setQueryData(data)
Sets the input for the AJAX Data Service. Service Data Tables only
NameTypeDefaultDescription
data{any}set the query data
setRecordSelected(record, selected, asInTable)
Select or clear the record
NameTypeDefaultDescription
record{integer|object}the index of the record to be removed, or the record object itself
selected{boolean}Indicates whether to select or clear the record
asInTable{boolean}If true, it sets the selected record status at the sorted and/or filtered index position. If false or omitted, it sets the selected record status 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 setViewData(data, createPseudoBinding)
Set/update bound data associated this view/control. Only works for views/controls with bound data.

Note: Should only be used with simple type bindings, or complex type bindings with simple type properties.
Should not be used with bindings that have properties that are lists or compext types. For complex types, set bindings using
the binding.set pattern detailed in the Knowlege Center section Binding Data and Configuration Options
NameTypeDefaultDescription
data{Object}Value of bound data. The type of this parameter must match the type of the bound data.
createPseudoBinding{boolean}If set to true, creates a pseudo binding if there is no current binding.
Example
MyView.setViewData("TEST"); //Updates bound data to the string 'TEST'
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();
showColumns(columns)
Shows the specified columns (if they were previously hidden). For example [1,3,4] will show the first, third and fourth columns.
NameTypeDefaultDescription
columns{integer[]}List of columns to show.
showPager(show)
Shows or hides the pager(pagination) at the bottom of the table
NameTypeDefaultDescription
show{boolean}Value to show/hide the pager
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();