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. |
custom | boolean | Specifies if custom option should be enabled or disabled. Undefined or true will leave custom option enabled. False will disable the custom option. |
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. |
Display and Hide Settings In The Builder
Important Note: Ensure you understand how targeting works with field settings. This is what you will use to properly target which properties in the settings you would like to hide.
In the Joyfill JS SDK you can hide settings that are not relevant to your users. You do this by utilizing the fieldSettings
property and the target (field
, textField
, page
, etc.) along with the nested property name directly on the SDK. Even though the SDK key is fieldSettings
you also use this to hide page settings and file settings. All settings are displayed by default. You must explicitly set a false boolean value to hide the setting.
Hide General Settings
You can hide general settings like title
, required
, etc. by simply using the property name and a boolean. For instance, title: false
.
Hide Style Settings
In order to hide style settings they must be nested within a styles
object. You can hide style settings like fontSize
, titleFontSize
, etc. by simply using the property name nested under a styles
object and a boolean. For instance, { styles: { fontSize: false, fontColor: false } }
.
SDK Example
<JoyDoc
mode="edit"
doc={template}
onChange={(changelogs, data) => {...}}
fieldSettings={{
page: {//Disable settings for a page
upload: false,
},
field: { //Disbable settings for a field
title: false,
styles: {
fontSize: false
}
}
}}
/>
Joyfill.JoyDoc(
document.getElementById('joyfill'),
{
doc: template,
mode: 'edit',
fieldSettings: {
page: {
upload: false,
},
field: { //Disbable settings for a field
title: false,
styles: {
fontSize: false
}
}
}
});
Available Setting Options
To target a specific setting in the right panel of the builder you simply use the name of the associated property on the JoyDoc Specification. For instance, if you want to disable the ability for a user to set the font size of the field titles then you would use titleFontSize: false
.
The only exceptions are the following:
- Disable page background images:
fieldSettings={ page: { upload: false } }
- Disable all styles for fields:
fieldSettings={ field: { styles: false } }
- Disable field delete:
fieldSettings={ field: { delete: false } }
Updated 13 days ago