How to create a custom drawer

Last updated on
9 August 2021

This page has not yet been reviewed by VisualN maintainer(s) and added to the menu.

This documentation needs work. See "Help improve this page" in the sidebar.

Audience: developers

Basically a drawer consists of a drawer plugin and a js script.

Drawer data keys and drawer settings

Each js script uses some keys to access data entries. If data structure expected by the drawer script is known and data uses that structure and keys, then there should be no problem. But if data keys differ from those expected by the drawers, data keys renaming is requried. For that case there are mapper plugins. Those plugins use mappings provided by dataKeys() drawer method.

Drawer settings

TBD.

Drawer plugin structure

Every drawer plugin must have id and label properties in its annotation:

/**
 * Provides a 'Dashboard' VisualN drawer.
 *
 * @VisualNDrawer(
 *  id = "visualn_dashboard",
 *  label = @Translation("Dashboard"),
 *  input = "visualn_basic_tree_input",
 * )
 */
class DashboardDrawer extends VisualNDrawerBase {
}

If 'input' isn't set it defaults to 'visualn_generic_input'. Read Chain plugins section for more info on input and output types.

Also there is a 'manger' key which determines VisualN Manager used by the drawer (and so managing the whole chain) and defaults to 'visualn_default'. Manager defines the whole workflow and generally isn't supposed to be overriden. See Workflow plugins section for more info.

In its most basic form drawer plugin should implement only one method:

public function prepareBuild(array &$build, $vuid, ResourceInterface $resource) {
  // Attach drawer config to js settings
  parent::prepareBuild($build, $vuid, $resource);
  // Attach visualn style libraries
  $build['#attached']['library'][] = 'visualn_styles/dashboard';
}

Since every drawer should have a js script, that is the place where the script is attached.

Also you may want to implement another method:

public function jsId() {
  return 'visualnDashboardDrawer';
}

Every drawer js script (see below) must have a unique id. By default it is taken from plugin id from plugin annotation. But you can use any by imlementing jsId().

Drawer js script structure

TBD.

Using ajax within drawer config forms

TBD.

Naming conventions

TBD.

Note: The info above is provided for the drawers used in the default workflow which is supposed to be a standard for contributed plugins.

Help improve this page

Page status: Needs work

You can: