Crazy Tricks with Views

Size: px

Start display at page:

Download "Crazy Tricks with Views"

Avice Price
5 years ago
Views:

1 Crazy Tricks with Views Amani Mansour and Krystee Dryer PRESENTED TO

2 Views More than Just Lists ❶ When do views cross over to complex? ❷ How to approach a complex view. ❸ How to use hooks and javascript to get the results you need.

3 Who we are We re Hiring! Amani Mansour Software Engineer Krystee Dryer Technical Lead and Senior Software Engineer

4 A full service digital experience agency + + = Nonprofit Marketing & Fundraising UX & Visual Design Web & Mobile Development Changing the World 4

5 One View with Three Needed Outcomes

6 Background League of Women Voters has multiple leagues across the U.S. Goal - to make it easy for users to find their nearest local league by zip code

7 Outcome #1: No Zip Code Entered If no zip code is entered, show a summary list

8 Outcome #2: User Enters Zip Code If a zip code is entered, display the league with that matching zip code and show the state league

9 Outcome #3: No Matching Zip Code Found If a matching zip code is not found, display all leagues in the same state as the zip code and show the state league

10 View Setup Local Leagues Created a view page display Fields: League type Title Filter Criteria: Published Content Type = Local League League Type = Local League Zip Code (exposed)

11 View Setup Local Leagues Contextual Filter Content: Has taxonomy term ID Display summary when filter value is not in the URL Display record count with link

12 Outcome #1: Achieved

13 If you click on a state

14 View Setup State League Created a view block display Fields: League type Title Filter Criteria: Published Content Type = Local League League Type = State League

15 View Setup State League Contextual Filter Content: State When filter value not available, provide default value = Has taxonomy term id from url Load default filter from term page, load default filter from node page, limit terms by vocab = state, filter to items that share all terms

16 View Setup State League Added the state league view block to the footer of the local league page view using a global view area

17 Outcome #2 Almost Achieved The state league is missing because the state tid is not in the url when a user searches by zip code

18 View Limitations Outcome #2 missing the state league Outcome #3 not achieved: Display all leagues in the same state as the zip code entered if it did not match any results Display state league

19 Locate State League for Matching Zip Code HOOK_views_pre_view can be used to change things before the view is executed. function lwv_views_pre_view(viewexecutable $view, $display_id, array &$args) { } if ($view->id() == 'local_leagues_by_state') { $exposedinput = $view->getexposedinput(); $zip = $exposedinput['field_zip_code_value']; if ($zip) { } $args[0] = _get_state_by_zip($zip); } Get the input from the filter If a zip code is entered, get the state where that zip code is located

20 Outcome #2: Achieved

