Les 3

Drupalversie: 
Drupal 7

Inleiding

In deze les bepreken we een aantal aspecten van de module 'Views' ter vervolgemaking. De meeste van deze tools zijn voorlopig niet beschikbaar in Drupal 8. Drupal 7 zal vandaag onze versie zijn.

Als afwerking van vorige lessen en het uitzicht van de site kan je hier de CSS code bekijken voor het aanpassen van de menubalk. Dit kan je eerst doen. Pas de kleuren aan naar eigen smaak.

Voorbereidend werk

Installeer en activeer de volgende modules:

Voor deze les hebben we opnieuw inhoudstypes en inhoud nodig. Om ons dat werk te besparen installeer je onderstaande les-bestanden net zoals je een module zou installeren. Rechts klikken, koppelingslocatie kopiëren, installeren en aanzetten

Inhoudstypes en inhoud les 3

  • Kijk maar even bij inhoudstypes --> les 3 is aanwezig
  • Kijk ook even bij de inhoud. Er zijn enkele nodes aangemaakt met info over de duurste foto's ter wereld.

Views vervolmaking

Voorbereiding

Maak eerst een nieuw overzicht aan met de volgende kenmerken:

  • Naam: Les 3 (kan later aangepast worden)
  • Inhoud van het type Les 3
  • Tabel van velden
  • Menulink in het hoofdmenu (naam: Expensive Pictures)

Voeg vervolgens de volgende velden toe. Uiteraard moet deze voorkomen in 'Les 3'

  • Land
  • Fotograaf
  • Afbeelding (Afbeeldingsstijl: thumbnail)
  • Prijs (scheidingsteken duizendtallen: spatie, geen cijfers na de komma)

Zorg voor de juiste volgorde:

Data Export

Met Data Export gaan we er nu voor zorgen dat de tabel exporteerbaar is. Concreet zal deze downloadbaar worden in een Excel-formaat.

  • Ga terug naar de instellingen van de view
  • Kies nu bij +Toevoegen voor Data export toevoegen

  • Standaard wordt er geëxporteerd in CSV-formaat we passen dit aan naar XLS

  • Vergeet geen vink te zetten bij 'Provide as File'

  • Ook het pad is standaard niet opgegeven:

  • Vervolgens moeten we deze export nog ergens bijplaatsen, anders is deze niet zichtbaar op de site:

  • Uiteindelijk bekijk je even het resultaat:

Autocomplete

  • Installeer eerst de nodige module: Views Autocomplete Filters
  • Open opnieuw de instellingen van de view
  • Bij de filtercriteria voegen we een filter toe. We filteren op de titel en passen toe op DEZE WEERGAVE

  • Zet de filter zichtbaar voor de gebruiker, geef een passend label en vink autocomplete aan

  • Wanneer je nu de page gaat bekijken en de filter uittest, zal je zien dat de filter automatisch voorstellen doet.

Selective filter

Deze filter zorgt ervoor dat wanneer je de ene filter aanvult, je bij de andere filters enkele de keuzes krijgt afhankelijk van jouw eerste filter. Als je bij land Rusland kiest zal je enkel foto's uit Rusland kunnen kiezen bij de filter.

  • Installeer de module Views Selective Filters
  • Open opnieuw de instellingen van de view en voeg de volgende filtercriteria toe:

  • Pas telkens het label aan

  • Tot slot zorgen we ervoor dat de filter automatisch zijn werk doet zonder dat we telkens op die knop Toepassen moeten klikken
  • Onder Uitgebreid klik je op de instellingen bij Stijl van zichtbaar formulier

  • Scroll vervolgens naar onder en zet automatisch toepassen aan

Computed Field

Maak een nieuw overzicht met volgende kenmerken:

  • Naam: Veilingkosten
  • Inhoud van Les 3
  • Tabel van velden
  • Menulink in het hoofdmenu

Bij de velden voeg je naast de Titel dit reeds aanwezig is het veld prijs toe

  • Voorlopig hebben we volgend resultaat:

  • Voeg nu opnieuw het veld prijs toe. Omdat we iets willen bereken hebben we dit veld een tweede keer nodig.
  • Pas even aan zodanig dat het veld niet wordt getoond. Bij opmaakhulpmiddel kies je voor onopgemaakt

  • Voeg nu het veld Wiskundige Expressie toe:

  • Label: Veilingkosten inbegrepen

  • Decimaalteken: komma
  • Scheidingsteken voor duizendtallen: spatie
  • Voorvoegsel: $
  • Expressie: gebruik hier de vervanginspatronen. We berekenen hier een prijs, gebruik het verborgen veld prijs voor de formule

  • Resultaat: een berekend veld of computed field is bij de view gevoegd.

Flipped Table

  • Installeer en activeer de volgende module: Views Flipped Tabel
  • Open de instellingen van het overzicht 'veilingkosten'
  • Voeg een bijlage toe

  • Zorg ervoor dat deze bijlage bij de page wordt toegevoegd en dat deze erna komt

  • Klik bij het formaat op Tabel en verander deze naar Flipped Tabel. Let op: DEZE WEERGAVE

  • Bekijk het resultaat

Views Calc

  • Installeer en activeer de module: Views Calc
  • Maak een nieuw overzicht: Totaalprijs
  • Inhoud van het type Les 3
  • Kies bij het formaat: Views Calc Table

  • Leg ook een menulink in het hoofdmenu
  • Voeg het veld prijs toe. Zorg voor een mooi weergave van de duizendtallen en de decimalen
  • Open de instellingen van de views calc
  • En kies bij de prijs voor Display calculation en vervolgens Som en eventueel gemiddelde in het verschenen menu

  • Uiteindelijk zal het dit als resultaat geven:

  • Wil je Page Sum en Page AVG verbergen gebruik dan volgende CSS code:

td.view-subfooter, td.view-subfooter-number
{
    font-weight: normal;
    background-color: #fff;
    display: none;
}

Aggregatie

  • Voeg een bijlage toe aan het overzicht 'Totaalprijs'
    • De bijlage komt erna
    • De bijlage voeg je toe bij de page
  • Wijzig het formaat naar HTML-lijst. Pas dit enkel toe op de bijlage

  • We voegen een Kop toe:

  • Kies voor een 'Algemeen: Ongefilterde tekst'

  • Geef nu een tekst in, onderstaand is een voorbeeld, gebruik gerust een eigen tekst. (De breaks op het einde zorgen voor wat witruimte)

  • Kijk nu bij Uitgebreid
  • Klik op de 'nee' bij Aggregatiefuncties gebruiken'

  • Zet Aggregeren aan

  • Merk nu op dat je naast als je velden en filters een opties hebt bijgekregen: 'Instellingen aggregatiefunctie'
  • Klik hierop naast het veld prijs en kies als type: Som

  • Verwijder het veld Titel
  • Pas het label van het veld prijs aan naar 'Dit is de totale prijs'
  • Voeg opnieuw het veld prijs toe
  • Kies als aggregatietype 'Gemiddelde'
  • Verander het label naar:  'Dit is de gemiddelde prijs'
  • Resultaat:

Afwerking

Zorg voor een aanpassing in het hoofdmenu. Uiteindelijk zal dit het eindresultaat zijn: