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 |
ANY type: | Specification of the business object definition type when the view is bound to an ANY type list. {Complex | Simple} |
TableANYType |
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: |
| |||||||||||||||
On Custom Cell: |
| |||||||||||||||
On Rows Loaded: |
| |||||||||||||||
On Expandable Row Loaded: |
| |||||||||||||||
On Row Expanded: |
| |||||||||||||||
On Row Collapsed: |
| |||||||||||||||
On Row Selected: |
| |||||||||||||||
On All Rows Selected: |
| |||||||||||||||
On Row Added: |
| |||||||||||||||
On Row Deleted: |
| |||||||||||||||
On Service Data Loaded: |
| |||||||||||||||
On Service Data Error: |
| |||||||||||||||
On Sorting by Column Header: |
| |||||||||||||||
On Page Sizer Change: |
| |||||||||||||||
On Column Dropped: |
| |||||||||||||||
On Column Resize: |
|
Extends:
Methods:
Inherited
addClass(name, [replaced])
Add/replace CSS class(es) for this control
Name | Type | Default | Description |
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.
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 |
()
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 this view/control
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}
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
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}
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
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 |
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
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
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
Name | Type | Default | Description |
defaultPageSize | {integer} | the default page size |
Inherited
setEnabled(enabled, required)
Enable/disable this view/control
Name | Type | Default | Description |
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 |
(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/hide the label of this view/control
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/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
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 OptionsName | Type | Default | Description |
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
Name | Type | Default | Description |
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)
Name | Type | Default | Description |
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.
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])
Broadcasts 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(); |