Interface IFieldAdvancedTable

Manages an advanced table field. The advanced table field is used to create a table on a form. The table is dynamic and allows to display different types of data. It is typically used to display process history, to define sub-items of the current item, or for spreadsheet calculations on a form.

Inherits core field functionality from Field, including:

get or set the value of the field (Field.value value
set common field properties (Field.readOnly readOnly, Field.hidden hidden, Field.required required, Field.title title, Field.description description)
define an event Field.onChange onChange that is triggered whenever the field value changes.

Example

const { myTable } = tisa.form.field;

// get the table value as JSON string
const tableValue = myTable.value;
console.log(tableValue);

// set the table value as JSON string
myTable.value = JSON.stringify([{ Cells: ["value1", "value2", "value3"] }, { Cells: ["value4", "value5", "value6"] }]);

interface IFieldAdvancedTable {
    columns: IFieldAdvancedTableColumn[];
    description: string;
    hidden: boolean;
    internalName: string;
    originalValue: any;
    page: number;
    pageCount: number;
    readOnly: boolean;
    required: boolean;
    rowCount: number;
    rows: IFieldAdvancedTableRow[];
    title: string;
    typeAsString: FieldType;
    value: any;
    addRow(values?: Record<string, any>): IFieldAdvancedTableRow;
    cell(rowIx: number, columnInternalName: string): IFieldAdvancedTableCell;
    insertRow(rowIx: number, values?: Record<string, any>): IFieldAdvancedTableRow;
    onCellChanged(func: OnCellChangedCallback): void;
    onChange(func: OnFieldChangeCallback): void;
    onPageChanged(func: OnPageChangedCallback): void;
    onRowAdded(func: OnRowAddedCallback): void;
    onRowDeleting(func: OnRowDeletingCallback): boolean | void;
    setValue(value: any, disableTriggerOnChange?: boolean): Promise<void>;
}

Hierarchy

IFieldService
- IFieldAdvancedTable

Properties

`Readonly`columns

columns: IFieldAdvancedTableColumn[]

Gets the table's columns definition.

Example

const columnsDefinition = myTable.columns
console.log("Current columns definition:", columnsDefinition)

description

description: string

Gets or sets the description of the field. The description is displayed below the input. If set, it overrides the default description coming from SharePoint. Supports resource keys with the RESX. prefix (e.g. "RESX.MyFieldDescription"). The key is resolved from the form's Resources translation table.

Example

const { form } = tisa;
const { myField } = tisa.form.field;
myField.description = "My Field Description";
myField.description = "RESX.MyFieldDescription"; // resolved from Resources

hidden

hidden: boolean

Gets or sets whether the field is hidden.

`Readonly`internalName

internalName: string

Gets the internal name that is used for the field.

`Readonly`originalValue

originalValue: any

Gets original field value before any changes. This value is not updated when the field value is changed.

Example

const { form } = tisa;
const { myField } = tisa.form.field;
console.log(myField.originalValue);

page

page: number

Gets or sets the current table page.

Example

if(myTable.page === 5) {
  console.log("Redirecting from page 5 to page 1...")
  myTable.page = 1
}

`Readonly`pageCount

pageCount: number

Gets the number of pages.

Example

const pageCount = myTable.pageCount
console.log(`This table has ${pageCount} pages`)

readOnly

readOnly: boolean

Gets or sets whether the field is read-only.

required

required: boolean

Gets or sets whether the field requires a value.

`Readonly`rowCount

rowCount: number

Gets the number of rows.

Example

const rowCount = myTable.rowCount
if(rowCount > 25) console.log("Thats a lot of rows!")

`Readonly`rows

rows: IFieldAdvancedTableRow[]

Gets table rows as an array of FieldAdvancedTableRow

Example

const rows = myTable.rows
const lastRow = rows.at(-1)
console.log(`Last row is at index: ${lastRow.index}`)

title

title: string

Gets or sets the title (label) of the field. The title is displayed in the field header. If set, it overrides the default title coming from SharePoint. Supports resource keys with the RESX. prefix (e.g. "RESX.MyFieldTitle"). The key is resolved from the form's Resources translation table.

Example

const { form } = tisa;
const { myField } = tisa.form.field;
myField.title = "My Field";
myField.title = "RESX.MyFieldTitle"; // resolved from Resources

`Readonly`typeAsString

typeAsString: FieldType

Gets the type of the field.

Generics:

Text
Note
Number
Integer
FieldChoice Choice
Boolean
Currency
URL
FieldUser User
FieldUser UserMulti
Computed
Counter

Customized:

FieldAdvancedChoice AdvancedChoice
FieldAdvancedTable AdvancedTable
FieldAttachment Attachment
FieldCountedColumn CountedColumn
FieldExternalLookup ExternalLookup

Example

const { form } = tisa;
const { myField } = tisa.form.field;
console.log(myField.typeAsString);

value

value: any

Gets or sets the field value.

Methods

addRow

addRow(values?: Record<string, any>): IFieldAdvancedTableRow
Appends new row at the end of the table.
Parameters
- Optionalvalues: Record<string, any>
  cell values
Returns IFieldAdvancedTableRow
instance of the newly created row
Example
```
const newRow = myTable.addRow({ "department": "Finance" })
console.log("New row has been added to the table")
```

cell

cell(rowIx: number, columnInternalName: string): IFieldAdvancedTableCell
Parameters
- rowIx: number
  cell's row index.
- columnInternalName: string
  cell's column identifier.
Returns IFieldAdvancedTableCell
instance of the table's cell.
Example
```
const myCell = myTable.cell(0, "department")
myCell.value = "Finance"
```

insertRow

insertRow(rowIx: number, values?: Record<string, any>): IFieldAdvancedTableRow
Inserts new row at an index.
Parameters
- rowIx: number
  index position at which the row should be inserted at.
- Optionalvalues: Record<string, any>
  cell values
Returns IFieldAdvancedTableRow
instance of the newly created row
Example
```
const newRow = myTable.insertRow(7, { "department": "Finance" })
console.log(`New row has been added at index: ${newRow.index}`)
```

onCellChanged

onCellChanged(func: OnCellChangedCallback): void

Registers an event that gets called when a cell value changes.

Parameters

func: OnCellChangedCallback
the callback that gets called.

Returns void

Example

const { myTable } = tisa.form.field;

myTable.onCellChanged((value, { oldValue, row, cell }) => {
  console.log(`Cell [${row.index}, ${cell.columnInternalName}] changes it's value from: ${oldValue} → ${value}`);

  // Example: when division changes, clear the department in the same row
  if (columnInternalName === "division") {
    row.cell("department").value = null;
  }
});

onChange

onChange(func: OnFieldChangeCallback): void
Subscribes to field value changes.
Parameters
- func: OnFieldChangeCallback
  callback invoked when the value changes
Returns void
Inherited from IFieldService.onChange

onPageChanged

onPageChanged(func: OnPageChangedCallback): void
Registers an event that gets called after the table's page changes.
Parameters
- func: OnPageChangedCallback
  the callback that gets called.
Returns void
Example
```
const { myTable } = tisa.form.field;

myTable.onPageChanged((page, { oldPage }) => {
  console.log(`Page has changed from ${oldPage} -> ${page}`);
});
```

onRowAdded

onRowAdded(func: OnRowAddedCallback): void

Registers an event that gets called when a row is added.

Parameters

func: OnRowAddedCallback
the callback that gets called.

Returns void

Example

const { myTable } = tisa.form.field;

myTable.onRowAdded((row) => {
  console.log(`New row has been added at index [${row.index}].`);
  // set default value
  row.cell("division").value = form.field.s_defaultDivision.value;
});

onRowDeleting

onRowDeleting(func: OnRowDeletingCallback): boolean | void

Registers an event that gets called before a row is deleted.

Parameters

func: OnRowDeletingCallback
the callback that gets called.

Returns boolean | void

true when the action should be aborted.

Example

const { myTable } = tisa.form.field;

myTable.onRowDeleting((row) => {
  console.log(`Row at index [${row.index}] is about to be deleted.`);
  const deletionConfirmed = confirm("Are you sure you want to delete this item?")
  return !deletionConfirmed
});

setValue

setValue(value: any, disableTriggerOnChange?: boolean): Promise<void>
Sets a field value and waits for the value to be evaluated or rendered in the UI. Also allows disabling the onChange event trigger.
Parameters
- value: any
  the value to set
- OptionaldisableTriggerOnChange: boolean
  when true, the onChange event is not raised
Returns Promise<void>
Inherited from IFieldService.setValue

Interface IFieldAdvancedTable

Example

Hierarchy

Index

Properties

Methods

Properties

Readonlycolumns

Example

description

Example

hidden

ReadonlyinternalName

ReadonlyoriginalValue

Example

page

Example

ReadonlypageCount

Example

readOnly

required

ReadonlyrowCount

Example

Readonlyrows

Example

title

Example

ReadonlytypeAsString

Generics:

Customized:

Example

value

Methods

addRow

Parameters

Returns IFieldAdvancedTableRow

Example

cell

Parameters

Returns IFieldAdvancedTableCell

Example

insertRow

Parameters

Returns IFieldAdvancedTableRow

Example

onCellChanged

Parameters

Returns void

Example

onChange

Parameters

Returns void

onPageChanged

Parameters

Returns void

Example

onRowAdded

Parameters

Returns void

Example

onRowDeleting

Parameters

Returns boolean | void

Example

setValue

Parameters

Returns Promise<void>

Settings

On This Page

`Readonly`columns

`Readonly`internalName

`Readonly`originalValue

`Readonly`pageCount

`Readonly`rowCount

`Readonly`rows

`Readonly`typeAsString