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": [...]
}
| Property | Description | type | valid values | Required |
| headers | An array of Header objects | Array | Header JSON objects | No |
| rows | An array of Row objects | Array | Row JSON objects | No |
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"
}
| Property | Description | type | Valid Values | Required |
| value | The column header to display | String | Any valid string value | Yes |
| align | The horizontal alignment of values in the column. This will be applied to all rows in the column. Defaults to “left” if not set. | String | left, right, center | No |
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": [...]
}
| Property | Description | type | Valid Values | Required |
| data | An array of table cells. You must have one cell for each column header, even if the cell is empty. | Array | A table cell JSON object | Yes |
| childTable | A sub-table to expand the row with as part of the accordion functionality. | Object | A Table JSON object | No |
| class | A custom CSS class to apply to the row | String | a valid CSS class name | No |
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"
}
| Property | Description | type | Valid Values | Required |
| value | The text value to display in the cell | String | Any string, including an empty string | Yes |
| class | A custom CSS class to apply to the Cell | String | a valid CSS class name | No |
| script | The name of a FileMaker script to call when the cell is clicked | String | A name of a FileMaker script | No |
| parameter | A script parameter to pass when calling the FileMaker script set with the “script” property | String | Any string value | No |