How to modify toolbar items

This tutorial is for developers.

Toolbar item is every item displayed in our top bar or toolbar. For example, the save button, search, bulk edit, duplicate, export, import, etc.

They can be in multiple formats, a simple button like the “search”, html like the “cell locator”, a link to an external page like the “Settings > add custom column”, etc.

Toolbar items are registered in the hook: ‘vg_sheet_editor/editor/before_init’ when a spreadsheet editor is registered.

How to register a new toolbar

There are many types of toolbars, it’s better if you find an existing toolbar that you like (for example, the “duplicate” tool) and find the code used to register that toolbar and you can copy the parameters used. For example, if you search $editor->args['toolbars']->register_item in our plugin folder you will find the registration of all the toolbars and use those as examples.

Here’s an example showing how the real search toolbar was registered:

add_action('vg_sheet_editor/editor/before_init', array($this, 'register_toolbar_search'), 8);
function register_toolbar_search($editor) {
// This contains the list of spreadsheet editors being registered
$post_types = $editor->args['enabled_post_types'];
// We register the tool on each editor
foreach ($post_types as $post_type) {
// run_filters is the tool key
$editor->args['toolbars']->register_item('run_filters', array(
'type' => 'button',
'content' => __('Search', VGSE()->textname),
'icon' => 'fa fa-search',
// These attributes are added to the button which are required by our JavaScript to open a popup
'extra_html_attributes' => 'data-remodal-target="modal-filters"',
// The footer callback renders the html in the footer for our popup with the search form, which is required by our JavaScript
'footer_callback' => array($this, 'render_filters_form')
), $post_type);
}
}
function render_filters_form($current_post_type) {
// Render html here
}

How to modify the toolbar to change any setting

For example, how to change the button text and icon.

// Priority 99 because we need to run it AFTER the original toolbar was registered
add_action('vg_sheet_editor/editor/before_init', array($this, 'modify_toolbar_search'), 99);
function modify_toolbar_search($editor) {
$post_types = $editor->args['enabled_post_types'];
foreach ($post_types as $post_type) {
// We use the same key: run_filters to overwrite the existing tool
$editor->args['toolbars']->register_item('run_filters', array(
// We only set the content and icon, the other settings will not change
'content' => __('Filter rows', VGSE()->textname),
'icon' => 'fa fa-filter',
), $post_type, true);
}
}

How do I find the toolbar key to modify?

You can inspect the html of the toolbar button and you will see that each button has the key as a class name. For example:

Some toolbar keys are:
run_filters = search button

run_formula = bulk edit button

duplicate = Duplicate button

etc.