How to change color of custom button in ConfigurableFlow widget

[Former Member]

Dear Forum,

I customized the done button in configurable flow widget by changing the following config:

<wz:done

to

<wz:custom label="Done" handler="myHandler"

It works perfectly, except that the color of the button is changed (see attachment). Is there a way to change the color of the "Done" button back?

Thanks, Yang

[former_member1014349]

I faced a similar scenario as yours. So I needed to make my custom "Done" button look the one from OOTB (yellow in color). So I extended the ConfigurableFlowRenderer with my own renderer and changed the color of my button based on a custom label. Here is a sample code snippet for the same.

 /**
      * Hijack button creation to add custom styling (not an elegant solution, but the superclass is not meant to be
      * extended)
      * @param button
      * @param actionType
      */
     @Override
     protected void toggleButtonActiveState(Button button, AbstractActionType actionType) {
 
         LOG.info("======= Customized button ========");
 
         if ("hillman.backoffice.configurableflow.customer.done".equals(button.getLabel())) {
             button.setSclass("yw-btn-primary");
         }
         super.toggleButtonActiveState(button, actionType);
     }

Also attached is the bean definition in -backoffice-spring.xml

 <alias name="hillmanConfigurableFlowRenderer" alias="configurableFlowRenderer" />
     <bean id="hillmanConfigurableFlowRenderer" class="com.hillmangroup.backoffice.widgets.configurableflow.renderer.HillmanConfigurableFlowRenderer" parent="defaultConfigurableFlowRenderer" scope="prototype"/>

And that's it. You just need to localize this label in the backoffice and you're set. Hope this helps. Cheers !

[Former Member]

Hi , I am facing the same issue for a custom button in backoffice widget . How was the issue finally resolved. Could you please help .

[Former Member]

Hi Yang,

Can you give me some doc or article address to learn the tag（wz）?

Many thanks for you

Regards

Devin

[Former Member]

here you are: https://help.hybris.com/6.3.0/hcd/8b87f564866910148793a7aec951a38f.html

good luck!

[former_member625836]

Hi Yang,

You may always do it by custom CSS. You can find more about how to do this in documentation.

Cheers, Jacek

[Former Member]

Hi Jacek, Thanks for reply. That is a step forward :) Since I need to change the color of only one button, the "id" of the button is needed. Is there any guidelines to find the id?

Thanks, Yang

[former_member625836]

Hi,

I'm afraid there is no such possibility right now. You would have to extend configurableFlowRenderer bean (`com.hybris.cockpitng.widgets.configurableflow.renderer.ConfigurableFlowRenderer` class).

Cheers, Jacek

[former_member1014349]

Do you know the "bean" name for this class ? I wasn't able to find it..

[former_member1014349]

nvm, I got it. Posted my answers down below. :)