Skip to content

Latest commit

 

History

History
324 lines (239 loc) · 8.07 KB

slides.md

File metadata and controls

324 lines (239 loc) · 8.07 KB

Drupal Drupal 8 logo

VIEWS STYLE PLUGINS

Jibran Ijaz

[email protected]

@JibranIjaz

Note:

  • I am drupal core contributer.
  • I have more then 150 core commit mentions in Drupal 8.
  • I am maintainer of shortcuts modules in Drupal 8.
  • I am a senior Drupal developer at PreviousNext.
  • I am very active in views issue queue in Drupal 8.
  • I maintain various Drupal 8 and Drupal 7 views modules including views field view Drupal 8 branch.

What is the views module?

  • Query Part
  • Output Part

Note:

  • Views is a query building tool which display the result of that query in a proper format.
  • Query part, it filters, sorts and used to add relationships with other entities or table.
  • Output part: it consists of header, footer, pager, fields or formatted html generated using query.

Output Part

  • Display
  • Style

Note:

  • In views you can choose how you want to display your data you can select either page, block, attachment for other views displays, attachment to entities like entity views attach or even a panel pane.
  • After choosing the display you have to choose how you want to style the result of the query, for that the views module uses style plugins

Views style plugin in D7

  • hook_views_api
  • $module.views.inc
  • hook_views_plugins
  • views_plugin_style_mystyle.inc
  • Oh!
    • you have to add views_plugin_style_mystyle.inc to info file for auto loading and rebuild the registry.

Note:

  • You start it by adding views api hook which let views now that I have something for you in other words it makes you views plugin discoverable for view
  • As a good coding practice you add views.inc file to keep you views specific code out from module file.
  • To define views plugins then you add hook_views_plugins in inc file.
  • In that plugin definition we mention our class
  • To load this class we have to add an entry in .info file.

Views style plugin in D8

  • Create a class 
// src/Plugin/views/style/MyStyle.php
  • Annotation 
/**
 * @ViewsStyle(
 * )
 */

Note:

  • You just have to add a class in specific directory of you module.
  • There is very easy way to remember this
  • There is no hook_views_plugins in d8 so we use Annotation for that.

Markup of views style plugin

  • Use plugin class to define style options.
  • Use theme to style the rows.

Note:

  • You can customize views markup in views style plugin.
  • There is very easy way to remember this
  • There is no hook_views_plugins in d8 so we use Annotation for that.

Drupal 7 plugin definition

/**
 * Implements hook_views_plugins().
 */
function views_vertical_tabs_views_plugins() {
  $plugins = array();

  $plugins['style']['vertical_tabs'] = array(
    'title' => t('Vertical Tabs'),
    'help' => t('Renders the full views output in a vertical tabs'),
    'handler' => 'views_plugin_style_vertical_tabs',
    'theme' => 'views_view_vertical_tabs',
    'uses row plugin' => TRUE,
    'uses fields' => TRUE,
    'uses row class' => TRUE,
    'uses grouping' => FALSE,
    'uses options' => TRUE,
    'type' => 'normal',
  );

  return $plugins;
}

Note:

  • By using plugin hook we can register

Drupal 8 plugin definition

/**
 * Defines a style plugin that renders the full view as vertical_tabs.
 *
 * @ingroup views_style_plugins
 *
 * @ViewsStyle(
 *   id = "vertical_tabs",
 *   title = @Translation("Vertical Tabs"),
 *   help = @Translation("Displays rows as Vertical tabs."),
 *   theme = "views_view_vertical_tabs",
 *   display_types = {"normal"}
 * )
 */

Drupal 7 styling plugin class

class views_plugin_style_vertical_tabs extends views_plugin_style_default { }

Drupal 8 styling plugin class

class VerticalTabsStyle extends StylePluginBase {

  /**
   * Does the style plugin allows to use style plugins.
   */
  protected $usesRowPlugin = TRUE;

  /**
   * Does the style plugin support custom css class for the rows.
   */
  protected $usesRowClass = TRUE;

  /**
   * Does the style plugin support grouping of rows.
   */
  protected $usesGrouping = FALSE;

  /**
   * Does the style plugin for itself support to add fields to it's output.
   */
  protected $usesFields = TRUE;

}

Drupal 7 styling plugin methods in class

  /**
   * Overrides views_plugin_style::options_definition().
   */
  function option_definition() { }

  /**
   * Overrides views_plugin_style::options_form().
   */
  function options_form(&$form, &$form_state) { }

Drupal 8 styling plugin methods in class

  /**
   * {@inheritdoc}
   */
  protected function defineOptions() { }

  /**
   * {@inheritdoc}
   */
  public function buildOptionsForm(&$form, FormStateInterface $form_state) { }

How to theme views style plugin?

  • In D7 we define the theme function in hook_views_plugins. 
    'theme' => 'views_view_vertical_tabs',
  • In D8 we define the theme function in Annotation. 
/*
...
 *   theme = "views_view_vertical_tabs",
...
 */
  • template_preprocess_THEME_FUNCTION_NAME() is still the same.
  • But php template engine is replaced by twig template engine.
    • views-view-vertical-tabs.tpl.php is now views-view-vertical-tabs.html.twig

Preprocess of views_view_vertical_tabs

  • Process views style options.
  • Process views rows.
  • Create renderable array of vertical_tabs.
  • Add proper JS.

Note:

  • vertical_tabs is a fapi element so we have to convert it to proper fapi element.

views-view-vertical-tabs.tpl.php in D7

<?php

/**
 * @file
 * Template to display a views output in vertical_tabs.
 *
 * @ingroup views_templates
 */
?>
<?php print render($vertical_tabs); ?>

Note:

views-view-vertical-tabs.html.twig in D7

{#
/**
 * @file
 * Template to display a views output in vertical_tabs.
 *
 * Available variables:
 * - vertical_tabs: Render array of all the vertical_tabs.
 *
 * @see template_preprocess_views_view_vertical_tabs()
 *
 * @ingroup views_templates
 */
#}
{{ vertical_tabs }}

Views vertical tabs style plugin in action

  1. After downloading and enabling the module.
  2. Select 'Vertical Tabs' option form wizard screen or form views style form.
  3. Select styling options.
  4. Configure view. Note:
  • Show Demo.

Thanks

  • @dawehner
  • @larowlan
  • @previousnext
  • @DrupalSouth

Questions?

Thank you!

[email protected]

@JibranIjaz