Customize Settings
How to customize the JS SDK Field Settings
Field settings configuration inside Joyfill SDK provides a way for you to customize the settings. Settings configurations can target a File, Page, Field, Field Type or Field Identifier.
Targets
File
Use file
key to customize settings for file within the Joyfill SDK.
file: {
metadata: [ MetadataSettingSchema, ... ]
}
Page
Use page
key to customize settings for pages within the Joyfill SDK.
page: {
metadata: [ MetadataSettingSchema, ...]
}
Field | Field_Type | Field_Identifier
Use the field targets as the key to customize settings for fields within the Joyfill SDK.
- Field: Use the generic key
field
to customize settings across all field types. - Field Type: Use the field type (
dropdown
,table
, etc.) as the key to customize settings for a specific field type. - Field Identifier: Use a field identifier (
field_xxxxxxxx
) to customize settings just for an individual field that has been assigned a specific identifier.
field | <FieldType> | <FieldIdentifier>: {
identifier: IdentifierSettingSchema,
metadata: [ MetadataSettingSchema, ...],
tableColumns: TableColumnSettingsSchema,
options: OptionsSettingsSchema
}
Settings Options
Identifier
Identifier
The identifier
setting property allows you to present a pre-set list of identifiers for your users to search and select from.
Identifier Schema
Property | Type | Description |
---|---|---|
label | string | Overwrite the default "Identifier" label with a custom display label. |
options | object_array | Specifies an array of identifier options. See IdentifierOptionSchema. |
Identifier Option Schema
Property | Type | Description |
---|---|---|
title | string | Title of the identifier. |
description | string | Description of the identifier. |
value | string | Specifies the actual value to save as the identifier. |
type | string ('text', 'dropdown', 'image') | Filters what pre-set identifier options will be displayed based on the table column type . Only applies when identifier is being used with the tableColumns.identifier custom settings. |
Examples
const fieldSettings = {
field: {
identifier: {
label: 'Custom IID',
options: [
{
title: 'Location',
description: 'Identifier details for location',
value: 'location_identifier_value',
},
{
title: 'Details Assets',
description: 'Identifier details for text',
value: 'details_identifier_value',
},
{
title: 'Deficiencies',
description: 'Details about identifer',
value: 'deficiencies_identifier_value',
},
]
},
}
}
Identifier Settings UI

Metadata
Metadata
The metadata
property setting allows you to define custom setting controls that save the file, page, and field metadata
property.
Metadata Schema
Property | Type | Description |
---|---|---|
type | string ('text' | 'textarea' | 'number' | 'checkbox' | 'button' | 'divider') | Specifies what type of settings control will be created. |
label | string | Specifies the setting visual label. |
description | string | Specifies the setting visual description. |
addon | string | Specifies the settings a visual addon. Example addons are $, %, etc. Only applies to text, textarea, and number types. |
color | string | HEX code color. Only applies to button type. |
key | string | The key property to use for storing the value on the metadata object. |
value | string | number | boolean | Specifies the current value associated with the metadata key. |
Example
const fieldSettings = {
field: {
metadata: [
{
type: 'checkbox',
label: 'Require Photo Uploads',
description: 'Should a photo be required?',
key: 'required',
},
{
type: 'number',
label: 'Quantity',
description: 'How many photos are required?',
key: 'count',
},
{
type: 'divider',
},
{
type: 'button',
label: 'Lookup Customer',
key: 'customer',
},
],
}
}
Example Settings UI

Table Columns
Table Columns
The tableColumns
setting property allows you to customize the settings associated with each individual table column. This property is only applicable when viewed in table field column settings.
Table Column Schema
Property | Type | Description |
---|---|---|
identifier | object | Specifies custom identifier settings to be used for the table field column identifiers. The tableColumns identifier property works just like the top level field identifier property. See identifier schema for more details. |
metadata | object_array | Specifies custom metadata settings. The tableColumns metadata property works just like the top level field metadata property. See metadata schema for more details. |
options | object | Specifies custom option settings for the table column option modal. |
Options
Options
The options
setting property allows you to customize the settings associated with individual field options. This property is only applicable when used with fields that support options.
Property | Type | Description |
---|---|---|
metadata | object_array | Specifies custom metadata settings. The options metadata property works just like the top level field metadata property. See metadata schema for more details. |
Updated about 1 month ago