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!
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
|
||||||||||||||||||||
title |
string | (optional) Provide an action title for the dropdown if no $target was defined. |