Action Mapper Library

Maps a dropdown button action item event to another page element ($button). This library must be used to quickly redirect user actions to existing but hidden UI elements like table row actions. When a callback function is passed as an argument the action item will override the default behaviour.

You will need to provide the full URL in order to load this library as a dependency to a module:

gx.controller.module(
  'my_custom_page',

  [
     gx.source + '/libs/action_mapper'
  ],

  function(data) {
     // Module code ... 
  });

Example

The HTML for the target button:

<button id="button1">Button 1</button>

The JavaScript code that will map an action to to a button dropdown widget for the target button:

// Define a custom callback function.
function customCallbackFunc(event) {
    console.log('Function called!');
};

// Map an event to a new dropdown action item.
var options = {
  // A new action item will be created in this widget.
  $dropdown: $('#button-dropdown'), 

  // Target element will be triggered when the user clicks the dropdown action item.  
  $target: $('#target-button'), 
  
  // Target event name to be triggered.
  event: 'click',   
  
  // (optional) Provide a function to override the default event handler.
  callback: customCallbackFunc, 
  
  // (optional) Add a custom action title for the dropdown button.
  title: 'Action Title' 
}

jse.libs.action_mapper.bind(options);

By clicking on the "Button 1" you will receive a "Function called!" in the console!

Source:

Methods

(static) bind(options, title)

Binds the event

This method is the initializing point for all event bindings.

Parameters:
Name Type Description
options object

Contains all elements, function and event description

Properties
Name Type Attributes Description
$dropdown string

Selector for the button dropdown element (div).

$target string <optional>

(optional) Selector for the target element of the mapping.

event string

The name of the event. The event will be triggered on source and destination element (e.g. "click", "mouseleave").

callback function <optional>

(optional) Function that will be called when the event of the destination element is triggered. OVERWRITES THE ACTUAL EVENT FOR THE DESTINATION ELEMENT.

title string

(optional) Provide an action title for the dropdown if no $target was defined.

Source: