HowToConfiguretheEditorArea Tutorial 150715 1114 15938

How To Configure the Editor Area - Tutorial
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.
The visibility and the order of groups and attributes is configured in a

XML file, but can also be adjusted during the application runtime. To do
so, enter the editing mode by clicking on the Edit link. In the Edit mode
you can add attributes to a hidden attribute list by clicking on the close
button , or remove the attribute from this list by clicking on the
attribute's name. To leave the Edit mode, click the Edit link again. Users
can change the order of attribute groups by dragging and dropping
technique.
For details on how to import XML configuration files into the hybris
Cockpit, see How to Import Cockpit Configuration - Tutorial.
Automatic Storing of UI Configuration

Since hybris 4.4.0 version, the hybris Cockpit framework gives
you an opportunity to automatically store your configured user
interface (UI) without usage of an XML. For details read Storin
g of UI Configuration Changes.
About this Document

This document instructs how to configure the editor area of the hybris Cockpit.
Audience: Consultants, developers
Related extension: cockpit Extension - Technical Guide
Validity: 4.1.0 and higher
Based on hybris version: 4.1 Beta
cockpit Extension - Technical Guide Resources

Expand all Collapse all
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 Edit mode.
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:
visible: For visibility

initially-opened: For displaying a group open or collapsed
Example of an editor area configuration file:
<?xml version="1.0" encoding="UTF-8"?>

<editor>
<group qualifier="general" visible="true" initially-opened="true">

<label lang="de">Allgemein</label>
<label lang="en">General</label>
<property qualifier="product.code"/>
<property qualifier="product.name"/>
<property qualifier="product.remarks"/>
<property qualifier="product.deliveryTime"/>
<property qualifier="product.onlineDate"/>
<property qualifier="product.description"/>
<property qualifier="product.supercategories"/>
<property qualifier="product.thumbnail" editor="browserContextEditor"/>
<property qualifier="product.picture" editor="mediaReferenceSelector">
<parameter>
<name>mimeTypes</name>
<value>
image/jpeg;image/gif
</value>
</parameter>
</property>
<property qualifier="product.thumbnails"
editor="mediaReferenceCollectionSelector">
<parameter>
<name>mimeTypes</name>
<value>
image/gif;image/jpeg;
</value>
</parameter>
</property>
</group>
<group qualifier="price" visible="true" initially-opened="true">

<label lang="de">Preis</label>
<label lang="en">Price</label>
<property qualifier="product.Europe1PriceFactory_PPG"/>
<property qualifier="product.Europe1PriceFactory_PTG"/>
<property qualifier="product.Europe1PriceFactory_PDG"/>
<property qualifier="product.europe1Prices" editor="browserContextEditor"/>
<property qualifier="product.europe1Taxes" visible="false"/>
<property qualifier="product.europe1Discounts"/>
</group>
<group qualifier="additional" visible="true" initially-opened="true">

<label lang="de">Zusätzliche Attribute</label>
<label lang="en">Additional attributes</label>
<property qualifier="product.manufacturerName"/>
<property qualifier="product.manufacturerTypeDescription"/>
<property qualifier="product.manufacturerAID"/>
<property qualifier="product.supplierAlternativeAID"/>
</group>
<group qualifier="admin" visible="true" initially-opened="false">

<label lang="de">Administration</label>
<label lang="en">Administration</label>
<property qualifier="Item.pk"/>
<property qualifier="Item.creationTime"/>
<property qualifier="Item.modifiedtime"/>
</group>
<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.

(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"/>

(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"/>

(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:
Regular reference collection editor (1)

Media reference collection editor (3)
Celum media reference collection editor (5)
Using Old Editors
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.
<group qualifier="Multimedia" visible="true" initially-opened="false">

<label key="config.general.multimedia" />
<property qualifier="category.data_sheet"
editor="mediaReferenceCollectionSelectorDeprecated"/>
<property qualifier="category.detail"
<property qualifier="category.logo"
editor="celumMediaReferenceCollectionSelectorDeprecated"/>
<property qualifier="category.normal"
<property qualifier="category.others"
<property qualifier="category.thumbnails"
editor="celumMediaReferenceCollectionSelectorDeprecated"/>
</group>

HowToConfiguretheEditorArea Tutorial 150715 1114 15938

Uploaded by

Copyright:

Available Formats

HowToConfiguretheEditorArea Tutorial 150715 1114 15938

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HowToConfiguretheEditorArea Tutorial 150715 1114 15938

Uploaded by

Copyright:

Available Formats

How To Configure the Editor Area - Tutorial

The visibility and the order of groups and attributes is configured in a

Automatic Storing of UI Configuration

About this Document

Audience: Consultants, developers

Related extension: cockpit Extension - Technical Guide

Validity: 4.1.0 and higher

Based on hybris version: 4.1 Beta

cockpit Extension - Technical Guide Resources

Figure: The editor area in Edit mode.

visible: For visibility

<?xml version="1.0" encoding="UTF-8"?>

<group qualifier="general" visible="true" initially-opened="true">

<group qualifier="price" visible="true" initially-opened="true">

<group qualifier="additional" visible="true" initially-opened="true">

<group qualifier="admin" visible="true" initially-opened="false">

Regular reference collection editor (1)

Using Old Editors

<group qualifier="Multimedia" visible="true" initially-opened="false">

You might also like