Adding Custom Action Button in Backoffice of SAP Hybris

Actions are special components provided by the Backoffice Framework that you can use inside your widgets. They are used to trigger an action, depending on the state of widget model property. As we will see in our example that out action button is enabled when a certain property is true in our item.

This is a simple guide to creating and adding an action in our widget. There is a lot more we can do and configure, for more information, view the documentation.

One of our client’s requirement was to send emails to B2B Customers that are disabled, so that the Customers can register and enable their account. To do this, the first step was to be able to select multiple B2B Customers at a time so that we can send registration invitation to multiple Customers at a time. I have written about How to Make Search Result Widget in Backoffice Multi-Select, view that if you need to how to do that.

In this post, we will create a new button, that we will use to send registration emails to the selected Customers that are dsabled.

Here is the requirements:

1. Create an action button that is only enabled when the selected B2B Customer(s) are disabled.
   1. Publish an email event for the disabled Customers.
2. Add the action button to the List Vew Action of B2B Customer.

Creating the Action Button Definition

 Here are the steps:

Create a definition.xml file in the following directory:

<NAME_OF_EXTENSION>/backoffice/resources/widgets/actions/<NAME_OF_ACTION>

Here is my definition.xml:

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

	<name>Send Registration Invite</name>
	<description>Send Registration Invite to the disabled customers</description>
	<author>Me</author>
	<version>0.1</version>

	<actionClassName>com.myextension.actions.SendRegistrationInviteAction</actionClassName>

	<inputType>java.lang.Object</inputType>
	<outputType>java.lang.Object</outputType>

	<iconUri>icons/send_registration_invite.png</iconUri>
	<iconDisabledUri>icons/send_registration_invite_disabled.png</iconDisabledUri>
</action-definition>

The actionClassName tag defines the implementation class. inputType and outputType tags are optional. The respective icons will be used depending upon whether the icon is disabled or enabled. Know that the images must be stored in the following directory: <NAME_OF_EXTENSION>/backoffice/resources/widgets/actions/<NAME_OF_ACTION>

Creating the Action Implementation Class

One thing to note is that Actions do NOT have access to the Spring application context. Therefore, if we need to inject Spring bean into our actioon, we can use the @Resource annotation.

Our implementation class must implement CockpitAction<I, O> interface. Therefore, there is only one method that we must implement (the perform(ActionContext<I>) method, the rest have default implementations), but in our example, we will override all of the methods.

 This is the snippet of the implementation:

package com.myextenstion.actions;

import com.myproject.core.event.RegistrationInviteEvent;
import com.hybris.cockpitng.actions.ActionContext;
import com.hybris.cockpitng.actions.ActionResult;
import com.hybris.cockpitng.actions.CockpitAction;
import de.hybris.platform.b2b.model.B2BCustomerModel;
import de.hybris.platform.commerceservices.event.AbstractCommerceUserEvent;
import de.hybris.platform.commerceservices.security.SecureToken;
import de.hybris.platform.commerceservices.security.SecureTokenService;
import de.hybris.platform.core.model.user.CustomerModel;
import de.hybris.platform.servicelayer.event.EventService;
import de.hybris.platform.servicelayer.i18n.CommonI18NService;
import de.hybris.platform.servicelayer.model.ModelService;
import de.hybris.platform.site.BaseSiteService;
import de.hybris.platform.store.services.BaseStoreService;
import org.zkoss.zul.Messagebox;

import javax.annotation.Resource;
import java.util.HashSet;

public class SendRegistrationInviteAction implements CockpitAction<Object, Object> {

    @Resource
    SecureTokenService secureToken;

    @Resource(name = "modelService")
    private ModelService modelService;

    @Resource
    private EventService eventService;

    @Resource
    private BaseStoreService baseStoreService;

    @Resource
    private BaseSiteService baseSiteService;

    @Resource
    private CommonI18NService commonI18NService;

