How do I link my widget to explorer tree in backoffice

[Former Member]

Hello,

I just create a new widget in backoffice. I need to add a link to this widget in explorer-tree and open it in the center slot.

I already read a lot of other questions with a similar subject although I didn't find any step by step answer for this and I think a lot o people are having the same problem.

marketplace.zul

 <widget xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://www.zkoss.org/2005/zul">
     <window id="example-window" title="Test">
         <div>Hello World<M/div>
     </window>
 </widget>

My widget definition is:

 enter code here <?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
 <widget-definition id="br.com.fh.fliegercommerce.marketplace" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://www.hybris.com/schema/cockpitng/widget-definition.xsd">
     <name>MarketPlace</name>
     <description>Open a Marketplace view in backoffice so vendors can manage their deliveries and stock</description>
     <defaultTitle>MarketPlace</defaultTitle>
     <author>Rafael Faria</author>
     <version>0.1</version>
     <view src="marketplace.zul" />
 </widget-definition>

My explorer tree config is:

 <context principal="admin" component="explorer-tree" merge-by="module">
         <n:explorer-tree>
             <n:navigation-node id="Vendor Portal">
                 <n:type-node id="Products" code="Product" merge-mode="append"/>
                 <n:type-node id="Deliveries" code="MarketplaceDeliveryOrder" merge-mode="append"/>
                 <n:type-node id="marketplace"/>   --> THIS IS MY WIDGET
             </n:navigation-node>
         </n:explorer-tree>
     </context>

I've tried this in my widgets.xml

         <widget-connection sourceWidgetId="explorerTree"
     outputId="nodeSelected" targetWidgetId="marketplaceEvaluator"
     inputId="input" />


     <widget-extension widgetId="backoffice_content_container">
             <widget id="sampleBorderLayout" widgetDefinitionId="com.hybris.cockpitng.defaultportalwidget"
                     slotId="perspectives"
                     title="Marketplace" template="false">
                     <widget id="marketplace"
                             widgetDefinitionId="br.com.fh.fliegercommerce.marketplace"
                             slotId="children"
                             title="Market place" template="false">
                     </widget>
             </widget>
     </widget-extension>

     <widget-extension widgetId="explorerTree">
             <widget id="marketplaceEvaluator" widgetDefinitionId="com.hybris.cockpitng.conditionevaluator"
                     slotId="cockpitWidgetChildrenInvisible" template="false">
                     <setting key="expression" type="String">#root.id EQ
                             'marketplace'
                     </setting>
                     <setting key="socketDataType_$T" type="String">com.hybris.backoffice.navigation.NavigationNode
                     </setting>
                     <virtual-sockets/>
             </widget>
     </widget-extension>

I know there is a lot of stuff missing, but I don't know what. Does anyone can help with a step by step processo add a widget to explorer tree?

[Former Member · Accepted solution]

Well, after a lot of research I found way and I'm going to post here in case someone else needs this or has a better solution.

So I had platform backoffice in my local extension.

I had almost everything right, I just had to change my widgets.xml.

In platform backoffice we have an evaluator linked to explorer tree explorerTreeConditionEvaluator. It filter all TypeNode (the selected node of explorer tree) and sends it to advanced search. So I change the test expression:

from:#root instanceof T(com.hybris.cockpitng.tree.node.TypeNode)

to: #root instanceof T(com.hybris.cockpitng.tree.node.TypeNode) AND #root.id != 'Marketplace'

after that a create another evaluator to test typenode and marketplace id.

Once I got this done I have to link this evaluator to explorer tree and the center slot by doing this

     <widget-connection sourceWidgetId="marketplaceEvaluator" outputId="true" targetWidgetId="marketPlacePropertyExtractor" inputId="genericInput"/>
     <widget-connection sourceWidgetId="marketPlacePropertyExtractor" outputId="genericOutput" targetWidgetId="backoffice_content_container" inputId="selectPerspectiveById"/>

After that I was able to click in the link that I added in my explorer tree in *-config.xml.

Here are my files, I hope they will help.

