How to associate a widget on submit button in Backoffice?

[Former Member]

I have created a custom submit button for backoffice and on click event of button a popup should appear . Popup should have a text field to enter value and a OK button . Widget has been created for popup but i am not sure how to configure the widget with the event on_click . How can i do this ? or do we have some other approach for this

[former_member1320010]

Hi ,

This is how we linked an action button to a wizard or a popup where you can enter value or even look at read only value . The button or action in the below example is on the order entry item. You have step1 and step2 if you want else only step1 based on the configuration you provide in backoffice-config.xml

TestAction.java

 public class TestAction extends AbstractComponentWidgetAdapterAware implements CockpitAction<OrderEntryModel, String> {
 @Override
        public ActionResult<String> perform(final ActionContext<OrderEntryModel> ctx) {
         Map<String, Object> outputCtx = new HashMap<>();
         outputCtx.put(ConfigurableFlowContextParameterNames.TYPE_CODE.getName(),  TestWizard.class.getName());
         sendOutput("contextMap", outputCtx);

         ActionResult<String> result = new ActionResult<>("success");
         result.setStatusFlags(EnumSet.of(StatusFlag.OBJECT_MODIFIED, StatusFlag.OBJECT_PERSISTED));
         return result;
        }

  }

TestWizard.java

 public class TestWizard {
 private Double testValue;
 // with getter setter

 // add validate if u want
 validate()
 }

TestWizardHandler.java

 public class TestWizardHandler implements FlowActionHandler {
 @Override
 public void perform(CustomType customType, FlowActionHandlerAdapter adapter, Map<String, String> parameters) {
 TestWizard wizard = adapter.getWidgetInstanceManager().getModel().getValue("testWizard", TestWizard.class);
 // do you action
 wizard.getTestValue();
 }
 }

definiton.xml

 <action-definition id="com.testAction"    
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:noNamespaceSchemaLocation="http://www.hybris.com/schema/cockpitng/action-definition.xsd">

 <name>test</name>
 <description>test</description>

 <actionClassName>com.TestAction</actionClassName>

 <inputType>com.TestWizard</inputType>
 <outputType>java.lang.Object</outputType>
 <sockets>
     <output id="wizardCtx" type="java.util.Map"/>
 </sockets>
 
 <settings>
      <setting key="viewMode" default-value="iconOnly"/><!-- iconOnly, textOnly, iconAndText -->
 </settings>

 <iconUri>icons/test.png</iconUri>
 <iconHoverUri>icons/test_hover.png</iconHoverUri>
 <iconDisabledUri>icons/test_icon_disabled.png</iconDisabledUri>

 </action-definition>

*backoffice*widgets.xml

 <widget-connection sourceWidgetId="STUB_com.testAction outputId="contextMap" targetWidgetId="configurableFlow" inputId="context"/>    

*backoffice*config.xml

 <context merge-by="type" type="OrderEntry" component="collectioneditorareaactions">
     <y:actions xmlns:y="http://www.hybris.com/cockpit/config/hybris">
         <y:group qualifier="common">
             <y:action action-id="com.testAction" property="currentObject" />
         </y:group>
     </y:actions>
 </context>
 <context type="com.testWizard" component="create-wizard">
     <wz:flow xmlns:wz="http://www.hybris.com/cockpitng/config/wizard-config" id="testWizard" title="test">
         <wz:prepare id="testWizardPrepare">
             <wz:initialize property="testWizard" template-bean="testWizard" />
             <wz:assign property="testWizard.testValue" value="ctx.testValue" />
         </wz:prepare>
         <wz:step id="step1" label="testWizard.save.label">
             <wz:content id="step1.content">
                 <wz:property qualifier="testWizard.testValue" />
             </wz:content>
             <wz:navigation id="step1.navigation">
                 <wz:cancel />
                 <wz:next visible="testWizard.validate()" default-target="step2" />
                 <wz:custom handler="testWizardHandler" label="testWizard.save.btn" />                    
             </wz:navigation>
         </wz:step>
         <wz:step id="step2" label="testWizard.step2.label">
             <wz:content id="step2.content">
                 <wz:property qualifier="testWizard.testValue" type="java.lang.Double" readonly="true" />
             </wz:content>
             <wz:navigation id="step2.navigation">
                 <wz:cancel />
                 <wz:back />
                 <wz:custom handler="testWizardHandler" label="testWizard.save.btn" />        
             </wz:navigation>
         </wz:step>
     </wz:flow>
  </context>    

[Former Member]

I am not sure how can we create a popup without widget.Can you help here ?

[former_member625836]

Not really - it all depends in what scope you are working. Creating popups in zk is rather simple: take a look at zk demo page.

[Former Member]

my submit button is an event , can we add a widget from here on click of button ?

 button.addEventListener(Events.ON_CLICK, new EventListener<Event>()
     {
         @Override
         public void onEvent(final Event event) throws Exception
         {
             //Associate widget here
         }
     }

[former_member625836]

If only you can change the implementation of this popup that it is not a widget, then I would just create it in click event handler and show.

If not, then you need to go with socket messaging and templates.

Cheers, Jacek

[Former Member]

you need to do this through sockets.

see https://help.hybris.com/6.2.0/hcd/8be2448886691014bf61e8730c819771.html

[Former Member]

Hi Shikha,

Do you know how to associate a widget inside onEvent method like how you described above in an event listener? I have a similar requirement and I have been unable to do so.

Your help will be highly appreciated.

Thanks, Ashish

[Former Member]

It sounds like you are assuming that a widget can do all the things that you have described, but they are separate items to do these things. Think the S in SOLID

Please refer to

Creating Widgets: https://help.hybris.com/6.2.0/hcd/8b97264b86691014951388c34e777844.html

Creating Actions: https://help.hybris.com/6.2.0/hcd/8b96d1a8866910149decb0eee2526cf1.html

[former_member625836]

Hi ,

There is not enough data for me to provide a concrete answer, yet I can see two possibilities:

• your custom submit button is an action and popup is a widget, then you would have to define an output socket for this action, add your widget into meshup as a template and then connect action's output with trigger input socket of this widget (please look for template="true" in widgets.xml for an example)

• your submit button is used in ConfigurableFlow as custom Done button, then I would not go with a widget, rather simple displaying a popup in logic of this custom button

Cheers, Jacek