Creating a basic Slick alternative in 8 minutes with VisualN from scratch (Video)

Posted on: Thu, 11/16/2017 - 15:09 By: kpv

In the screencast we show how easily a custom VisualN Drawer can be created and how versatile even such a basic drawer can be.

VisualN is a Drupal 8 module used to visualize any data from any source in practically any way. The example here demonstrates how to create a Slick gallery using VisualN toolkit.

Charts, maps, dashboard etc. drawers can be created in a similar way. You can read more on creating drawers strategies in this article.


  1. Enable VisualN module and its submodules
  2. Extract D3.js library to libraries/d3 (path should be libraries/d3/d3.min.js)
    D3.js is the only requirement for VisualN to work (though each drawer may have its own dependencies). Read more about D3.js on
  3. Extract Slick.js library to libraries/slick (path should be libraries/slick/slick/slick.min.js)
    Since our drawer is based on Slick.js gallery script, we need it too.


Add an entry into the custom module libraries.yml file to attach the Slick.js assets.


# attach slick.js library (mostly a copy-paste from slick.libraries.yml from Slick module)
  version: 1.x
    name: MIT
    gpl-compatible: true
    /libraries/slick/slick/slick.min.js: { weight: -3, minified: true }
      /libraries/slick/slick/slick.css: {}
      /libraries/slick/slick/slick-theme.css: {}
    - core/jquery

and another entry for drawer javascript (see js/drawers/custom-slick-gallery-drawer.js below).

# drawer-specific library
    js/drawers/custom-slick-gallery-drawer.js: {}
    - my_module/slick-lib

Drawer Plugin

Here we use drawer plugin file to extend a boilerplate class, attach drawer javascript library and provide script with info about data source to use for the drawing (which is done under the hood).

Boilerplate classes are used to create generic drawers in minimum time and effort.



namespace Drupal\my_module\Plugin\VisualN\Drawer;

use Drupal\visualn\DrawerBoilerplate\DrawerGenericBoilerplate;

 * Provides a 'Custom Slick Gallery' VisualN drawer.
 * @VisualNDrawer(
 *  id = "my_module_custom_slick_gallery",
 *  label = @Translation("Custom Slick Gallery"),
 * )
class CustomSlickGallery extends DrawerGenericBoilerplate {

  public function prepareBuild(array &$build, $vuid, array $options = []) {
    // Attach drawer config to js settings
    parent::prepareBuild($build, $vuid, $options);
    // Attach visualn style libraries
    $build['#attached']['library'][] = 'my_module/custom-slick-gallery';

  public function jsId() {
    return 'my_moduleCustomSlickGallery';

In the given example we create quite a simple plugin, though such plugins can be used to create custom configuration forms, extend other drawers to change their behaviour, implement custom mechanics to create drawings (e.g. server-side drawings using ImageMagick) etc.

Drawer JS script

Drawer javascript is a de-facto standard way to create drawings. Nowadays there are multiple js libraries of any kind and flavour on the Internet, and each of them can be used to create a drawer based on it.


(function ($, Drupal) {
  Drupal.visualnData.drawers.my_moduleCustomSlickGallery = function(drawings, vuid) {
    var drawing = drawings[vuid];
    var data =;
    var html_selector = drawing.html_selector;
    var drawer_setup = drawing.drawer.config.drawer_setup;

    var slick_content = '';

      slick_content += '<div><img src="' + d.url + '" /></div>';

    var slick_id = html_selector + '--slick-id';
    $('.' + html_selector).append('<div id="' + slick_id + '">' + slick_content + '</div>');

    $('#' + slick_id).slick(


})(jQuery, Drupal);

Using the Drawer

There are multiple ways and scenarios that VisualN drawers can be used in. In the video we will just see some of them:

  • Using a CSV file as data source
  • Using Views as data source
  • Creating a VisualN Block with a Share link

Drawer data keys

Data keys are used to remap input data keys. Imagine when drawer script expects data to have label and count columns but the source provides data with title and number columns. Data keys allow to seamlessly change column names. Actually they can even be used by Mapper plugins to restructure data.


Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
CAPTCHA This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.