how to create button in List view in backoffice and once click on it should be open in new browser tab

[Former Member]

1. To create button in List view and once click on it should be open in new browser tab with corresponding link. Or

2. My field type is String. To provide href link for field in List view.

Please suggest me how to implement this.

Thanks.

[former_member437308 · Accepted solution]

Hello ,

In order to create button in ListView you have to customize CollectionBrowser by adding your own ListCell renderer.
Below I am showing you how to accomplish it on Product type in Administration cockpit.

1. Create cell renderer bean

     package org.training.widgets;
        
        public class ButtonCellRenderer extends AbstractWidgetComponentRenderer<Listcell, ListColumn, Object>
        {
            @Override
            public void render(final Listcell listcell, final ListColumn configuration, final Object data, final DataType dataType, final WidgetInstanceManager widgetInstanceManager)
            {
                final Button button = new Button();
                button.setLabel("Label");
                button.addEventListener(Events.ON_CLICK,event -> {
                    Executions.getCurrent().sendRedirect("http://google.com","_blank");
                });
                listcell.appendChild(button);
        
                fireComponentRendered(button, listcell, configuration, data);
            }
        }
    
   
   

2. Register bean in your extension-backoffice-spring.xml file

     <bean id="buttonCellRenderer" class="org.training.widgets.ButtonCellRenderer">
        </bean>
    
   
   

3. Assign that bean renderer for your qualifier (use @spring-bean attribute)

     <context type="Product" component="listview" merge-by="type">
            <list-view:list-view xmlns:list-view="http://www.hybris.com/cockpitng/component/listView">
                <list-view:column spring-bean="previewListCellRenderer" width="26px"/>
                <list-view:column qualifier="code"/>
                <list-view:column qualifier="name" spring-bean="buttonCellRenderer"/>
                <list-view:column qualifier="approvalStatus"/>
                <list-view:column qualifier="catalogVersion"/>
            </list-view:list-view>
        </context>
   
   
   

The customization details can be read on website https://help.hybris.com/1808/hcd/8b80155586691014b8a180a42610cdbc.html . The one obstacle what I see here is how to create new tab. I think that it may be browser specific. You have to investigate how handle it by ZK Framework.

Cheers Tomek

[Former Member · Accepted solution]

Thank you so much Tomasz for replying. I have tried this and it's working. Here I have taken list view it is creating new tab.

 <list-view:column qualifier="" spring-bean="buttonCellRenderer" label="label.name"/>