Implemented by
Craft\AssetsFieldType, Craft\BaseAssetSourceType, Craft\BaseElementFieldType, Craft\BaseFieldType, Craft\BaseOptionsFieldType, Craft\BasePlugin, Craft\BaseSavableComponentType, Craft\BaseTask, Craft\BaseWidget, Craft\CategoriesFieldType, Craft\CheckboxesFieldType, Craft\ColorFieldType, Craft\DateFieldType, Craft\DeleteStaleTemplateCachesTask, Craft\DropdownFieldType, Craft\EntriesFieldType, Craft\FeedWidget, Craft\FindAndReplaceTask, Craft\GeneratePendingTransformsTask, Craft\GetHelpWidget, Craft\GoogleCloudAssetSourceType, Craft\IFieldType, Craft\IPlugin, Craft\ITask, Craft\IWidget, Craft\LightswitchFieldType, Craft\LocalAssetSourceType, Craft\LocalizeRelationsTask, Craft\MatrixFieldType, Craft\MultiSelectFieldType, Craft\NewUsersWidget, Craft\NumberFieldType, Craft\PlainTextFieldType, Craft\PositionSelectFieldType, Craft\QuickPostWidget, Craft\RackspaceAssetSourceType, Craft\RadioButtonsFieldType, Craft\RecentEntriesWidget, Craft\ResaveAllElementsTask, Craft\ResaveElementsTask, Craft\RichTextFieldType, Craft\S3AssetSourceType, Craft\TableFieldType, Craft\TagsFieldType, Craft\TempAssetSourceType, Craft\UpdateElementSlugsAndUrisTask, Craft\UpdatesWidget, Craft\UsersFieldType

Savable component type interface.

See also

View source (opens new window)

# Public Methods

Method Description
getClassHandle() Returns the component’s handle, ideally based on the class name.
getName() Returns the component’s name.
getSettings() Returns the component’s settings model.
getSettingsHtml() Returns the component’s settings HTML.
isSelectable() Returns whether this component should be shown when the user is creating a component of this type.
prepSettings() Preps the settings before they’re saved to the database.
setSettings() Sets the setting values.

# getSettings()

Returns the component’s settings model.

View source (opens new window)


Craft\BaseModel – The component’s settings model.


public abstract Craft\BaseModel getSettings ( )

# getSettingsHtml()

Returns the component’s settings HTML. An extremely simple implementation would be to directly return some HTML:

return '<textarea name="foo">'.$this->getSettings()->foo.'</textarea>';

For more complex settings, you might prefer to create a template, and render it via {@link TemplatesService::render()}. For example, the following code would render a template loacated at craft/plugins/myplugin/templates/_settings.html, passing the settings to it:

return craft()->templates->render('myplugin/_settings', array(
    'settings' => $this->getSettings()

If you need to tie any JavaScript code to your settings, it’s important to know that any name= and id= attributes within the returned HTML will probably get {@link TemplatesService::namespaceInputs() namespaced}, however your JavaScript code will be left untouched.

For example, if getSettingsHtml() returns the following HTML:

<textarea id="foo" name="foo"></textarea>

<script type="text/javascript">
    var textarea = document.getElementById('foo');

…then it might actually look like this before getting output to the browser:

<textarea id="namespace-foo" name="namespace[foo]"></textarea>

<script type="text/javascript">
    var textarea = document.getElementById('foo');

As you can see, that JavaScript code will not be able to find the textarea, because the textarea’s id= attribute was changed from foo to namespace-foo.

Before you start adding namespace- to the beginning of your element ID selectors, keep in mind that the actual namespace is going to change depending on the context. Often they are randomly generated. So it’s not quite that simple.

Thankfully, {@link TemplatesService} provides a couple handy methods that can help you deal with this:

  • {@link TemplatesService::namespaceInputId()} will give you the namespaced version of a given ID.
  • {@link TemplatesService::namespaceInputName()} will give you the namespaced version of a given input name.
  • {@link TemplatesService::formatInputId()} will format an input name to look more like an ID attribute value.

So here’s what a getSettingsHtml() method that includes field-targeting JavaScript code might look like:

public function getSettingsHtml()
    // Come up with an ID value for 'foo'
    $id = craft()->templates->formatInputId('foo');

    // Figure out what that ID is going to be namespaced into
    $namespacedId = craft()->templates->namespaceInputId($id);

    // Render and return the input template
    return craft()->templates->render('myplugin/_fieldinput', array(
        'id'           => $id,
        'namespacedId' => $namespacedId,
        'settings'     => $this->getSettings()

And the _settings.html template might look like this:

<textarea id="{{ id }}" name="foo">{{ }}</textarea>

<script type="text/javascript">
    var textarea = document.getElementById('{{ namespacedId }}');

The same principles also apply if you’re including your JavaScript code with {@link TemplatesService::includeJs()}.

View source (opens new window)


string (opens new window), null (opens new window)


public abstract string, null getSettingsHtml ( )

# prepSettings()

Preps the settings before they’re saved to the database.

View source (opens new window)



array (opens new window) – The prepped settings, which will be stored in the database.


public abstract array prepSettings ( $settings )

# setSettings()

Sets the setting values. The values may come as a key/value array, or a {@link BaseModel} object. Either way, this method should store the values on the model that is returned by {@link getSettings()}.

View source (opens new window)



null (opens new window)


public abstract null setSettings ( $values )