1. Overview

The association tile is used to display a single table for an Association. For example, this could be used to display a list of timesheets for a job.

📘
Note:

If you wish to display all Association for an entry (e.g. timesheets, assets, … in tabs), please use the associations tile type item.

Associations only support Table and Kanban at this time; there is no Association view for calendar.

2. Object Properties

The table provides a summary of the object properties associated with the association tile type items, including their types, mandatory or optional status, and descriptions.

Field	Type	Mandatory/Optional	Description
`type`	`string`	Mandatory	Always set to `association`.
`record`	`string`	Mandatory	The internal ID of the record we wish to display this Association for.
`field`	`string`	Mandatory	The internal ID of the field we wish to display this Association for.
`source`	`string`	Mandatory	Either `content` or `layout`. This value is used to determine how we source the “layout” of this Association; either using a saved layout or using the `content` property to dictate the table columns. Note that `content` only supports table Association at this time.
`title`	`string \	false`	Optional
`layout-id`	`number`	Mandatory	The ID of the table layout. This will load the layout to determine columns, default sorting, etc.
`options`	`object`	Optional	An object of Association configuration.
`content`	`array`	Mandatory	An array of objects that tell us which fields to show in a table of Association.

2.1. Breakdown of Object Properties

Options

Options is an object used for configuring how the association tab displays the table for the Association. The table provides an insight into the various object properties of the options:

Field	Type	Mandatory/Optional	Description
`pageSize`	`number`	Optional	One of: 5, 10, 25, 50, 100, 200. If omitted, use the logged-in user’s page size based on user settings. It only applies to tables.
`sortBy`	`object`	Optional	Sort the table view by the option that has been specified.
`filter`	`array`	Optional	A Clevero filter array that will be applied to this Association
`quickfilters`	`array \	false`	Optional
`disableAdd`	`boolean`	Optional	If set to true, the “+ Add” button to add an entry via a modal will be hidden.
`disableQuickAdd`	`boolean`	Optional	If set to true, the “+ Add line” button to add an entry via a table row will be hidden.
`hideIdColumn`	`boolean`	Optional	If set to true, the “ID” column (also referred to as the auto-id column) will be hidden.
`addEntryLayoutId`	`number`	Optional	If set, the given layout will be used when adding a new entry via the add entry modal.

Content

The content array consists of objects that provide instructions for displaying specific fields within a table of Association. Each object within the array defines the attributes and properties of the fields to be showcased. The table provides an insight into the various object properties of the content:

Field	Type	Mandatory/Optional	Description
`type`	`string`	Mandatory	Specifies the object type, indicating that it's related to a field within the table.
`field`	`string`	Mandatory	This parameter should be replaced with the internal ID of the field you want to represent in the table. For instance, if you display the "first name" field, the field value should be set to "first-name".
`width`	`number`	Mandatory	Represents the default column width for the field in pixels. It determines the initial width of the column when the table is initially rendered.
`minWidth`	`number`	Mandatory	Specifies the minimum allowable width for the column in pixels. This value restricts how narrow the user can resize the column. The column's width won't be able to go below this specified value.
`placeholder`	`string`	Mandatory	Specifies the placeholder for a field.
`readonly`	`boolean`	Mandatory	A boolean parameter that, when set to `true`, indicates that users cannot modify the value in the field. In other words, the field is locked and cannot be edited.

📘
Note:
If width is set to a value below minWidth , the minWidth will be the true width of that column. To avoid confusion, always set minWidth (to a number below or equal to the width) when setting width.

The example demonstrates the syntax for content:

{
 "type": "field",
 "field": <field-internal-id>, // e.g. "first-name"
 "width": 200,
 "minWidth": 120,
 "placeholder": "Please fill in...",
 "readonly": true // if true, value can't be modified at all
}

3. Sample Configuration

Here is a simple association sample configuration using a Table or Kanban layout:

{
 "type": "association",
 "record": "employees",
 "field": "owner",
 "source": "layout",
 "layout-id": 123
}

Here is an association sample configuration using a Table or Kanban layout with filters and quickFilters enabled:

{
 "type": "association",
 "title": "Active employees",
 "record": "employees",
 "field": "owner",
 "source": "layout",
 "layout-id": 123,
 "options": {
 "pageSize": 5,
 "filter": [
 {
 "requestType": "i",
 "subject": "inactive",
 "type": "checkbox",
 "operator": "is_false"
 }
 ],
 "quickFilters": [{"fieldId":3515},{"fieldId":349}]
 }
}

Here is an association sample configuration with options enabled:

{
 "type": "association",
 "record": "all-fields",
 "field": "backlog-item",
 "title": false,
 "source": "content",
 "options": {

  "pageSize": 5,
   "sortBy": {
   "id": "autoId",
   "desc": true
   },
   "quickFilters": [
       {
       "fieldId": 859
       }
     ]
   },
   "content": [
       {
       "type": "meta",
       "key": "autoId",
       "label": "ID"
       },
       {
       "type": "field",
       "field": "text",
       "width": 120,
       "minWidth": 120
       },
       {
       "type": "field",
       "field": "address-field",
       "width": 300,
       "minWidth": 120
       },
       {
       "type": "field",
       "field": "checkbox",
       "width": 80,
       "minWidth": 80
       },
       {
       "type": "field",
       "field": "date"
       },
       {
       "type": "field",
       "field": "email"
       }
   ]
}

📌 Need Help?

If you require assistance or encounter any issues, please don't hesitate to contact us for further support.