如何在Sap Hybris中配置实体的参考搜索列表视图

Question

我必须显示一个"信息"；实体的ReferenceSearch ListView中的图标，当鼠标悬停时，该图标会显示一个包含信息的工具提示(一个包含列和行的表(。我该如何启用这一切？非常感谢。

Answer 1

您可以通过扩展AbstractWidgetComponentRenderer来实现。

以下示例用于提供寄售列表视图的工具提示，将鼠标悬停在寄售代码上可以查看产品详细信息。

package custom.backoffice.renderer;
import org.zkoss.util.resource.Labels;
import org.zkoss.zul.*;
import com.hybris.cockpitng.core.config.impl.jaxb.listview.ListColumn;
import com.hybris.cockpitng.dataaccess.facades.type.DataType;
import com.hybris.cockpitng.engine.WidgetInstanceManager;
import com.hybris.cockpitng.util.UITools;
import com.hybris.cockpitng.widgets.common.AbstractWidgetComponentRenderer;
import de.hybris.platform.core.model.ItemModel;
import de.hybris.platform.core.model.product.ProductModel;
import de.hybris.platform.ordersplitting.model.ConsignmentModel;
/**
* Renderer class to display list of product in the tooltip on the hover of consignment code column value
*/
public class CustomListViewWithTooltipRenderer extends AbstractWidgetComponentRenderer<Listcell, ListColumn, Object> {
public static final String CONTAINER_WIDTH = "540px";
public static final String HEADER_CODEUPC_SCSS = "tooltip-codeUPC bold-border";
public static final String HEADER_QTY_SCSS = "tooltip-qty bold-border";
private static final String PRODUCT_CODE_UPC_LABEL = "customwarehousing.consignment.entry.product.code_upc";
public static final String PRODUCT_NAME_LABEL = "customwarehousing.consignment.entry.product.name";
public static final String QUANTITY_LABEL = "customwarehousing.consignment.entry.quantity";
@Override
public void render(final Listcell listcell, final ListColumn listColumn, final Object entry,
final DataType dataType, final WidgetInstanceManager widgetInstanceManager) {
Label consignmentCode = new Label(((ConsignmentModel) entry).getCode());
listcell.appendChild(consignmentCode);
Popup tooltipPopup = new Popup();
Vlayout tooltipLabelAndItems = new Vlayout();
Listbox tooltipContainer = new Listbox();
tooltipContainer.setWidth(CONTAINER_WIDTH);
Listhead header = renderHeaderCells();
tooltipContainer.appendChild(header);
renderItems(tooltipContainer, (ItemModel) entry);
tooltipLabelAndItems.appendChild(tooltipContainer);
tooltipPopup.appendChild(tooltipLabelAndItems);
tooltipPopup.setId(((ItemModel) entry).getPk().getLongValueAsString());
listcell.appendChild(tooltipPopup);
addEventListener(consignmentCode, tooltipPopup);
fireComponentRendered(tooltipPopup, listcell, listColumn, entry);
fireComponentRendered(listcell, listColumn, entry);
}
/**
* Method to add on mouse hover and on mouse out event
* @param label evencustom to be added to label object
* @param tooltipPopup tooltip pop up object
*/
private void addEventListener(final Label label, final Popup tooltipPopup) {
label.addEventListener("onMouseOver", event -> tooltipPopup.open(label, "before_start"));
label.addEventListener("onMouseOut", event -> tooltipPopup.close());
}
/**
* Method to set the product details which will be displayed in the tooltip on the hover event
* @param tooltipContainer tooltip container which contains product related information
* @param itemModel row object on which event will be done
*/
private void renderItems(final Listbox tooltipContainer, final ItemModel itemModel) {
ConsignmentModel consignmentModel = (ConsignmentModel) itemModel;
consignmentModel.getConsignmentEntries().forEach(consignmentEntry -> {
Listitem entry = new Listitem();
ProductModel product = consignmentEntry.getOrderEntry().getProduct();
renderProductCodeAndUPC(entry, product);
Listcell nameCell = new Listcell(product.getName());
UITools.modifySClass(nameCell, HEADER_CODEUPC_SCSS, true);
entry.appendChild(nameCell);
Listcell quantityCell = new Listcell(consignmentEntry.getQuantity().toString());
UITools.modifySClass(quantityCell, HEADER_QTY_SCSS, true);
entry.appendChild(quantityCell);
tooltipContainer.appendChild(entry);
});
}
/**
* Set the product code and UPC in the container
* @param entry list item object
* @param product product model object
*/
private void renderProductCodeAndUPC(final Listitem entry, final ProductModel product) {
Listcell codeAndUPCCell = new Listcell();
Vlayout codeAndUPCContainer = new Vlayout();
Label code = new Label(product.getCode());
Label upc = new Label(product.getUpc());
codeAndUPCContainer.appendChild(code);
codeAndUPCContainer.appendChild(upc);
codeAndUPCCell.appendChild(codeAndUPCContainer);
UITools.modifySClass(codeAndUPCCell, HEADER_CODEUPC_SCSS, true);
entry.appendChild(codeAndUPCCell);
}
/**
* Set the header of product details to display the tooltip content in table structure
* @return list head object which contains tooltip header structure and name
*/
private Listhead renderHeaderCells() {
Listhead header = new Listhead();
Listheader codeAndUPCHeader = new Listheader(Labels.getLabel(PRODUCT_CODE_UPC_LABEL));
Listheader productNameHeader = new Listheader(Labels.getLabel(PRODUCT_NAME_LABEL));
Listheader quantityHeader = new Listheader(Labels.getLabel(QUANTITY_LABEL));
header.appendChild(codeAndUPCHeader);
UITools.modifySClass(codeAndUPCHeader, HEADER_CODEUPC_SCSS, true);
header.appendChild(productNameHeader);
UITools.modifySClass(productNameHeader, HEADER_CODEUPC_SCSS, true);
header.appendChild(quantityHeader);
UITools.modifySClass(quantityHeader, HEADER_QTY_SCSS, true);
return header;
}
}

：：：：弹簧文件更改：：：

bean入口

<alias name="customListViewWithToolTipRender" alias="produccustomToolTipRenderer"/>
<bean id="customListViewWithToolTipRender" class="custom.backoffice.renderer.CustomListViewWithTooltipRenderer" />

后台配置xml文件更改

<context type="Consignment" component="warehousingbackofficelistview" merge-by="module">
<list:list-view xmlns:list="http://www.hybris.com/cockpitng/component/listView">
<list:column qualifier="order.code" label="warehousingbackoffice.consignment.order.number" merge-mode="replace" width="100px"/>
<list:column qualifier="code" label="warehousingbackoffice.consignment.consignmentnumber" spring-bean="produccustomToolTipRenderer" merge-mode="replace"/>
</list:list-view>
</context>