How to load multiple widgets on click in backoffice

[former_member632070]

I am trying to display two widgets after a specific navigation node is clicked on (in Backoffice). Currently I am able to view one widget but would like to view both.

Here is general idea of how I have configured it so far. It works fine as expected but only displays one widget.

In the *-widgets.xml I have defined my two widgets along with condition evaluator and widget connections.

 <widget-extension widgetId="mainSlot">
     <widget id="my_condition_evaluator" widgetDefinitionId="com.hybris.cockpitng.conditionevaluator"
                                                   slotId="cockpitWidgetChildrenInvisible" template="false">
 
         <widget id="my_prop_extractor" widgetDefinitionId="com.hybris.cockpitng.widgets.common.propextractor"
                                                                     slotId="cockpitWidgetChildrenInvisible" template="false">
             <setting key="expression" type="String" value="id"></setting>
             <setting key="socketDataType_$T" type="String" value="java.lang.String"></setting>
             <setting key="widgetStyleAttribute" type="String" value=""></setting>
             <setting key="widgetStyleClass" type="String" value=""></setting>
             <virtual-sockets />
         </widget>
         <setting key="expression" type="String" value="#root.id EQ 'Display Widgets'"></setting>
         <setting key="socketDataType_$T" type="String" value="com.hybris.backoffice.navigation.NavigationNode"></setting>
         <setting key="widgetStyleAttribute" type="String" value=""></setting>
         <setting key="widgetStyleClass" type="String" value=""></setting>
         <virtual-sockets />
     </widget>
 </widget-extension>
 
 
 <widget-extension widgetId="backoffice_content_container">
     <widget id="myFirstWidget">
         ...
     </widget>
     <widget id="mySecondWidget">
         ...
     </widget>
 </widget-extension>
 
 <widget-connection sourceWidgetId="explorerTree"  outputId="nodeSelected" targetWidgetId="my_condition_evaluator" inputId="input" />
 <widget-connection sourceWidgetId="my_condition_evaluator" outputId="true" targetWidgetId="my_prop_extractor" inputId="genericInput" />
 <widget-connection sourceWidgetId="my_prop_extractor" outputId="genericOutput" targetWidgetId="myFirstWidget" inputId="refresh"/>
 <!-- The second widget is displayed, but I would like to view both. -->
 <widget-connection sourceWidgetId="my_prop_extractor" outputId="genericOutput" targetWidgetId="mySecondWidget" inputId="refresh"/>

I know the second widget is the last one to loaded so it is the one that is being displayed. But is there a way to display both together on single page/view. Simply just one following the other?

Any input is appreciated!

[former_member625836]

Hi TS,

Before I go further into details, I need to assume that your backoffice_content_container extension is just to show an idea, as both of added widgets ( myFirstWidget and mySecondWidget) lacks information about what slot they should be put to (check if it is perspectives in your case). But if so, then there is no need of showing us property extractor and connections to sockets that are unknown to us ( refresh sockets of myFirstWidget and mySecondWidget).

When it comes to the problem - looking at your meshup, nothing should be displayed. To achieve what you want, you need to do the following:

• use one of existing layouts to arrange your two widgets

• put used layout widget on perspectives slot of backoffice_content_container and id equal to explorer tree node's id (i.e. my_new_two_widgets)

• extend explorerTreeSelectionProxy by adding new virtual output socket (let's call it myNewView) and specifying an expression for it ( myNewView_expression setting) that would return true for your node (i.e. #root.id EQ 'my_new_two_widgets)

• create a connection between explorerTreeSelectionProxy's new output socket ( myNewView in this example) and backoffice_content_container's input socket called selectPerspective

I don't know what SAP Customer Experience you are using, but a solution I provided works since 6.5 (this is when explorerTreeSelectionProxy was introduced). If you are using some older version, then the case is far more difficult, as it requires in fact massive changes in Administration cockpit meshup.

Cheers, Jacek

[former_member632070]

yes, sorry this was just a general idea of my setup. But yes I should have included from beginning to be more specific my two widgets both have: slotId="perspectives" template="true" I will go through your comments and try what you suggested. Thanks!

[former_member625836]

template="false" I hope :)

[former_member632070]

I am new to Hybris and using version 6.6. Do you know of any documentation on "explorerTreeSelectionProxy" or links? Was looking around online and SAP site but could not find much. Just trying to follow a bit from your comments but having little difficulty. Would like to understand a bit more.

[former_member632070]

in regards to bullet point

• put used layout widget on perspectives slot of backoffice_content_container and id equal to explorer tree node's id (i.e. my_new_two_widgets)

What is the "id" you are referring to here? The widgets are already in backoffice_content_container with slodId="perspectives".

[former_member625836]

There are two ids you need to align - one comes from type-node element in cockpit-config.xml and the second one comes from a widget element in widgets.xml (you add the layout widget onto a slot of backoffice_content_container but in the same time you define an id of this layout, i.e. <widget id="collectionPreview" widgetDefinitionId="com.hybris.cockpitng.widgets.common.collectionPreview" slotId="list" template="false">.

[former_member625836]

I don't think so - it is just a usage of existing widgets. Please try reading about Multiplexer widget - it should help a little bit. In general: a node selected in explorer tree goes through multiplexer that checks whether there is a virtual socket with expression that returns true for received node. If so - the node is sent via this socket.