Backoffice Customization
Pre-requisites :
We have created new backoffice extension. Defined create wizard in backoffice-config.xml file.
Configurable Flow Wizard/Create wizard. :-
Create wizard allows us to create data for defined type in items.xml.
Create wizard is used to create new object [ of item] from backoffice. Backoffice has action defined to invoking create wizard. The item type defined in items.xml has a OOB Create wizard associated with it.
Example We have defined new MyProduct item type. With attributes
Attributes :-
code
summary
ean
manufacturerName
defaultCategory
user
onlineTo
onlineFrom
onlineDays
galleryImages
soldIndividually
numberOfReviews
averageRating
supplierAlternativeAID
buyerIDS
manufacturerAID
Create Wizard Decoded
Create wizard is invoked by create action – this action is OOB provided.
Link on lower left side opens the list view for MyProduct.
+ sign highlighted in yellow, invokes the create action.
Create wizard contains following areas –
1.Create wizard title
2.Create wizard steps
3.Create wizard properties
4.Editor
5.Navigation Area
Create Wizard – Step by Step
Step -1
Step -2
Step -3
Step -4
Create wizard – temporary Reference of MyProduct –
<wz:flowid=”MyProductWizard”title=”create.title(ctx.TYPE_CODE)”>
<wz:prepareid=”myProductPrepare”>
<wz:initializeproperty=”newMyProduct”type=”ctx.TYPE_CODE”/>
</wz:prepare>
The highlighted text is used as temporary reference to MyProduct object. Its used in all steps and in entire create wizard of MyProduct.
Its declared at the beginning of create wizard and used along.
1.Create wizard title
Title specifies the title for create wizard. It’s the name of type that we specify in items.xml
<wz:flowid=”MyProductWizard”title=”create.title(ctx.TYPE_CODE)”>
<wz:prepareid=”myProductPrepare”>
2.Create wizard steps
Steps specify the tabs that we can use to logically separate the properties of item type.
here we have given 4 steps which separate properties according to logical terms as –
1.Essentials – Contains essential properties
2. Media – Contains media property
3. Reviews And Ratings – Contains reviews and rating data
4. Buyer’s Data – Contains buyer’s And Manufacturer specific data and
We define step in create wizard as –
<wz:stepid=”step1″label=”create.product.essential.label”sublabel=”create.product.essential.sublabel”>
<wz:contentid=”step1.content”>
<wz:property-listroot=”newMyProduct”>
<wz:propertyqualifier=”code”type=”java.lang.String”/>
<wz:propertyeditor=”com.hybris.cockpitng.editor.localized(com.hybris.cockpitng.editor.wysiwyg)”qualifier=”summary”type=”java.lang.String”/><wz:propertyqualifier=”ean”/>
<wz:propertyqualifier=”manufacturerName”/>
<wz:propertyqualifier=”defaultCategory”/>
<wz:propertyqualifier=”user”/></wz:property-list>
</wz:content>
<wz:navigationid=”step1.navigation”>
<wz:cancel/>
<wz:nextvisible=”(!#empty(newMyProduct.code))”/>
</wz:navigation>
</wz:step>
Here
label – is the name of step. It can also contains sub labels.
These labels are defined in properties file and are localized.
<wz:property-list – Is the list of properties for MyProduct
Navigation area is explained in separate point.
3.Create wizard properties
These properties are nothing but attributes defined for item type. Following are the properties defined for MyProduct –
<wz:property-listroot=”newMyProduct”>
<wz:propertyqualifier=”code”type=”java.lang.String”/>
<wz:propertyeditor=”com.hybris.cockpitng.editor.localized(com.hybris.cockpitng.editor.wysiwyg)”qualifier=”summary”type=”java.lang.String”/><wz:propertyqualifier=”ean”/>
<wz:propertyqualifier=”manufacturerName”/>
<wz:propertyqualifier=”defaultCategory”/>
<wz:propertyqualifier=”user”/></wz:property-list>
Each step contains properties as mentioned above.
4.Editor
If we have to enter long string or description for any attribute, we can specify the editors for it. We have used editor for Name attribute. This attribute is extended text editor as shown in image.
<wz:propertyeditor=”com.hybris.cockpitng.editor.localized(com.hybris.cockpitng.editor.wysiwyg)”qualifier=”summary”type=”java.lang.String”/>
We can also refer to other editors. Commonly used is multi reference editor.
5.Navigation Area
Navigation area contains buttons for saving object or navigation to next or previous step or cancelling the operation.
<wz:navigationid=”step2.navigation”>
<wz:cancel/>
<wz:back/>
<wz:nextvisible=”newMyProduct.soldIndividually”/>
<wz:done>
<wz:saveproperty=”newMyProduct”/>
</wz:done></wz:navigation>
This is rendered in this way –
We can control the visibility of these buttons with the help of expressions.
Above Next Button will be visible only of soldIndividually attribute of MyProduct is set to true.
Else next button will be hidden . Like this –
We can put AND / OR operators for more complex evaluation on multiple attributes.
Creating data –
Once click on Done – Entered data will be saved in DB, if there are not any errors. And Will appear in List View
Code –
<contextcomponent=”create-wizard”type=”MyProduct”>
<wz:flowid=”MyProductWizard”title=”create.title(ctx.TYPE_CODE)”>
<wz:prepareid=”myProductPrepare”>
<wz:initializeproperty=”newMyProduct”type=”ctx.TYPE_CODE”/>
</wz:prepare>
<wz:stepid=”step1″label=”create.product.essential.label”sublabel=”create.product.essential.sublabel”>
<wz:contentid=”step1.content”>
<wz:property-listroot=”newMyProduct”>
<wz:propertyqualifier=”code”type=”java.lang.String”/><wz:propertyeditor=”com.hybris.cockpitng.editor.localized(com.hybris.cockpitng.editor.wysiwyg)”
qualifier=”summary”type=”java.lang.String”/><wz:propertyqualifier=”ean”/>
<wz:propertyqualifier=”manufacturerName”/>
<wz:propertyqualifier=”defaultCategory”/>
<wz:propertyqualifier=”user”/>
</wz:property-list>
</wz:content>
<wz:navigationid=”step1.navigation”>
<wz:cancel/>
<wz:nextvisible=”(!#empty(newMyProduct.code))”/>
</wz:navigation>
</wz:step>
<wz:stepid=”step2″label=”create.product.media.label”
sublabel=”create.product.media.sublabel”>
<wz:contentid=”step2.content”>
<wz:property-listroot=”newMyProduct”>
<wz:propertyqualifier=”onlineFrom”/>
<wz:propertyqualifier=”onlineTo”/>
<wz:propertyqualifier=”galleryImages”/>
<wz:propertyqualifier=”soldIndividually”/>
</wz:property-list>
</wz:content>
<wz:navigationid=”step2.navigation”>
<wz:cancel/>
<wz:back/>
<wz:nextvisible=”newMyProduct.soldIndividually”/>
<wz:done>
<wz:saveproperty=”newMyProduct”/>
</wz:done>
</wz:navigation>
</wz:step>
<wz:stepid=”step3″label=”create.product.reviews.label”sublabel=”create.product.reviews.sublabel”>
<wz:contentid=”step3.content”>
<wz:property-listroot=”newMyProduct”>
<wz:propertyqualifier=”numberOfReviews”/>
<wz:propertyqualifier=”averageRating”/>
</wz:property-list>
</wz:content>
<wz:navigationid=”step3.navigation”>
<wz:cancel/>
<wz:back/>
<wz:next/>
<wz:done>
<wz:saveproperty=”newMyProduct”/>
</wz:done>
</wz:navigation>
</wz:step>
<wz:stepid=”step4″label=”create.product.buyer.label”sublabel=”create.product.buyer.sublabel”>
<wz:contentid=”step4.content”>
<wz:property-listroot=”newMyProduct”>
<wz:propertyqualifier=”supplierAlternativeAID”/>
<wz:propertyqualifier=”buyerIDS”/>
<wz:propertyqualifier=”manufacturerAID”/>
</wz:property-list>
</wz:content>
<wz:navigationid=”step4.navigation”>
<wz:cancel/>
<wz:back/>
<wz:done>
<wz:saveproperty=”newMyProduct”/>
</wz:done>
</wz:navigation>
</wz:step></wz:flow>
</context>