Skip to main content
Version: 2023.3

Select Editable

General

The select editable generates select-box component in Editmode.

Configuration

NameTypeDescription
storearrayKey/Value pairs for the available options.
reloadboolSet true to reload the page in editmode after selecting an item
widthintegerWidth of the select box in pixel
classstringA CSS class that is added to the surrounding container of this element in editmode
defaultValuestringA default value for the available options. Note: This value needs to be saved before calling getData() or use setDataFromResource().
requiredboolean(default: false) set to true to make field value required for publish
editableboolean(default: false) set to true to allow custom option

Methods

NameReturnDescription
getData()stringValue of the select, this is useful to get the value even in editmode
isEmpty()boolWhether the editable is empty or not.

Examples

Basic Usage

The code below shows a select box in editmode, in the frontend preview you will see simply the value of the chosen option.

{% if editmode %}
{{ pimcore_select("valid_for", {
"store": [
["one-month", "One month"],
["three-months", "Three months"],
["unlimited", "Unlimited"]
],
"defaultValue" : "unlimited"
}) }}
{% else %}
<p>
{{ "Something is valid for" | trans }}:{{ pimcore_select("valid_for").getData() | trans }}
</p>
{% endif %}

Editmode: Select editable in editmodeSelect editable in editmodeSelect editable in editmode

Frontend: Select editable in frontendSelect editable in frontendSelect editable in frontend

Preselect the option

You can preselect an option in your select editable by using setDataFromResource()

{% if editmode %}
{% if pimcore_select('valid_for').isEmpty() %}
{% do pimcore_select('valid_for').setDataFromResource('unlimited') %}
{% endif %}

...

{% endif %}