HowToConfiguretheEditorArea Tutorial 150715 1114 15938
HowToConfiguretheEditorArea Tutorial 150715 1114 15938
HowToConfiguretheEditorArea Tutorial 150715 1114 15938
The editor area is displayed on the right side when creating or editing
products in the hybris Cockpit. It consists of groups of attributes, such as
Properties, Category System, Prices.
For details on how to import XML configuration files into the hybris
Cockpit, see How to Import Cockpit Configuration - Tutorial.
See Also
Configuration of the Cockpit UI, section Editors
API Doc
Admin Perspective, section Customizing the Editor Area
Figure: The editor area in the product perspective of the hybris Product Cockpit.
Figure: The editor area in the Edit mode. You can move items using drag-and-drop operation.
In the XML configuration file, we can group product properties, and decide which group should be visible and initially opened by using the proper
attributes:
<custom-group
class="de.hybris.platform.cockpit.services.config.impl.ClassAttrEditorSectionConfigura
tion"
qualifier="classification"
initially-opened="true"
show-if-empty="false">
<label lang="de">Klassifikationsattribute</label>
<label lang="en">Classification Attributes</label>
</custom-group>
<custom-group
class="de.hybris.platform.cockpit.services.config.impl.UnassignedEditorSectionConfigur
ation"
qualifier="unassigned"
initially-opened="false">
<label lang="de">Andere</label>
<label lang="en">Other</label>
</custom-group>
</editor>
Collection Editor
With the release 4.5. the reference selector in the editor area have been improved with the set of new collection editors. The main purpose of the
new collection editors is to add new items to the collection. The reference selector in the editor area works in the following way:
You can click in text field and start typing. The result list is opened below.
In the result list you can:
Single select: Select an item from result list by single clicking on it
Multiple select: Select (with pressed SHIFT) more than one item. As soon as the Shift button is pressed, there is an ADD button
below.
The selected item (or items) is now listed above the text input dialog.
The hybris cockpits are shipped with a default collection editor that can be configured in a proper *-spring-editors.xml configuration file. The code
sample provides an example.
<!--
Note:
Version 4.5 comes with new simplistic collection reference editor which is default
editor.
-->
(1) <entry key="multi"
value="de.hybris.platform.cockpit.model.referenceeditor.collection.CollectionUIEditor"
/>
(2) <entry key="multiDeprecated"
value="de.hybris.platform.cockpit.model.referenceeditor.impl.DefaultReferenceCollectio
nUIEditor"/>
<!--
Note:
Version 4.5 comes with new simplistic media collection reference editor which is
default editor.
-->
(3) <entry key="mediaReferenceCollectionSelector"
value="de.hybris.platform.cockpit.model.referenceeditor.collection.CollectionUIEditorM
edia"/>
(4) <entry key="mediaReferenceCollectionSelectorDeprecated"
value="de.hybris.platform.cockpit.model.referenceeditor.impl.DefaultMediaReferenceColl
ectionUIEditor"/>
<!--
Note:
Version 4.5 comes with new simplistic celum media collection reference editor which
is default editor.
-->
(5) <entry key="celumMediaReferenceCollectionSelector"
value="de.hybris.platform.cockpit.model.referenceeditor.celum.impl.CelumMediaCollectio
nUIEditor"/>
(6) <entry key="celumMediaReferenceCollectionSelectorDeprecated"
value="de.hybris.platform.cockpit.model.referenceeditor.celum.impl.CelumMediaReference
CollectionUIEditor"/>
As you can see in the above given example the changes affect 3 types of the collection editor:
Note
All classes that represent old editors are marked as deprecated. As a result we strongly suggest using their new counterparts.
You are still able to change back to old editors by specifying the old editor:
By modifying *-spring-editors.xml in your cockpit application and changing mapping between editor code and class that represents
particular editor. These changes are global per cockpit application
By setting proper editor code that refers to old editors per editor instance. See number (2),(3),(6) in the previous section example.
The code below shows an example on how to switch to old editors.