Cra Crazy zy Tri Trick cks s wi with th Vi View ews - PowerPoint PPT Presentation

Cra Crazy zy Tri Trick cks s wi with th Vi View ews PRESENTED TO Amani Mansour and Krystee Dryer

Vi View ews s – Mo More re tha than Ju Just st Li List sts ❶ 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. DrupalCon 2018: Crazy Tricks with Views

Who we are We’re Hiring! Amani Mansour Krystee Dryer Technical Lead and Software Engineer Senior Software Engineer DrupalCon 2018: Crazy Tricks with Views

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

One View with Three Needed Outcomes

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 DrupalCon 2018: Crazy Tricks with Views

Outcome #1: No Zip Code Entered If no zip code is entered, show a summary list DrupalCon 2018: Crazy Tricks with Views

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 DrupalCon 2018: Crazy Tricks with Views

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 DrupalCon 2018: Crazy Tricks with Views

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) DrupalCon 2018: Crazy Tricks with Views

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 DrupalCon 2018: Crazy Tricks with Views

Outcome #1: Achieved DrupalCon 2018: Crazy Tricks with Views

If you click on a state… DrupalCon 2018: Crazy Tricks with Views

View Setup – State League Created a view block display Fields: ○ ∙ League type ∙ Title Filter Criteria: ○ ∙ Published ∙ Content Type = Local League ∙ League Type = State League DrupalCon 2018: Crazy Tricks with Views

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 DrupalCon 2018: Crazy Tricks with Views

View Setup – State League Added the state league view block to the footer of the local league page view using a global view area DrupalCon 2018: Crazy Tricks with Views

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 DrupalCon 2018: Crazy Tricks with Views

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 ○ DrupalCon 2018: Crazy Tricks with Views

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' ) { Get the input from the filter $exposedinput = $view->getExposedInput(); $zip = $exposedinput[ 'field_zip_code_value' ]; if ($zip) { If a zip code is entered, get $args[0] = _get_state_by_zip($zip); the state where that zip } code is located } } DrupalCon 2018: Crazy Tricks with Views

Outcome #2: Achieved DrupalCon 2018: Crazy Tricks with Views

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) { Test to see if view returns any results if ($view->id() == 'local_leagues_by_state' ) { if (!$view-> total_rows ) { $exposedinput = $view->getExposedInput(); Grab the value of the zip code $zip = $exposedinput[ 'field_zip_code_value' ]; entered by the user if ($zip) { $args = _get_state_by_zip($zip); Send zip code to function and return // kint($args); die; state if ($args) { $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 } } DrupalCon 2018: Crazy Tricks with Views

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 DrupalCon 2018: Crazy Tricks with Views

Get State By Zip Code function _get_state_by_zip($zip) { Call the google map $uri = 'https://maps.googleapis.com/maps/api/geocode/json?address=' . $zip . '&sensor=true&key=[key]' ; geocoding api with zip try { code and get response $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); Response is in JSON format so we decode that into an object $state = NULL ; foreach ($dataArray-> results [0]-> address_components as $data) { if ($data-> types [0] == 'administrative_area_level_1' ) { $state = $data-> long_name ; } } if ($state) { State information is held in the adminstrative_area_level_1 $term = \Drupal:: entityTypeManager () ->getStorage( 'taxonomy_term' ) ->loadByProperties([ 'name' => $state]); $ids = array_keys ($term); Use the state name obtained from the response and return reset ($ids); locate the taxonomy term that matches and get tid } return FALSE ; }

Outcome #3: Achieved DrupalCon 2018: Crazy Tricks with Views

View Switcher

Background Create a view switcher that allows users to switch the display between a card and list view DrupalCon 2018: Crazy Tricks with Views

View Setup • Created a block view display • Format: Masonry DrupalCon 2018: Crazy Tricks with Views

View Setup • Global View Header ○ Global text area with html markup for the view switcher DrupalCon 2018: Crazy Tricks with Views

Masonry Methods • Methods are actions done by Masonry instances • With jQuery, methods follow the jQuery UI pattern .masonry( ‘ methodName ’ /* arguments */ ) • https://masonry.desandro.com/methods.html DrupalCon 2018: Crazy Tricks with Views

.masonry(‘destroy’) • Destroy removes the Masonry functionality and will return the element back to its pre-initialized state DrupalCon 2018: Crazy Tricks with Views

.masonry(‘destroy’) limitations When masonry initializes it adds positioning on the masonry items (inline CSS). When it’s destroyed it removes what is added. DrupalCon 2018: Crazy Tricks with Views

Toggle Class When the value of the select list ( function ($) { changes BF.init( function () { $( 'select[name="view-switcher"]' ).on( 'change' , function () { var selectListValue = $( this ).val(); var $masonryLayoutWrapper = $( '.masonry-layout' ); if (selectListValue == 'list-view' ){ If the select list value is equal to list $masonryLayoutWrapper.addClass( 'destroy-masonry' ); view, then add the class ‘destroy - } else { masonry’, else remove the class $masonryLayoutWrapper.removeClass( 'destroy-masonry' ); } ‘destroy - masonry’ }); }); })(jQuery); DrupalCon 2018: Crazy Tricks with Views

Success! DrupalCon 2018: Crazy Tricks with Views

Special Exposed Filters

Background • View with exposed filters with requirements Better Exposed Filters couldn’t solve • Needed Dropdowns with checkboxes and selected filters in horizontal container DrupalCon 2018: Crazy Tricks with Views

Approach • Used Bootstrap Multiselect as a base for the dropdowns • Custom jquery for the selected filters DrupalCon 2018: Crazy Tricks with Views

multiselect_facets Custom Module -js --bootstrap-multiselect.js • Basic structure of the --multiselect_facets.js custom module needed -css • Added the bootstrap- --multiselect_facets.css multiselect.js file in the js -templates directory --multiselects_facets.html.twig -multiselect_facets.info.yml -multiselect_facets.libraries.yml -multiselect_facets.module DrupalCon 2018: Crazy Tricks with Views

Customizations (.libraries.yml file) multiselect_facets: css: theme: css/multiselect_facets.css: {} js: js/multiselect_facets.js: {} dependencies: - core/jquery Define custom javascript library - core/drupal.ajax - core/drupal - core/drupalSettings - core/jquery.once bootstrap_multiselect: js: js/bootstrap-multiselect.js: {} dependencies: - core/jquery Define the bootstrap- - core/drupal.ajax multiselect javascript library - core/drupal - core/drupalSettings - core/jquery.once DrupalCon 2018: Crazy Tricks with Views