Dag 11: Views pagina maken (deel 1)

Vandaag gaan we met Views een pagina maken. Dit is een pagina die meerdere content-items kan bevatten. Door middel van filters kun jij precies bepalen welke content in aanmerking komt voor de pagina die uiteindelijk gegenereerd wordt, of het nou nodes, gebruikers, bestanden of taxonomie termen zijn. 

Je kunt ook alleen bepaalde velden van een content item laten weergeven. Dit gebeurt uiteraard allemaal dynamisch, zodra nieuwe content beschikbaar komt die voldoet aan de criteria wordt deze automatisch toegevoegd aan en View.

Een simpele view geeft bijvoorbeeld een lijst van alle artikelen binnen een bepaald content type weer. Maar je kunt het ook veel specifieker maken, zoals een lijst van alle artikelen op de website, ongeacht welke content type, die niet ouder zijn dan een maand en alleen geschreven zijn door pietje. De mogelijkheden zijn zowat eindeloos.

Door het maken van een View zullen een aantal zaken op hun plek vallen, bijvoorbeeld waarom het handig is om inhoud gescheiden te houden door middel van content types en velden. Daarnaast zul je, als dit nog niet duidelijk is, gaan begrijpen waarom Views de meest populaire Drupal module is.*

* De bedoeling is dan ook dat Views in de Drupal 8 core gaat komen, wat zou betekenen dat de module niet meer apart geïnstalleerd hoeft te worden en dat de Drupal maintainers zorg dragen voor het onderhoud.

Een view maken

De Views module heb je op dag 4 al geïnstalleerd dus we kunnen gelijk aan de slag met het maken van onze factuur overzicht pagina voor ingelogde klanten. Navigeer in het hoofdmenu naar structuur en klik op Views

Hier zie je een overzicht van alle aangemaakte Views. Klik links bovenaan op Add new view.

Je krijgt een formulier voorgeschoteld waarin je een aantal hoofdzaken al kunt opgeven. Als eerste vul je een logische View Name in zoals "Facturen". Vervolgens geef je aan dat alle bericht van het content type facturen weergegeven moeten worden, met de nieuwste bovenaan in de lijst.

Bij de volgende stap vinken we aan dat er een nieuwe pagina moet worden gemaakt, met als titel "Mijn Facturen". Ook als pad uiteinde mag je "mijnfacturen" invullen. 


Het display format geeft ons een aantal opties om de layout van de uiteindelijke lijst aan te passen, voor nu mag je kiezen voor unformatted list van teasers (weet je nog?), zonder links en comments.

Het maximum aantal items in de lijst mag je op 3 zetten. Use a pager mag aangevinkt blijven, zodat gebruikers ook eerdere facturen kunnen bekijken. Vink tot slot de create a menu link aan en kies hier voor user menu.

Create a block mag je uitvinken, we gaan op dit moment alleen een pagina maken. Door een blok te maken zou je de View (met eventuele aanpassingen) ook kunnen weergeven als widget naast andere content. Denk aan een blok op de profiel pagina met als inhoud alleen de meest recente factuur.

Klik nu op continue & edit en schrik niet.

Views administratie pagina

Bijna iedereen die voor het eerst een Views administratie pagina bekijkt weet even niet waar hij het zoeken moet, maar wees gerust, het zal je allemaal duidelijk worden. Daarbij heb je de belangrijkste zaken zojuist al ingevuld. Laten we de pagina van boven naar beneden, van links naar rechts eens kort en bondig nalopen.

Allereerst valt (hopelijk) bovenaan de waarschuwing op dat alle veranderingen die we maken pas doorgevoerd worden als we de View opslaan met de knop aan de rechterzijde, onthou dit goed!

Displays

Kijken we iets verder naar beneden dan zie je een balk met een add knop. Hiermee kun je een nieuwe Views pagina of Block maken op basis van dezelfde instellingen. De mogelijkheid om meerdere views binnen een enkele administratie te creëren heeft meerdere voordelen:

  • Het voortkomt dat je voor Views die ongeveer gelijk zijn, alles opnieuw in moet voeren
  • Je kunt je hierdoor snel schakelen tussen gerelateerde Views
  • Je kunt wijzigingen tegelijk toepassen op alle aanwezige View

