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

Identifier Option Schema

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

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

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.

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 } }