SAP Commerce: Change Nested Editor in Backoffice config

Written by Danny Krämer

Date: 7/18/2024

Editing Custom Fields in the Backoffice

Recently, I created a custom CMS component and for that, I created a new type for localized maps. Out of the box, the SAP Commerce Backoffice is able to display and edit maps, but if those maps are localized (so you have one map for each language), the Backoffice just does not know which editor to show.

Of course, you could just write a completely new widget to edit the field, but that would actually be a bit overkill for this use case because we already have an editor for localized fields and an editor for maps; we just have to fuse them somehow. Luckily, in the SAP Help, there is a description of exactly this case. You can find it here: SAP Help Nested Editors

But as I was struggling a bit to get it right and I found the documentation a bit confusing and short, here are some extra things to consider.

Troubleshooting the Process

Make sure your backoffice-config.xml follows the following naming convention: <my-extension-name>-backoffice-config.xml and is located in the resources directory of your extension.
Your file must be a valid XML, so do not forget the <config> and <?xml> tags.
If your extension is not a backoffice extension, then you need to add <meta key="backoffice-module" value="true" /> to your extensioninfo.xml.
It is pretty confusing that in the help article, three lines per attribute are shown in the example. You actually only need one line per attribute.
For me, it was not possible to just change the editor for the fields in the unbound section. The only thing that worked for me was to add the fields to another section and then change the editor.

Example

So here is my final code example:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<config xmlns="http://www.hybris.com/cockpit/config">
    <context merge-by="type" parent="SimpleCMSComponent" type="CustomComponent" component="editor-area" module="myextension">
    <editorArea:editorArea xmlns:editorArea="http://www.hybris.com/cockpitng/component/editorArea">
        <editorArea:tab name="hmc.properties">
            <editorArea:section name="hmc.essential">
                <editorArea:attribute editor="com.hybris.cockpitng.editor.localized(com.hybris.cockpitng.editor.defaultmap)" qualifier="dynamicFields"/>
                <editorArea:attribute qualifier="htmlMarkup" />
            </editorArea:section>
        </editorArea:tab>
    </editorArea:editorArea>
</context>
</config>

As you can see, I just nested the localized editor with the default map editor and moved the fields to the properties tab in an essential section.

sap commerce

backoffice

config