Display

De naam van de view zoals gebruikt op de administratie pagina’s. Hier mag je op klikken om dit voor de duidelijkheid te veranderen naar “factuuroverzicht”.

Titel

Spreekt voor zich, de pagina titel van de View zoals klanten deze krijgen te zien. De pagina titel heb je op de vorige pagina al opgegeven.

Formaat

Ook het weergave formaat hebben we op de vorige pagina al ingesteld. Dit gaat puur om het weergave formaat van de lijst, dus niet van de nodes in die lijst zelf. Het ligt aan je eigen voorkeur en de data die je wilt weergeven wat het beste formaat is, de opties zijn*:

  • HTML list - Een lijst zoals dit lijstje dat gebruikt maakt van de UL en LI tags. Je kunt hier een eigen CSS klasse aankoppelen om de opmaak aan te passen.
  • Grid - Geeft de inhoud weer in een raster, het aantal kolommen kun je aanpassen. Bijv. geschikt voor galerijen of portfolio’s.
  • Jump menu - Een uitklapmenu waarbij de gefilterde nodes de opties vormen.
  • Unformatted list - De optie waarvoor wij gekozen hebben. Zo min mogelijk opsmuk, een recht toe rechtaan lijst.

* Er zijn meerdere modules die extra weergave-formaten toevoegen, zoals de OpenLayers module waarmee je nodes op een Google Map kunt tonen of de Views Slideshow module

Met weergave (onder de formaatlink) bepaal je juist hoe de node wordt weergegeven. Dit heb je op de vorige pagina al aangegeven, we hebben gekozen voor de al bestaande teaser weergave. Een andere optie is om te kiezen voor Fields weergave, zie hieronder.

Fields

Zouden als weergave modus kiezen voor Fields dan zouden we onder dit kopje de mogelijkheid hebben om precies aan te geven welke velden van de geselecteerde nodes gebruikt moeten worden in de lijst. We zouden dan kunnen kiezen voor alle velden van de door ons geselecteerde content types. In dit geval is dat alleen het type facturen, maar het zouden er ook meer kunnen zijn.

Filter criteria

Hier bepaal je welke content types allemaal in de lijst moeten terugkomen en aan welke extra filters ze dienen te voldoen om in aanmerking te komen. Ga maar eens naar de toevoegen link:

 

Je krijgt dan een hele riks van mogelijke filters waarmee je de uitvoer zo specifiek kunt maken als je zelf wilt.

Op dit moment is het filter Inhoud: Gepubliceerd (Ja) en Inhoud: Type (=Facturen) actief. Het resultaat kun je raden: alleen gepubliceerde nodes met het content type Facturen worden toegelaten in de uiteindelijke lijst. Dit hebben we in de vorige stap bepaald door het content type "Factuur" te selecteren.

Klik je op het "Inhoud: Type" filter dan zou je nog meer content types kunnen activeren. Zo heeft elk filter extra instel opties, waaronder ook de mogelijkheid om het bewuste filter openbaar te maken. Bezoekers kunnen dan zelf opgeven of ze alleen berichten van een bepaald content type / datum / onderwerp willen zien.

Sort Criteria

Nog meer filters, maar deze gaan puur over de volgorde. Hiermee kun je bijvoorbeeld een lijst op alfabet sorteren, of een lijst van cijfers sorteren van hoog naar laag. Net als de filter criteria kun je deze filters beschikbaar maken voor gebruikers.

Page Settings

Hier vind je enkele algemene instellingen, zoals het URL pad en de menu link, deze zijn al correct ingesteld. Alleen met Acces hebben we nog niks gedaan. Hiermee kun je bepalen welke gebruikers toegang hebben tot de pagina. Laten we achter acces eens klikken op de optie geen.

Standaard wordt toegang verleend aan iedereen, zonder restrictie. Maar wij willen dat gebruikers minimaal ingelogd moeten zijn om het factuur overzicht te bekijken. Kies daarom voor rol, klik op Apply en selecteer vervolgens authenticated users.*

*We gaan het verderop in de tutorial nog hebben over gebruikers en rollen aanmaken en de daarbij behorende toegangsrechten.

