How configure reference search list-view of an entity in Sap Hybris

Question

I have to show an "info" icon in the ReferenceSearch ListView of an entity, which when hovering the mouse shows a tooltip with information(a table with a colum and row). How can I enable all this? Thanks a lot.

Answer 1

You can do it via just extending the AbstractWidgetComponentRenderer.

The below example is used to have a tooltip for consignment list view, on the hover of the mouse to consignment code you can see product details.

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;
    }
}

::::::::Spring file changes:::::::::::::::

bean entry

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

Backoffice Config xml file changes

<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>