1. Home
  2. Docs
  3. Accordion Tables
  4. The JSON table structure

The JSON table structure

Data for the accordion table must be created in a specific JSON format. This structure should describe the table, column headers, rows and cells, custom CSS classes to apply to each object, as well as any scripts to trigger or child tables.

Table

The table is the base JSON object. A table has two properties, headers and rows, which would be an array of header and row objects.

{
"headers": [...],
"rows": [...]
}

Header

Headers are simple JSON objects with a value and alignment property. There should be one header for each column you wish to display. The value may be an empty string if you do not wish to show text at the column header.

{
"value": "My Column Header",
"align": "right"
}
PropertyDescriptiontypeValid ValuesRequired
valueThe column header to displayStringAny valid string valueYes
alignThe horizontal alignment of values in the column. This will be applied to all rows in the column. Defaults to “left” if not set.Stringleft, right, centerNo

Row

Rows are JSON objects which contain the necessary information to make one row in a table. They may also have a childTable object, which would be another table to display as an expandable accordion value.

{
  "childTable": {...},
  "class": "someCustomClass",
  "data": [...]
}
PropertyDescriptiontypeValid ValuesRequired
dataAn array of table cells. You must have one cell for each column header, even if the cell is empty.ArrayA table cell JSON objectYes
childTableA sub-table to expand the row with as part of the accordion functionality.ObjectA Table JSON objectNo
classA custom CSS class to apply to the rowStringa valid CSS class nameNo

Cell

An individual table cell. These should be put into Row objects as an array of data in the “data” property. These can fire FileMaker scripts when the user clicks them.

{
  "class": "web-link",
  "parameter": "Acme.com",
  "script": "myTestScript",
  "value": "Acme.com"
}
PropertyDescriptiontypeValid ValuesRequired
valueThe text value to display in the cellStringAny string, including an empty stringYes
classA custom CSS class to apply to the CellStringa valid CSS class nameNo
scriptThe name of a FileMaker script to call when the cell is clickedStringA name of a FileMaker scriptNo
parameterA script parameter to pass when calling the FileMaker script set with the “script” propertyStringAny string valueNo

Articles

Was this article helpful to you? Yes No

How can we help?