    @Override
    public ActionResult<Object> perform(ActionContext<Object> actionContext) {
        HashSet<Object> dataList = (HashSet<Object>) actionContext.getData();

        if(dataList.iterator().next() instanceof B2BCustomerModel) {
           for (Object o : dataList) {
               B2BCustomerModel b2BCustomerModel = (B2BCustomerModel) o;

               if(b2BCustomerModel.isLoginDisabled()) {
                   final SecureToken token = new SecureToken(b2BCustomerModel.getUid(), System.currentTimeMillis());
                   final String encryptedToken = secureToken.encryptData(token);

                   b2BCustomerModel.setToken(encryptedToken);

                   modelService.save(b2BCustomerModel);
                   eventService.publishEvent(initializeEvent(new RegistrationInviteEvent(encryptedToken), b2BCustomerModel));
               }   
           }
           Messagebox.show(actionContext.getLabel("action.send.registration.invite.sent"),
               actionContext.getLabel("action.send.registration.invite.sent.title"), Messagebox.OK, Messagebox.INFORMATION);
           return new ActionResult<Object>(ActionResult.SUCCESS);
        }   

        Messagebox.show(dataList + " (" + ActionResult.ERROR + ")",
            actionContext.getLabel("action.send.registration.invite.sent.title"), Messagebox.OK, Messagebox.ERROR);
        return new ActionResult<Object>(ActionResult.ERROR);
    }

    @Override
    public boolean canPerform(ActionContext<Object> ctx) {
        HashSet<Object> dataList = (HashSet<Object>) ctx.getData();
        if(dataList != null) {
            boolean canPerform = false;
            for (Object o : dataList) {
                B2BCustomerModel b2bCustomer = (B2BCustomerModel) o;
                if(b2bCustomer.isLoginDisabled()) {
                    canPerform = true;

                    break;
                }
            }
            return canPerform && dataList.iterator().next() instanceof B2BCustomerModel;
        }

        return false;
    }

    @Override
    public boolean needsConfirmation(ActionContext<Object> ctx) {
        return true;
    }

    @Override
    public String getConfirmationMessage(ActionContext<Object> ctx) {
        return ctx.getLabel("action.send.registration.invite.confirm");
    }

    protected AbstractCommerceUserEvent initializeEvent(final AbstractCommerceUserEvent event, final CustomerModel customerModel) {

        event.setBaseStore(baseStoreService.getCurrentBaseStore());
        // Get the (first) site this eay because we are publishing this event from the Backoffice and Backoffice does NOT have a 'Single Current' site it is associated with
        event.setSite(baseSiteService.getAllBaseSites().iterator().next());
        event.setCustomer(customerModel);
        event.setLanguage(commonI18NService.getCurrentLanguage());
        event.setCurrency(commonI18NService.getCurrentCurrency());

        return event;
    }
}

We have added localized strings for the Messagebox. So, if you want to localize an action to display some labels in different languages, we need to define these labels in the relevant path. In the directory myextension/backoffice/resources/widgets/actions/<NAME_OF_ACTION>, create labels folder with labels.properties and labels_<ISO_CODE>.properties files.

Here is my labels_en.properties:

action.send.registration.invite.confirm=Are you sure you want to email registration link to the selected Customers?
action.send.registration.invite.sent=Registration email(s) sent.
action.send.registration.invite.sent.title=Registration Invite Status

With this, we will publish our email event once we have a disabled B2B Customer selected and we click the action button.

Adding the Action Button to the Widget

Add the following code to <yourProject>-backoffice-config.xml:

<context merge-by="module" type="B2BCustomer" component="listviewactions" parent="Customer">
    <y:actions xmlns:y="http://www.hybris.com/cockpit/config/hybris">
         <y:group qualifier="common">
              <y:label>actiongroup.common</y:label>
              <y:action action-id="com.<site>.registration.action.sendregistrationinvite" property="selectedObjects" />
              <y:action action-id="com.hybris.cockpitng.action.delete" property="selectedObjects" triggerOnKeys="#del"/>
              <y:action action-id="com.hybris.cockpitng.action.create" property="pageable.typeCode" />
              <y:action action-id="com.hybris.cockpitng.listview.action.export.csv" property="exportColumnsAndData"/>
         </y:group>
    </y:actions>
</context>

Reset the configuration from Backoffice Orchestrator and see the results:

We are done with this implementation. Make sure to have an event listener for the email event we published!

To view all of our posts on Backoffice in SAP Hybris, please click here.