Home » Create & connect a new widget in Backoffice

Create & connect a new widget in Backoffice


To speed up widgets development, deactivate all cache :

backoffice.cockpitng.additionalResourceLoader.enabled=true
backoffice.cockpitng.uifactory.cache.enabled=false
backoffice.cockpitng.widgetclassloader.resourcecache.enabled=false
backoffice.cockpitng.resourceloader.resourcecache.enabled=false


Create a widget to filter reviews by status :

<widget-definition xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:noNamespaceSchemaLocation="http://www.hybris.com/schema/cockpitng/widget-definition.xsd"

id="com.cloudnir.backoffice.widgets.customerreviewselectorbackofficewidget">

<name>Customer Review Selector</name>

<description>Customer Review Selector - Select pending reviews, denied reviews or approved reviews </description>

<defaultTitle>Customer Review Selector</defaultTitle>

<author>Cloudnir</author>

<version>1.0</version>

<view src="customerreviewselectorwidget.zul" />

<keywords>

<keyword>customerreviewselector</keyword>

</keywords>

<controller class="com.cloudnir.backoffice.widgets.CustomerreviewbackofficeController" />

<settings>

<setting key="type" type="ENUM(Pending,Approved,Rejected)"/>

<setting key="name" type="String"/>

</settings>

<sockets>

<output type="com.hybris.cockpitng.search.data.pageable.Pageable" id="reviews"/>

</sockets>
</widget-definition>

Create a Controller :

package com.cloudnir.backoffice.widgets;

import de.hybris.platform.customerreview.enums.CustomerReviewApprovalType;
import de.hybris.platform.customerreview.model.CustomerReviewModel;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.Events;
import org.zkoss.zk.ui.select.annotation.WireVariable;
import org.zkoss.zul.Button;
import com.cloudnir.services.CustomerReviewSearchService;
import com.hybris.cockpitng.annotations.ViewEvent;
import com.hybris.cockpitng.search.data.pageable.PageableList;
import com.hybris.cockpitng.util.DefaultWidgetController;

public class CustomerreviewbackofficeController extends
DefaultWidgetController
{
private Button reviews;

@WireVariable
private CustomerReviewSearchService customerReviewSearchService;

@Override
public void initialize(final Component comp)
{
super.initialize(comp);
reviews.setLabel(this.getWidgetSettings().getString("name"));
}

@ViewEvent(componentID = "reviews", eventName = Events.ON_CLICK)
public void sendReviews()
{
final CustomerReviewApprovalType approvalType =
CustomerReviewApprovalType
.valueOf(this.getWidgetSettings().getString("type"));

sendOutput("reviews", new PageableList<CustomerReviewModel>(
customerReviewSearchService.getAllCustomerReviews(
approvalType),10, CustomerReviewModel._TYPECODE));

}

}

Create a View (Zul File):

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.zkoss.org/2005/zul"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:h="http://www.w3.org/1999/xhtml"
xmlns:w="http://www.zkoss.org/2005/zk/client"
xmlns:zk="http://www.zkoss.org/2005/zk"
xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.hybris.com/schema/cockpitng/zul/zul.xsd"

height="100%">
<div height="100%" style="background: #ccc;">12

<div>
<button id="reviews" label="Pending Reviews"/>
</div>
<widgetchildren slotID="additionalArea" id="additionalArea"
type="tab" width="100%" height="100%"/>

</div>
</widget>