21 Locate State for Not Matched Zip Code HOOK_views_post_execute can be used to alter results after the view is executed but before it is displayed. function module_views_post_execute(viewexecutable $view) { if ($view->id() == 'local_leagues_by_state') { if (!$view->total_rows) { $exposedinput = $view->getexposedinput(); $zip = $exposedinput['field_zip_code_value']; if ($zip) { $args = _get_state_by_zip($zip); // kint($args); die; if($args) { } } } } } Test to see if view returns any results Grab the value of the zip code entered by the user Send zip code to function and return state $response = new RedirectResponse('/local-leagues/find-local-league/'. $args. '?field_zip_code_value='); $response->send(); Once a state is returned, put it in the URL for the view to use as a contextual filter

22 Get State by Zip Code _get_state_by_zip() is a function we created that allows us to pass it a zip code value and it will return the state where that zip code exists To achieve this, we used the Google Maps Geocoding API

23 Get State By Zip Code function _get_state_by_zip($zip) { $uri = ' $zip.'&sensor=true&key=[key]'; try { $response = \Drupal::httpClient()->get($uri, array('headers' => array('accept' => 'text/plain'))); $data = (string) $response->getbody(); if (empty($data)) { return FALSE; } } } catch (RequestException $e) { return FALSE; } $dataarray = json_decode($data); $state = NULL; foreach($dataarray->results[0]->address_components as $data) { if ($data->types[0] == 'administrative_area_level_1') { $state = $data->long_name; } } if($state) { $term = \Drupal::entityTypeManager() ->getstorage('taxonomy_term') ->loadbyproperties(['name' => $state]); $ids = array_keys($term); return reset($ids); } return FALSE; Call the google map geocoding api with zip code and get response Response is in JSON format so we decode that into an object State information is held in the adminstrative_area_level_1 Use the state name obtained from the response and locate the taxonomy term that matches and get tid

24 Outcome #3: Achieved

25 View Switcher

26 Background Create a view switcher that allows users to switch the display between a card and list view

27 View Setup Created a block view display Format: Masonry

28 View Setup Global View Header Global text area with html markup for the view switcher

29 Masonry Methods Methods are actions done by Masonry instances With jquery, methods follow the jquery UI pattern.masonry( methodname /* arguments */ )

30 .masonry( destroy ) Destroy removes the Masonry functionality and will return the element back to its pre-initialized state

31 .masonry( destroy ) limitations When masonry initializes it adds positioning on the masonry items (inline CSS). When it s destroyed it removes what is added.

32 Toggle Class (function ($) { BF.init(function () { $('select[name="view-switcher"]').on( 'change', function() { var selectlistvalue = $(this).val(); var $masonrylayoutwrapper = $('.masonry-layout'); if(selectlistvalue == 'list-view'){ $masonrylayoutwrapper.addclass('destroy-masonry'); } else { $masonrylayoutwrapper.removeclass('destroy-masonry'); } }); }); })(jquery); When the value of the select list changes If the select list value is equal to list view, then add the class destroymasonry, else remove the class destroy-masonry

33 Success!

34 Special Exposed Filters

35 Background View with exposed filters with requirements Better Exposed Filters couldn t solve Needed Dropdowns with checkboxes and selected filters in horizontal container

36 Approach Used Bootstrap Multiselect as a base for the dropdowns Custom jquery for the selected filters

37 multiselect_facets -js --bootstrap-multiselect.js --multiselect_facets.js -css --multiselect_facets.css -templates --multiselects_facets.html.twig -multiselect_facets.info.yml -multiselect_facets.libraries.yml -multiselect_facets.module Custom Module Basic structure of the custom module needed Added the bootstrapmultiselect.js file in the js directory

38 Customizations (.libraries.yml file) multiselect_facets: css: theme: css/multiselect_facets.css: {} js: js/multiselect_facets.js: {} dependencies: - core/jquery - core/drupal.ajax - core/drupal - core/drupalsettings - core/jquery.once bootstrap_multiselect: js: js/bootstrap-multiselect.js: {} dependencies: - core/jquery - core/drupal.ajax - core/drupal - core/drupalsettings - core/jquery.once Define custom javascript library Define the bootstrapmultiselect javascript library

39 Customizations (.module file) /** * Implements hook_form_views_exposed_form_alter(). * */ function multiselect_facets_form_views_exposed_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state) { $form['#attached']['library'][] = 'multiselect_facets/multiselect_facets'; $form['#attached']['library'][] = 'multiselect_facets/bootstrap_multiselect'; } /** * Implements hook_theme(). */ function multiselect_facets_theme() { return [ 'multiselect_facets' => [ 'variables' => [] ], ]; } Some changes must be made to the exposed filter markup Using a hook_form_form_id_alter() to find everywhere the exposed filters is used and attach libraries

40 Customizations (.js file) (function ($) { 'use strict'; Drupal.behaviors.facets = { 'attach': function (context, settings) { var $context = $(context); $('select[multiple="multiple"]').multiselect(); Allow the bootstrap multiselect to attach to form items that have an attribute of multiple=multiple

41 Customizations (.js file)

42 Views Plugins for Filtering

43 Background Plotting geolocated pins on a google map Wanted to be able to filter in a dropdown by the name of the content (node) and return all nodes with same name Traditional filters did not satisfy this requirement (dropdown and keyword search working together)

44 Views Filter Plugin Drupal 8 s plugin system allows custom fields, filters, sorts and other components for views to be created Great for combining filter functionality and leverage what Drupal already done for us

45 Approach Wanted the ease of a dropdown box with the capabilities of a keyword search It is easiest to model your plugin after an existing one in core Chose the InOperator plugin to start

46 modulename -src --Plugin ---views ----filter -----ProgramTitles.php -modulename.info.yml -modulename.views.inc Custom Module Basic structure of the custom module needed Copied the InOperator.php from the views module in core

47 Customizations (init) public function init(viewexecutable $view, DisplayPluginBase $display, array &$options = NULL) { parent::init($view, $display, $options); $this->valuetitle = t('allowed program titles'); $this->definition['options callback'] = array($this, 'generateoptions'); } Basic init function that initializes the new views filter plugin

48 Customizations (generateoptions) public function generateoptions() { $query = \Drupal::database()->select('node_field_data', 'node_field_data'); $query->fields('node_field_data', array('nid', 'title')); $query->condition('node_field_data.status', '1'); $query->condition('node_field_data.type', 'program', 'IN'); $query->orderby('node_field_data.title', 'ASC'); $data = $query->execute(); $results = $data->fetchall(\pdo::fetch_obj); $options = array(); Query the database to get the options for the dropdown } foreach ($results as $result) { // $options[$result->nid] = substr($result->title, strpos($result->title, '- ') ); $program = explode(" ", $result->title); $options[$program[1]] = $program[1]; $options = array_unique($options); natsort($options); } return $options; Return the options for the filter Loop through the results and discard duplicates and set to alphabetical order by title

49 Customizations (opsimple) Customized function protected function opsimple() { if (empty($this->value)) { return; } $this->ensuremytable(); $this->realfield = 'title'; $programtitles = NULL; $where = db_or(); foreach ($this->value as $programtitle) { $where->condition( "$this->tablealias.$this- >realfield", '%'. db_like(trim($programtitle, ",!?")). '%', 'LIKE'); } $this->query->addwhere($this->options['group'], $where); } Original Function protected function opsimple() { if (empty($this->value)) { return; } $this->ensuremytable(); // We use array_values() because the checkboxes keep keys and that can cause // array addition problems. $this->query->addwhere($this->options['group'], "$this->tablealias.$this->realfield", array_values($this->value), $this->operator); } Add the where condition to the query to turn this into a keyword search

50 Questions? Amani Mansour Krystee Dryer

Easy Authcache documentation

Easy Authcache documentation Contents Contents... 1 Description... 2 Advantages of module differs it from Authcache:... 2 Disadvantages of module differs it from Authcache:... 2 Installation... 2 Easy