Purpose
When we need to develop a new feature to enhance exist function in hybris backoffice, we hope that shouldn't rewrite the whole page and only need to modify the part that we must do. Here is a example how to add a new textbox embed editarea for enhance the function. The most important is that I feel this design is very useful that we should more use this design for otherplace to improve the availability of our code.
Overview
- New feature and present situation description
- How to add new textbox embed editarea
- How to customize the render of the editarea
New feature and present situation description
- Our new feature is that we shoud add a text field for showing coupon url in existed promotion page's others part at backoffice.
- The new field can't mapping to data model, we should render is by ourself.
- We sholud not directly modify the origin source code.
- Only custom install our new created extension it will work.
How to add new textbox embed editarea
Find the promotion page editarea config information
In B2C environment, the promotion page is consists of two extension config.xml files, the first file is ruleenginebackoffice-backoffice-config.xml, the second file is promotionenginebackoffice-backoffice-config.xml.
ruleenginebackoffice-backoffice-config.xml editarea config is:
<context type="AbstractRule">
<context merge-by="type" parent="GenericItem" component="editor-area">
<editorArea:editorArea xmlns:editorArea="http://www.hybris.com/cockpitng/component/editorArea" logic-handler="versionedRuleEditorAreaLogicHandler">
<editorArea:tab name="tab.configuration.abstractrule">
<editorArea:section name="sec.configuration.abstractrule.details">
<editorArea:attribute xmlns="http://www.hybris.com/cockpitng/component/editorArea" qualifier="code"/>
<editorArea:attribute xmlns="http://www.hybris.com/cockpitng/component/editorArea" qualifier="name"/>
<editorArea:attribute xmlns="http://www.hybris.com/cockpitng/component/editorArea" qualifier="description"/>
<editorArea:attribute xmlns="http://www.hybris.com/cockpitng/component/editorArea" qualifier="version" readonly="true"/>
</editorArea:section>
<editorArea:section name="sec.configuration.abstractrule.rulemanagement">
<editorArea:attribute xmlns="http://www.hybris.com/cockpitng/component/editorArea"
qualifier="priority"/>
<editorArea:attribute xmlns="http://www.hybris.com/cockpitng/component/editorArea" qualifier="stackable"/>
<editorArea:attribute xmlns="http://www.hybris.com/cockpitng/component/editorArea" qualifier="ruleGroup"/>
<editorArea:attribute xmlns="http://www.hybris.com/cockpitng/component/editorArea" qualifier="startDate"
label="ruleengine.abstractrule.startdate">
<editorArea:editor-parameter>
<editorArea:name>timeZoneReadOnly</editorArea:name>
<editorArea:value>false</editorArea:value>
</editorArea:editor-parameter>
<editorArea:editor-parameter>
<editorArea:name>selectedTimeZone</editorArea:name>
<editorArea:value>GMT+00:00</editorArea:value>
</editorArea:editor-parameter>
<editorArea:editor-parameter>
<editorArea:name>displayedTimeZones</editorArea:name>
<editorArea:value>GMT-12:00,GMT-11:00,GMT-10:00,GMT-09:30,GMT-09:00,GMT-08:00,GMT-07:00,GMT-06:00,GMT-05:00,GMT-04:30,GMT-04:00,GMT-03:30,GMT-03:00,GMT-02:00,GMT-01:00,GMT+00:00,GMT+01:00,GMT+02:00,GMT+03:00,GMT+03:30,GMT+04:00,GMT+04:30,GMT+05:00,GMT+05:30,GMT+05:45,GMT+06:00,GMT+06:30,GMT+07:00,GMT+08:00,GMT+08:30,GMT+08:45,GMT+09:00,GMT+09:30,GMT+10:00,GMT+10:30,GMT+11:00,GMT+12:00,GMT+12:45,GMT+13:00,GMT+14:00</editorArea:value>
</editorArea:editor-parameter>
</editorArea:attribute>
<editorArea:attribute xmlns="http://www.hybris.com/cockpitng/component/editorArea" qualifier="endDate"
label="ruleengine.abstractrule.enddate">
<editorArea:editor-parameter>
<editorArea:name>timeZoneReadOnly</editorArea:name>
<editorArea:value>false</editorArea:value>
</editorArea:editor-parameter>
<editorArea:editor-parameter>
<editorArea:name>selectedTimeZone</editorArea:name>
<editorArea:value>GMT+00:00</editorArea:value>
</editorArea:editor-parameter>
<editorArea:editor-parameter>
<editorArea:name>displayedTimeZones</editorArea:name>
<editorArea:value>GMT-12:00,GMT-11:00,GMT-10:00,GMT-09:30,GMT-09:00,GMT-08:00,GMT-07:00,GMT-06:00,GMT-05:00,GMT-04:30,GMT-04:00,GMT-03:30,GMT-03:00,GMT-02:00,GMT-01:00,GMT+00:00,GMT+01:00,GMT+02:00,GMT+03:00,GMT+03:30,GMT+04:00,GMT+04:30,GMT+05:00,GMT+05:30,GMT+05:45,GMT+06:00,GMT+06:30,GMT+07:00,GMT+08:00,GMT+08:30,GMT+08:45,GMT+09:00,GMT+09:30,GMT+10:00,GMT+10:30,GMT+11:00,GMT+12:00,GMT+12:45,GMT+13:00,GMT+14:00</editorArea:value>
</editorArea:editor-parameter>
</editorArea:attribute>
</editorArea:section>
<editorArea:section name="sec.configuration.abstractrule.others">
<editorArea:panel colspan="4" name="messageFiredPanel">
<editorArea:attribute xmlns="http://www.hybris.com/cockpitng/component/editorArea" qualifier="messageFired"/>
</editorArea:panel>
<editorArea:attribute xmlns="http://www.hybris.com/cockpitng/component/editorArea" qualifier="status" readonly="true"/>
<editorArea:attribute xmlns="http://www.hybris.com/cockpitng/component/editorArea" qualifier="deployments" readonly="true"/>
</editorArea:section>
</editorArea:tab>
<editorArea:tab name="hmc.administration">
<editorArea:section name="sec.configuration.abstractrule.ruleadministration" position="0">
<editorArea:attribute xmlns="http://www.hybris.com/cockpitng/component/editorArea" qualifier="maxAllowedRuns"/>
<editorArea:attribute xmlns="http://www.hybris.com/cockpitng/component/editorArea" qualifier="allDocuments" readonly="true"/>
<editorArea:attribute xmlns="http://www.hybris.com/cockpitng/component/editorArea" qualifier="comments" readonly="true"/>
<editorArea:attribute xmlns="http://www.hybris.com/cockpitng/component/editorArea" qualifier="uuid" readonly="true"/>
<editorArea:attribute xmlns="http://www.hybris.com/cockpitng/component/editorArea" qualifier="synchronizedCopies" readonly="true" merge-mode="remove"/>
<editorArea:attribute xmlns="http://www.hybris.com/cockpitng/component/editorArea" qualifier="synchronizationSources" readonly="true" merge-mode="remove"/>
</editorArea:section>
</editorArea:tab>
</editorArea:editorArea>
</context>
</context>promotionenginebackoffice-backoffice-config.xml editarea config is:
<context type="PromotionSourceRule">
<context component="editor-area" merge-by="type" parent="SourceRule">
<editorArea:editorArea xmlns:editorArea="http://www.hybris.com/cockpitng/component/editorArea">
<editorArea:tab name="tab.configuration.abstractrule">
<editorArea:section name="sec.configuration.abstractrule.rulemanagement">
<editorArea:attribute xmlns="http://www.hybris.com/cockpitng/component/editorArea" qualifier="website" position="0"/>
<editorArea:attribute xmlns="http://www.hybris.com/cockpitng/component/editorArea" qualifier="excludeFromStorefrontDisplay"/>
</editorArea:section>
</editorArea:tab>
</editorArea:editorArea>
</context>
</context>In the ruleenginebackoffice-backoffice-config.xml it define editarea of type AbstractRule, it’s parent‘s parent of PromotionSourceRule defined in promotionenginebackoffice-backoffice-config.xml. The backoffice page display editarea is consist of the before two parts config.
According to the requirment, we should rewrite section "sec.configuration.abstractrule.others" in our extension.
Customize the config file in our new created extension
We rewrite section "sec.configuration.abstractrule.others" in our extension. And the field can't mapping to exist data model, so we should customize a render to render the field.
<context merge-by="type" type="PromotionSourceRule" parent="GenericItem" component="editor-area">
<editorArea:editorArea xmlns:editorArea="http://www.hybris.com/cockpitng/component/editorArea" logic-handler="versionedRuleEditorAreaLogicHandler">
<editorArea:tab name="tab.configuration.abstractrule" >
<editorArea:section name="sec.configuration.abstractrule.others">
<editorArea:customPanel colspan="4" name="hmc.sec.url" spring-bean="urlPanelRenderer"></editorArea:customPanel>
</editorArea:section>
</editorArea:tab>
</editorArea:editorArea>
</context>Create a new render to render the textbox How to customize the render of the editarea
It is very simple to render a textbox.
public class UrlPanelRenderer extends DefaultEditorAreaPanelRenderer
{
private static final String LABEL_GEN_URL = "label.chinesecoupon.url";
private static final String PRE_COUPLE_URL = "/my-account/coupon/";
private static final String SUF_COUPLE_URL = "code";
private static final String SCLASS_DIV = "yw-editorarea-tabbox-tabpanels-tabpanel-groupbox-ed z-div";
private static final String SCLASS_DIV_LABEL = "yw-editorarea-tabbox-tabpanels-tabpanel-groupbox-attrcell-label z-label";
private static final String SCLASS_DIV_TEXT = "ye-input-text ye-com_hybris_cockpitng_editor_defaulttext z-textbox";
@Override
public void render(final Component parent, final AbstractPanel abstractPanelConfiguration, final Object object,
final DataType dataType, final WidgetInstanceManager widgetInstanceManager)
{
final Textbox textbox = new Textbox();
final WidgetModel model = widgetInstanceManager.getModel();
final PromotionSourceRuleModel promotionSourceRule = model.getValue("currentObject", PromotionSourceRuleModel.class);
textbox.setName("url");
textbox.setValue(PRE_COUPLE_URL + promotionSourceRule.getCode() + SUF_COUPLE_URL);
textbox.setReadonly(true);
textbox.setSclass(SCLASS_DIV_TEXT);
final Label label = new Label(Labels.getLabel(LABEL_GEN_URL));
label.setSclass(SCLASS_DIV_LABEL);
final Div div = new Div();
div.setClass(SCLASS_DIV);
div.appendChild(label);
div.appendChild(textbox);
div.setParent(parent);
}
}Final show
We successful add new text box embed promotion page's others part section.
- SAP Managed Tags:
| User | Count |
|---|---|
| 4 | |
| 2 | |
| 2 | |
| 2 | |
| 1 | |
| 1 | |
| 1 | |
| 1 | |
| 1 | |
| 1 |