Kop en voet en pager

Met kop en voet kun je boven en onder de lijst extra informatie zoals een tekstveld, of zelfs een andere View, invoegen.

Via de pager opties bepaal je het aantal items op een pagina, ook dit filter kun je beschikbaar maken voor gebruikers. Verder zijn een aantal extra opties waar je niet zo snel gebruik van zult maken maar die misschien toch van pas kunnen komen, zoals de opties om een x aantal berichten bovenaan de lijst niet weer te geven.

De more link kom ik op terug als we een block gaan maken.

Advanced

In de laatste kolom vind je rechtsbovenaan de advanced link.

Klik je hierop dan komen er nog meer opties (oh nee!) tevoorschijn. We gaan in de komende 13 dagen niet met met de bovenste twee opties, Contextuele filters en Relationships, bezig.

Voor wie nieuwsgierig is; met contextuele filters kun je -om maar iets te noemen- een lijst maken van artikelen die gerelateerd zijn aan het artikel dat een bezoeker op dat moment bekijkt. Bekijkt de bezoeker een ander artikel dan verandert de inhoud van de view (die waarschijnlijk als blok naast het artikel is geplaatst). De inhoud wordt dus afhankelijk van de context, en die context wordt bepaald door de eigenschappen van de huidige node. Maar ook de gebruiker zelf (bijvoorbeeld zijn rol) of het URL pad kan als filter dienen.

Wat betreft relationships: dit heeft te maken met de manier waarop content in relatie staat tot andere content. Stel dat je speciaal voor beheerders een View wilt maken waarin alle facturen worden getoond, maar dan georderd op klant. Als je er voor zorgt dat er een relatie is gemaakt tussen facturen en klanten (wat we later nog gaan doen) dan kun je die relatie hier opgeven en gebruiken voor het ordenen van je View. Deze video (engels) geeft kort en bondig weer wat je hier in theorie allemaal nog meer mee kunt doen (in de video wordt Drupal 6 gebruikt, maar de principes zijn hetzelfde).

Exposed forms

Als je bepaalde filters toegankelijk hebt gemaakt voor gebruikers dan kun je hier bepalen hoe de filters precies worden weergeven. Denk aan het gebruik van een dropdown menu of selectie lijst en het verandernen van de inhoud van labels.

Other

De naam zegt het al, hieronder vallen alle overige opties, de meeste daarvan laten we nu links liggen, alleen Caching en CSS class wil ik vermelden.

  • CSS class: dit is met name interessant voor de designers onder ons: aan elke view kun je een eigen CSS class toevoegen zodat het mogelijk wordt om de output van een View een eigen stijl mee te geven. Onder formaat instellingen heb je overigens een soortgelijke optie.
  • Caching: een View samenstellen kost aardig wat rekenkracht en doormiddel van caching zorg je ervoor dat al dit rekenwerk al is gebeurd op het moment dat de bezoeker op een pagina komt, het resultaat ligt dan als het ware al op hem te wachten waardoor de pagina veel sneller laadt. Later in deze tutorial komt de performance van de website en caching verder aan bod. Wil je nu alvast iets lezen over caching in Views dan kan dat hier.

Views preview

Misschien heb je het al gezien, maar als je naar beneden scrolt zie je het resultaat van onze huidige filter instellingen. Als het goed zie je hier een lijst met de door jou eerder gemaakte voorbeeld facturen, netjes onder elkaar. De teaser weergave zorgt ervoor dat alleen de titel, het factuurnummer en het bedrag te zien is.

Zie je niks? Sla deze View dan eerst op (rechtsbovenin) en controleer of je voorbeeld facturen wel zijn gepubliceerd.

Perfect. Nouja, bijna perfect.

Bovenaan de lijst zou eigenlijk een tekstje moeten staan als “Hieronder bevindt zich een overzicht van uw beschikbare facturen.” Ook zou het mooi zijn als klanten de mogelijkheid hebben om facturen te sorteren op datum of bedrag.

Slot

Laat alles even rustig berusten, dan gaan we morgen met frisse moed onze View verder perfectioneren.

Laatst gewijzigd op: