Create custom style plugin for views Drupal8

I have taken the reference from views module which is now present in Drupal8 core.

Lets created custom module in which create 'simple node archive' views style plugin when installed. As Drupal8 now ships with symfony components the .info files are now .info.yml and coding syntax is changed but more similar to Drupal7.

name : simple node arvhive
description : Provide simple node archive style option for Views.
core : 8.x
package : Content display
type: module
dependencies:
  - views

No changes for .module file.


/**
 * @file
 * Provides Simple Node archive style options for Views.
 */

Custom module is ready now lets add views style plugin.The directory structure will be 'src/Plugin/views/style' and create your style plugin file SimpleNodeArchive.php. Earlier we used hook_views_plugins() now its ViewsStyle annotation that describes plugin. More details can found here - https://api.drupal.org/api/drupal/core!modules!views!src!Plugin!views!st...


/**
 * @file
 * Definition of Drupal\sna_blocks\Plugin\views\style\SimpleNodeArchive.
 */

namespace Drupal\sna_blocks\Plugin\views\style;

use Drupal\views\Plugin\views\style\StylePluginBase;
use Drupal\Core\Annotation\Plugin;
use Drupal\Core\Annotation\Translation;
use Drupal\Core\Form\FormStateInterface;

/**
 * The default style plugin for summaries.
 *
 * @ingroup views_style_plugins
 *
 * @ViewsStyle(
 *   id = "sna_blocks",
 *   title = @Translation("Simple Node Archive"),
 *   help = @Translation("Displays result in archive formatted, with month and year that link to achive page."),
 *   theme = "sna_blocks_view_simplenodearchive",
 *   theme_file = "sna_blocks.theme.inc",
 *   display_types = {"normal"}
 * )
 */
class SimpleNodeArchive extends StylePluginBase {
  /**
   * Overrides Drupal\views\Plugin\Plugin::$usesOptions.
   */
  protected $usesOptions = TRUE;

  /**
   * Does the style plugin allows to use style plugins.
   *
   * @var bool
   */
  protected $usesRowPlugin = FALSE;

  /**
   * Does the style plugin support custom css class for the rows.
   *
   * @var bool
   */
  protected $usesRowClass = FALSE;
  
  /**
   * Does the style plugin support grouping of rows.
   *
   * @var bool
   */
  protected $usesGrouping = FALSE;

  protected function defineOptions() {
    $options = parent::defineOptions();
    // Define options.
    return $options;
  }

  public function buildOptionsForm(&$form, FormStateInterface $form_state) {
    // Options form here.
  }
}

Create a 'template' directory relative to module folder and add theme sna_blocks.theme.inc and template sna-blocks-view-simplenodearchive.html.twig files. the process is almost same what we used in older version of Drupal.

sna_blocks.theme.inc -


/**
 * @file
 * Preprocessors and helper functions to make theming easier.
 */

use Drupal\Component\Utility\Html;
use Drupal\Component\Utility\SafeMarkup;
use Drupal\Component\Utility\String;
use Drupal\Component\Utility\Xss;
use Drupal\Core\Template\Attribute;
use Drupal\Core\Url;

/**
 * Prepares variables for view templates.
 *
 * Default template: sna-blocks-view-simplenodearchive.html.twig.
 *
 * @param array $variables
 *   An associative array containing:
 *   - view: A ViewExecutable object.
 *   - rows: The raw row data.
 *   - options: An array of options. Each option contains:
 *     - separator: A string to be placed between inline fields to keep them
 *       visually distinct.
 */
function template_preprocess_sna_blocks_view_simplenodearchive(&$variables) {
  $variables['archive_block'] = 'some data here.';
}

sna-blocks-view-simplenodearchive.html.twig -:

{#
/**
 * @file
 * Default theme implementation for unformatted summary links.
 *
 * Available variables:
 * - archive_block: Archive block data.

 *
 * @see template_preprocess_sna_blocks_view_simplenodearchive()
 *
 * @ingroup themeable
 */
#}

{{ archive_block }}

Modifications and suggestions are welcome.

Tags: 

Comments

Hey there, You've done a great job. I will certainly digg it
and personally recommend to my friends. I'm sure they will
be benefited from this site.

What's up to every body, it's my first visit of this webpage; this web site contains amazing and truly good data in support of readers.

Great post. I am going through a few of these issues as well..

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Syntax highlight code surrounded by the <pre class="brush: lang">...</pre> tags, where lang is one of the following language brushes: css, jscript, php.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.