ServiceDataTable

Service data table

Allows you to create a repeating table, which can be populated by using a service. It cannot be bound to a variable.

null

Columns: Specifications of the columns (Render As, Visibility, Sortable, Options, CSS, Width, Label) ServiceDataTableColumn[]

Appearance

Table style: The table style used.
{Default | Elegant | Bordered | Striped | Hover Row | Condensed} TableStyle

Color style: The color style of the table.
{None | Light | Primary | Info | Success | Warning | Danger} TableColorStyle

Highlight selection: Shade rows in a selected state. Requires that a Color Style other than None 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: Height of table in px, %, em (not including the header or footer if shown)\r\nFor example\: 50px, 20%, 0.4em. If no unit is specified, px is assumed String

Behavior

Data service: A service that supplies the table data.

Service data: Input data for the data service. It's type should match the input type for the service. ANY

Start empty: Table is initially empty. The table will be populated by having the service run using the refresh method Boolean

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 footer: Show the table footer Boolean

Show table stats: Show table statistics (e.g. "Showing 1 to 5 of 59 entries") Boolean

Show pager: Enable pagination Boolean

Show page sizer: Enable option to choose number of rows to display per page Boolean

Initial page size: Initial maximum number of entries to be shown per 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 are 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 or replace the CSS classes for this view.

Name Type Default Description

name {string} The CSS class names to add to the view. For multiple classes, use space to separate the class names.

replaced {string} The CSS class names to be replaced by the first argument. For multiple classes, use space to separate the class names.

Example

Button.addClass("green");

appendElement(obj)

Adds the specified element to the table -- appendRecord() and add() are aliases to this method.

Name Type Default Description

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()

Name Type Default Description

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

Name Type Default Description

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

Name Type Default Description

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

Name Type Default Description

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

Name Type Default Description

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

Name Type Default Description

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.

Name Type Default Description

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

Name Type Default Description

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.

Name Type Default Description

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()].

Name Type Default Description

v {object} A view instance in the table (in one of the table cells)

getSelectedIndex(asInTable) Returns: {integer}

Returns the selected record (if any)

Name Type Default Description

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

Name Type Default Description

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)

Name Type Default Description

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)

Name Type Default Description

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

Name Type Default Description

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 the view.

Name Type Default Description

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.

Name Type Default Description

columns {integer[]} List of columns to hide.

Inherited isBound() Returns: {boolean}

Indicate the bound status of the view.

Inherited isEnabled() Returns: {boolean}

Check whether the view is enabled.

Example

var enabled = MyView.isEnabled();

Inherited isLabelVisible() Returns: {boolean}

Check whether the view label is visible.

Example

var labelVisible = MyView.isLabelVisible();

isRecordSelected(record, asInTable) Returns: {boolean}

Returns whether a particular record is selected

Name Type Default Description

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}

Check whether the view is visible.

Example

var visible = MyView.isVisible();

Inherited propagateUpValueChange(event) Returns: {boolean}

Propagate the value change of the view up through the parent views.

Name Type Default Description

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.

Name Type Default Description

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

Name Type Default Description

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

Name Type Default Description

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

Name Type Default Description

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"

Name Type Default Description

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.

Name Type Default Description

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)

Name Type Default Description

columnSpecs {object} The specifications for the columns

Example

setDefaultPageSize(defaultPageSize)

Sets the default page size range

Name Type Default Description

defaultPageSize {integer} the default page size

Inherited setEnabled(enabled, required)

Enable or disable the view.

Name Type Default Description

enabled {boolean} Enabled/read-only flag (true to enable view, false to disable/make read-only)

required {boolean} Enable or disable the required field flag for the view.

Example

MyView.setEnabled(false); //Make MyView read-only

setHeaderFooterStyle(style)

Sets the header foot style for the table

Name Type Default Description

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

Name Type Default Description

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

Name Type Default Description

helptext {string} Help text for the control

setHighlightSelection(highlight)

This sets whether a row is highlighted when selected. Not in Service Data Tables

Name Type Default Description

highlight {boolean} Set to true to enable selection highlights

Inherited setLabelVisible(visible)

Show or hide the view label.

Name Type Default Description

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

Name Type Default Description

idx {integer} the page index

setPageSize(size)

Set the page size, number of rows in a given page

Name Type Default Description

size {integer} the page size

setPageSizeRange(minSize, maxSize)

Sets the page size range

Name Type Default Description

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

Name Type Default Description

data {any} set the query data

setRecordSelected(record, selected, asInTable)

Select or clear the record

Name Type Default Description

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

Name Type Default Description

col {string} the column name

asc {boolean} false ascending 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.

Name Type Default Description

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

Name Type Default Description

{string} title

Inherited setViewData(data, createPseudoBinding)

Set or update the bound data associated with the view. It applies only to views with bound data.

Note: It should only be used with simple type bindings, or complex type bindings with simple type properties.
It should not be used with bindings that have properties that are lists or compext types. For complex types, set the bindings by using
the binding.set pattern, as described in the Binding data and configuration options documentation section.

Name Type Default Description

data {Object} The value of the bound data. The parameter type must match the type of the bound data.

createPseudoBinding {boolean} If the value is set to true, the parameter 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 or hide the view.

Name Type Default Description

visible {boolean} Visibility flag (true to show the view, false to hide it)

collapse {boolean} Set it to true to collapse the view space when the option 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)

Name Type Default Description

width {string} sets the width

Inherited show()

Show this view.

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.

Name Type Default Description

columns {integer[]} List of columns to show.

showPager(show)

Shows or hides the pager(pagination) at the bottom of the table

Name Type Default Description

show {boolean} Value to show/hide the pager

sort(col, [asc], use)

Sort by column and whether it should be in ascending order

Name Type Default Description

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])

Broadcast the expression trigger for the specified view.

Name Type Default Description

phase {int} bpmext.ui.PHASE_NORMAL The phase we are currently in

Example

MyView.triggerFormulaUpdates();

Methods

Parent

Helpers