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`

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`

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`

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`

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.