Implementing Custom Actions

In some cases you might need to add extra functionality to UI elements created with Eko Studio. One example would be integrating with a 3rd party analytics service.

There are two recommended approaches to achieve this:

Extending the clickHandler method

Implement custom functionality by overriding the clickHandler method in your own component, which extends an EkoUIComponents.

MyButton.jsx

import EkoUIComponents from 'EkoUIComponents';

export default class MyButton extends EkoUIComponents.EkoDecisionButton {
    clickHandler() {
        let buttonId = this.props.guiId;
        doAnalyticsCall(buttonId);
    }
}

Using the clickHandler Prop

This method can be used if you wish to attach different functionality to multiple UI elements, or if you don’t want to alter existing component implementation. See the override documentation for more information on overriding component props.

in app.js

export default function onReady(player) {

    player.ui.override('button_dc8404', null, {
        clickHandler: function() {
            let buttonId = this.props.guiId;
            doAnalyticsCall(buttonId);
        }
    });

}

Using both approaches simultaneously is possible but discouraged. In such cases the overridden clickHandler will fire first, followed by the props-specified clickHandler