Custom CSS for custom editor in backoffice

[former_member636592]

I created a custom editor which extends the default multi reference editor. I created a definition.xml and default.css but unfortunately the styling is not reflected in my editor. May I know what I missed that causes the styling not reflected in my editor?

[Former Member]

Hi I'm also facing same issue.Did u resolve this?if yes please help me

[former_member635943]

I am having a similar issue and proceeded with the work around, It works perfectly. Has this issue been been addressed with the later versions ?
Also if you are using the workaround, you would not need any additional styles in your custom editor since the workaround references the parent styles.

[Former Member]

This workaround works perfectly for Hybris 6.3

 public class ProvinceDeliveryCostEditor extends DefaultExtendedMultiReferenceEditor {
 
     @Override
     public void render(final Component parent, final EditorContext context, final EditorListener listener) {
         super.render(parent, context, listener);
         // Link parent style configurations to the child
         if (parent.getChildren().get(0) instanceof HtmlBasedComponent) {
             UITools.modifySClass((HtmlBasedComponent) parent.getChildren().get(0),
                     "ye-com_hybris_cockpitng_editor_extendedmultireferenceeditor", true);
             setComponentID("com.hybris.cockpitng.editor.extendedmultireferenceeditor");
         }
     }
 }

definition.xml

 <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
 
 <editor-definition id="your.package.provincedeliverycosteditor"
                        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                        xsi:noNamespaceSchemaLocation="http://www.hybris.com/schema/cockpitng/editor-definition.xsd"
                        extends="com.hybris.cockpitng.editor.extendedmultireferenceeditor">
 
 
     <name>ProvinceDeliveryCost</name>
     <description>Displays delivery costs in province</description>
 
     <type>^ExtendedMultiReference-(COLLECTION|LIST|SET)\((.*)\)$</type>
 
     <editorClassName>your.package.ProvinceDeliveryCostEditor</editorClassName>
 
 </editor-definition>

For appropriate buttons displaying you should add file "label.properties" with this content

 reference.editor.cannot.instantiate.type.selected=Choosen type ({0}) can not be created because type is abstract. Please choose another type.
 saverow=Save
 undochanges=Undo
 removereference=Remove
 editdetails=Edit Details
 couldnotsaveitem=Row {0} could not be saved, reason: {1}
 couldnotsaveitempermission=Row {0} could not be saved due to insufficient permissions

[former_member632755]

Hi,

after investigation, the following should work:

 public class MyCustomExtendedMultiReferenceEditor extends DefaultExtendedMultiReferenceEditor
 {
 
     private static final Logger LOG = LoggerFactory.getLogger(MyCustomExtendedMultiReferenceEditor.class);
 
     @Override
     public void render(final Component parent, final EditorContext context, final EditorListener listener)
     {
         LOG.info("Rendering via: " + MyCustomExtendedMultiReferenceEditor.class.getName());
         super.render(parent, context, listener);
         if (parent.getChildren().get(0) instanceof HtmlBasedComponent)
         {
             UITools.modifySClass((HtmlBasedComponent) parent.getChildren().get(0), "ye-com_hybris_cockpitng_editor_extendedmultireferenceeditor", true);
         }
     }
 }

and the definition (mind the extends attribute!):

 <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
 
 <editor-definition id="com.test.backoffice.cockpitng.editor.mycustomextendedmultireferenceeditor"
                    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                    xsi:noNamespaceSchemaLocation="http://www.hybris.com/schema/cockpitng/editor-definition.xsd" extends="com.hybris.cockpitng.editor.extendedmultireferenceeditor">
 
     <name>My Custom Extended Multi Reference Editor</name>
     <description></description>
     <type>^ExtendedMultiReference-(COLLECTION|LIST|SET)\((.*)\)$</type>
     <editorClassName>com.test.backoffice.cockpitng.editor.mycustomextendedmultireferenceeditor.MyCustomExtendedMultiReferenceEditor</editorClassName>
 
 </editor-definition>

Obviously the part in the renderer is a workaround in this case and it must be handled appropriately in the framework. This will be reported and fixed. For now the presented solution should be enough.

Cheers, Wojtek

[Former Member]

Thanks a ton.This is working.

[former_member632755]

Hi,

are you using the right editor in your widgets.xml? For example in all declarations like:

 <editorArea:attribute editor="com.hybris.cockpitng.editor.extendedmultireferenceeditor" qualifier="cronJobs">

Must be replaced with:

 <editorArea:attribute editor="om.test.backoffice.cockpitng.editor.mycustomextendedmultireferenceeditor" qualifier="cronJobs">

Please also try to put a breakpoint in the MyCustomExtendedMultiReferenceEditor class to make sure it is picked up.

If both checks are true I think it is a bug.

Cheers, Wojtek

[Former Member]

Hi Thanks for the reply. Yes it was picking my custom editor class,but not css

[former_member632755]

Hi,

OK. Then I am reporting this as a bug. Could you give me your suite's version? THis may be important for validation.

For the time beeing - as a workaround - I recommend you to put the styles into one of the common css (scss if you are using it) files. As the bug will be reoslved you should be able to easily move the code to the dedicated file.

Cheers, Wojtek

[former_member632755]

One more comment. It is woth trying to give the css file the name of mycustomextendedmultireferenceeditor.css (last part of the editor's id + .css). This convention should also work (I expect it won't but as I said - it is worh trying).

The bug is reported and the backoffice team will be investigating it.

[Former Member]

I am using this version=6.2.0.0(from build.number)

[Former Member]

Also If I extend "DefaultExtendedMultiReferenceEditor" my new editor was not able to load OOTB css. My list view of custom editor is not proper as of OOTB extended multi reference editor

[Former Member]

Hey Guys,

I need to popup my custom widget from my custom multi reference editor. Not sure what is missing in my configuration. I have attached all the necessary docs along with. Please help.

Regards, Ashish

[1]: /storage/temp/9457-backoffice-widgets.txt

[Former Member]

Any feedback on this ?

[former_member632755]

Hi,

we would have to see your code to try to help.

Cheers, Wojtek

[former_member636592]

 <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
 
 <editor-definition id="com.test.backoffice.cockpitng.editor.mycustomextendedmultireferenceeditor"
                    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                    xsi:noNamespaceSchemaLocation="http://www.hybris.com/schema/cockpitng/editor-definition.xsd">
 
     <name>My Custom Extended Multi Reference Editor</name>
     <description></description>
     <type>^ExtendedMultiReference-(COLLECTION|LIST|SET)\((.*)\)$</type>
     <editorClassName>com.test.backoffice.cockpitng.editor.mycustomextendedmultireferenceeditor.MyCustomExtendedMultiReferenceEditor</editorClassName>
 
     <sockets>
         <input id="referenceEditorInput"/>
         <output id="referenceEditorOutput" type="java.util.Map"/>
         <output id="referenceSelected" type="com.hybris.cockpitng.data.TypeAwareSelectionContext"/>
     </sockets>
 
     <settings>
         <setting key="pageSize" default-value="5" type="java.lang.Integer"/>
         <setting key="listConfigContext" default-value="listview" type="java.lang.String"/>
     </settings>
 </editor-definition>

[Former Member]

I'm also having the same issue could you help me with this?

[Former Member]

Hi. I have the same problem with extendedmultireferenceeditor customization. I applied your workaround but it helps me only partially. ("Edit" and "Create" buttons don't work, "Remove" button works but doesn't display) Hybris version 6.3.1

Problem:

My implementation: link text

Thanks in advance