*-widget.xml

 <widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://www.hybris.com/schema/cockpitng/widgets.xsd">
         <widget-extension widgetId="backoffice_content_container">
                 <widget id="marketplaceContainer" widgetDefinitionId="com.hybris.cockpitng.defaultportalwidget"
                         slotId="perspectives"
                         title="Marketplace" template="false">
                         <widget id="marketplace"
                                 widgetDefinitionId="br.com.fh.fliegercommerce.marketplace"
                                 slotId="children"
                                 title="Marketplace" template="false">
                         </widget>
                 </widget>
         </widget-extension>
         <widget-extension widgetId="explorerTree">
                 <widget id="marketplaceEvaluator" widgetDefinitionId="com.hybris.cockpitng.conditionevaluator"
                         slotId="cockpitWidgetChildrenInvisible" template="false">
                         <widget id="marketPlacePropertyExtractor"
                                 widgetDefinitionId="com.hybris.cockpitng.widgets.common.propextractor"
                                 slotId="cockpitWidgetChildrenInvisible"
                                 template="false">
                                 <setting key="expression" type="String" value="'marketplaceContainer'"></setting>
                                 <setting key="socketDataType_$T" type="String" value="java.lang.String"></setting>
                         </widget>
                         <setting key="expression" type="String">#root instanceof T(com.hybris.cockpitng.tree.node.TypeNode) AND #root.id == 'Marketplace'</setting>
                         <setting key="socketDataType_$T" type="String">com.hybris.backoffice.navigation.NavigationNode</setting>
                         <virtual-sockets/>
                 </widget>
         </widget-extension>
         <widget-extension widgetId="explorerTreeConditionEvaluator" widgetDefinitionId="com.hybris.cockpitng.conditionevaluator" slotId="cockpitWidgetChildrenInvisible" template="false">
                 <widget id="explorerTreePropExtractor" widgetDefinitionId="com.hybris.cockpitng.widgets.common.propextractor" slotId="cockpitWidgetChildrenInvisible" template="false">
                         <setting key="expression" type="String">name</setting>
                         <setting key="socketDataType_$T" type="String">java.lang.String</setting>
                         <setting key="widgetStyleAttribute" type="String"></setting>
                         <setting key="widgetStyleClass" type="String"></setting>
                         <virtual-sockets/>
                 </widget>
                 <setting key="expression" type="String">#root instanceof T(com.hybris.cockpitng.tree.node.TypeNode) AND #root.id != 'Marketplace'</setting>
                 <setting key="socketDataType_$T" type="String">java.lang.Object</setting>
                 <setting key="widgetStyleAttribute" type="String"></setting>
                 <setting key="widgetStyleClass" type="String"></setting>
                 <virtual-sockets/>
         </widget-extension>
         <widget-connection inputId="input" outputId="nodeSelected" sourceWidgetId="fliegerbackoffice-explorer-tree" targetWidgetId="fliegerbackoffice-tree-node-adapter"/>
         <widget-connection inputId="genericInput" outputId="true" sourceWidgetId="fliegerbackoffice-tree-node-adapter" targetWidgetId="fliegerbackoffice-typecode-extractor"/>
         <widget-connection inputId="genericInput" outputId="true" sourceWidgetId="fliegerbackoffice-tree-node-adapter" targetWidgetId="fliegerbackoffice-search-enabler"/>
         <widget-connection inputId="genericInput" outputId="false" sourceWidgetId="fliegerbackoffice-tree-node-adapter" targetWidgetId="fliegerbackoffice-search-disabler"/>
         <widget-connection inputId="type" outputId="genericOutput" sourceWidgetId="fliegerbackoffice-typecode-extractor" targetWidgetId="fliegerbackoffice-search-logic"/>
         <widget-connection inputId="enabled" outputId="genericOutput" sourceWidgetId="fliegerbackoffice-search-enabler" targetWidgetId="fliegerbackoffice-text-search"/>
         <widget-connection inputId="enabled" outputId="genericOutput" sourceWidgetId="fliegerbackoffice-search-disabler" targetWidgetId="fliegerbackoffice-text-search"/>
         <widget-connection inputId="searchtext" outputId="query" sourceWidgetId="fliegerbackoffice-text-search" targetWidgetId="fliegerbackoffice-search-logic"/>
         <widget-connection inputId="pageable" outputId="pageable" sourceWidgetId="fliegerbackoffice-search-logic" targetWidgetId="fliegerbackoffice-simple-list"/>
         <widget-connection sourceWidgetId="explorerTree" outputId="nodeSelected" targetWidgetId="marketplaceEvaluator"  inputId="input" />
         <widget-connection sourceWidgetId="marketplaceEvaluator" outputId="true" targetWidgetId="marketPlacePropertyExtractor" inputId="genericInput"/>
         <widget-connection sourceWidgetId="marketPlacePropertyExtractor" outputId="genericOutput" targetWidgetId="backoffice_content_container" inputId="selectPerspectiveById"/>
 </widgets>
 

explorer tree in *-config.xml

         <context principal="admin" component="explorer-tree" merge-by="module">
             <n:explorer-tree>
                 <n:navigation-node id="Vendor Portal">
                     <n:type-node id="Products" code="Product" merge-mode="append"/>
                     <!--<n:type-node id="Deliveries" code="MarketplaceDeliveryOrder" merge-mode="append"/>-->
                     <n:type-node id="Marketplace"/>
                 </n:navigation-node>
             </n:explorer-tree>
         </context>
 

[former_member672992 · Accepted solution]

I want to achieve similar and following the above could able to create a new widget but after clicking on custom node clicking on other nodes makes it no effect. The editor keep my custom widget stick to center slot.

[stjepanjakovac]

It is absolutely ridiculous that a basic functionality such as displaying a widget on button click is as convoluted as the accepted answer shows.

The claim in the Backoffice documentation that it allows for rapid development is laughable. Without a shadow of a doubt, this is the worst framework I have ever worked with. The documentation is atrocious and the development experience has been terrible so far. I wouldn't wish it upon my worst enemies.

[Former Member]

Hi,

in general your widget requires input sockets to be defined in the definition.xml so that it will be possible to pass data in.

Most probably it will also require a controller to somehow react to the data inputs. Please refer to this documentation for more details.

Cheers, Wojtek

[Former Member]

Hello Wojtek,

Thanks for your anwser, but I don't want to pass data to my widget, I just want to display it in center slot in backoffice by clicking in a link in explorer tree.

I have platformbackoffice in my local extension, I started to study this extension and after a lot of testing I found a way to do what I want, I'll post here in case someone else is also having trouble with this.

[krishnanagavalli]

Hello Wojtek,

My requirement is to filter the results of a particulate tree node.

For example I want new node under the explore tree with "SP Orders" and up on clicking on that I want to list all the order where isSpecialOrder == true. (speicalOrder is an attribute in Order model).

Can you please provide some reference to it?