Extending an existing field

Stay organized with collections Save and categorize content based on your preferences.

In order to extend an existing field you must subclass a built in field (e.g FieldTextInput, FieldColour) and then modify part of it to fit your needs. Some parts of a field you can modify are:

If you want to create a custom field that does not need behaviour from any built-in field you should subclass Field.

Common extensions

Most custom fields extend one of these three types:

  • Text Input: If you want your users to type into your field, you should extend FieldTextInput.
  • Number: If you want to store a number, you should extend FieldNumber.
  • Dropdown: If you want to create a dropdown, but you want it to store a different model than the default string or image model, you should extend FieldDropdown.
    • Caution: Before extending FieldDropdown, check that the dropdown field's customization options cannot fulfill your needs.

Under certain circumstances you may wish to extend a different field type. For example FieldLabelSerializable extends FieldLabel.

Subclassing

import * as Blockly from 'blockly';

export class MyCustomTextField extends Blockly.FieldTextInput {

  constructor(value, validator, config) {
    super(value, validator, config);
  }
}

The constructor for a field's subclass looks very similar to the constructor for a custom field. The signature of the sub-constructor should generally match the signature of the super-constructor.

JSON and registration

You should also register the field once:

Blockly.fieldRegistry.register('my_custom_text_field', MyCustomTextField);

and provide an implementation of fromJson in the class so that it works with the JSON format:

static fromJson(options) {
  const value = Blockly.utils.replaceMessageReferences(options.value);
  return new MySubclassName(value);
}

For more information about registering a field see the JSON and registration section in Creating a Custom Field.