Skip to main content
Version: 2024.1

Multiselect Editable

General

The Multiselect editable generates a multiselect box component in editmode.

Configuration

NameTypeDescription
storearrayKey/Value pairs for the available options.
widthintegerWidth of a generated block in editmode
heightintegerHeight of a generated block in editmode
classstringA CSS class that is added to the surrounding container of this element in editmode

Methods

NameReturnDescription
getData()arrayReturns array of values chosen in the editmode.
isEmpty()booleanWhether the editable is empty or not

Example

The code below renders a multiselectbox in the backend. Also, it shows the list of chosen elements in the frontend.

{% if editmode %}
{{ pimcore_multiselect('categories', {
'width': 200,
'height': 100,
'store': [
['cars', 'Cars'],
['motorcycles', 'Motorcycles'],
['accessories', 'Accessories'],
]
}) }}
{% else %}
<p>{{ 'This page is linked to' | trans }}
{% for categoryKey in pimcore_multiselect('categories').getData %}
<span>
{{ categoryKey | trans }}
</span>
{% endfor %}
categories
</p>
{% endif %}

The editmode preview:

Multiselect editable - editmodeMultiselect editable - editmodeMultiselect editable - editmode

In the frontend you can find the rendered text with the categories you have chosen in the editmode:

Multiselect editable - frontendMultiselect editable - frontendMultiselect editable - frontend