Inputfield::addHeaderAction()
Add header action
This adds a clickable icon to the right side of the Inputfield header.
There are three types of actions: 'click', 'toggle' and 'link'. The 'click'
action simply triggers your JS event whenever it is clicked. The 'toggle' action
has an on/off state, and you can specify the JS event to trigger for each.
This function will automatically figure out whether you want a click,
toggle or 'link' action based on what you provide in the $settings argument.
Below is a summary of these settings:
Settings for 'click' or 'link' type actions
icon(string): Name of font-awesome icon to use.tooltip(string): Optional tooltip text to display when icon hovered.event(string): Event name to trigger in JS when clicked ('click' actions only).href(string): URL to open ('link' actions only).modal(bool): Specify true to open link in modal ('link' actions only).
Settings for 'toggle' (on/off) type actions
on(bool): Start with the 'on' state? Default:falseonIcon(string): Name of font-awesome icon to show for on state.onEvent(string): JS event name to trigger when toggled on.onTooltip(string): Tooltip text to show when on icon is hovered.offIcon(string): Name of font-awesome icon to show for off state.offEvent(string): JS event name to trigger when toggled off.offTooltip(string): Tooltip text to show when off icon is hovered.
Other/optional settings (applies to all types)
name(string): Name of this action (-_a-zA-Z0-9).parent(string): Name of parent action, if this action is part of a menu.overIcon(string): Name of font-awesome icon to show when hovered.overEvent(string): JS event name to trigger when mouse is over the icon.downIcon(string): Icon to display when mouse is down on the action icon 3.0.241+.downEvent(string): JS event name to trigger when mouse is down on the icon 3.0.241+.cursor(string): CSS cursor name to show when mouse is over the icon.setAll(array): Set all of the header actions in one call, replaces any existing. Note: to get all actions, call the method and omit the $settings argument.
Settings for dropdown menu actions 3.0.241+
Note that menu type actions also require jQuery UI and /wire/templates-admin/scripts/main.js, both of which are already present in PW’s admin themes (AdminThemeUikit recommended). Requires ProcessWire 3.0.241 or newer.
icon(string): Icon name to use for dropdown toggle, i.e. 'fa-wrench'.tooltip(string): Optional tooltip to describe what the dropdown is for.menuAction(string): Action that toggles the menu to show, one of 'click' or 'hover' (default).menuItems(array): Definition of menu items, each with one or more of the following properties.label(string): Label text for the menu item (required).icon(string): Icon name for the menu item, if desired.callback(function|null): JS callback to execute item is clicked (not applicable in PHP).*event(string): JS event name to trigger when item is clicked.tooltip(string): Tooltip text to show when hovering menu item (title attribute).href(string): URL to go to when menu item clicked.target(string): Target attribute when href is used (i.e. "_blank").modal(bool): Open href in modal window instead?active(function|bool): Callback function that returns true if menu item active, or false.* if disabled. You can also directly specify true or false for this option.- NOTE 1: All
menuItemsproperties above are optional, except for 'label'. - NOTE 2: To use
callbackoractiveas functions, you must define your menu in JS instead. - NOTE 3: For examples see the addHeaderAction() method in /wire/templates-admin/scripts/inputfields.js
Available since version 3.0.240.
Usage
// basic usage
$array = $inputfield->addHeaderAction();
// usage with all arguments
$array = $inputfield->addHeaderAction(array $settings = []);Arguments
| Name | Type(s) | Description |
|---|---|---|
$settings (optional) | array | Specify array containing the appropriate settings above. |
Return value
arrayReturns all currently added actions.
Inputfield methods and properties
API reference based on ProcessWire core version 3.0.252