Improve workflow & UI by making a Entity Reference View with multiple fields

User story: Help editors pick the correct representation of an article when connecting it to be displayed in a new department.

Background: We noticed that editors where picking the wrong representation of an article as there can be many of them. The reason for this being that we let editors customize the representation of their article depending on the department where it is being used.

Solution: Change the Entity Reference (usually a simple entity selection field) to a Entity Reference View.

Step by step: 1. Go and create a new view, add a Entity Reference display, and add the fields (filters etc just like a regular view) you want to display to the editors. If you select more than one field you will need to specify the ”Search fields” (Format –> Settings). In our case we added the date and department title. We are also thinking of setting a sort criteria DESC as it is likely most editors are looking for recently published content.

2. Go to your content type, and edit the field that is a Entity Reference. Change the reference selection to a view, and then pick the view you created. In ”View used to select the entities” select the display you made.

Entity reference

3. This is the end result with some additional CSS work:

Styled entity reference

Just adding the fields would have improved the editorial workflow, but just a little bit of CSS helped to make it even more usable. I removed the default wrappers and added some custom CSS classes for the fields. This way I was able to adjust the styling of the title, date and department.

.reference-autocomplete {
  border-bottom: 1px solid #f1f1f1 !important;
  padding: 3px 2px;
}
.reference-autocomplete:hover{
  border-color: transparent !important;
}
.reference-autocomplete span.er-node-title {
  font-weight: bold;
}
.reference-autocomplete span.er-post-date {
  color: #555;
  font-size: 0.8em;
}
.reference-autocomplete:hover span.er-post-date {
  color: #f1f1f1;
}
.reference-autocomplete:hover span.er-promo-parent-subject-page, .reference-autocomplete:hover span.er-kicker, .reference-autocomplete:hover span.er-content-type {
  background-color: #f3f4ee;
  border-radius: 3px;
  color: #0072b9;
  padding: 1px 2px;
}
.reference-autocomplete span.er-promo-parent-subject-page, .reference-autocomplete span.er-kicker, .reference-autocomplete span.er-content-type{
  color: #555;
  font-size: 0.7em;
  font-weight: bold;
  text-transform: uppercase;
}

Decided to style all Entity References in the admin theme with a bit more padding and a border-bottom line as it improves readability.

When trying to inspect the autocomplete div I noticed it was quite difficult to grab it via the inspect element function, but grabbing it via ”Copy as HTML” worked. This is what the basic markup looks like on a regular Entity Reference Simple field.

<div id="autocomplete"><ul><li><div><div class="reference-autocomplete">Österbotten</div></div></li><li><div><div class="reference-autocomplete">Kontakta Yle Österbotten</div></div></li><li><div><div class="reference-autocomplete">Lyssna på Radio Vega Österbotten!</div></div></li><li><div><div class="reference-autocomplete">Valet i Österbotten</div></div></li></ul></div>

The class-name of the line you hover on is named ”selected”.

Thanks to Olli Vesslin.

DrupalCon 2013 Prag och gemenskapens styrka

Jag hade nöjet att delta i DrupalCon 2013 i Prag. DrupalCon är i grunden en teknisk konferens där alla utvecklare som jobbar med Drupal samlas ihop. Just nu ligger fokus kraftigt på följande version, Drupal 8. Det är stora förändringar på väg, vilket väcker både stora förhoppningar och farhågor inom Drupalcommunityt.

DrupalCon 2013 Prag gruppbild
DrupalCon 2013 Prag gruppbild. CC By-SA Michael Schmid http://www.flickr.com/photos/x-foto/

Mindre aktörer är oroliga över att de inte längre ensamma skall kunna hantera en Drupalsajt, att de blir för komplexa. En del användare börjar använda Drupal på nya sätt så att de skär av trådarna mellan backenden (den tekniska bakgrunden) och frontenden (det som användarna ser på sina skärmar). Andra vill fortsätta att utveckla Drupal 7 ännu, eftersom det är ett fungerande system. Och ytterligare andra kan inte vänta på att Drupal 8 skall lanseras för att kunna utnyttja de nyheter som är på kommande. Klart är dock att fler utvecklare redan nu har bidragit till utvecklingen av Drupal 8 än av någon annan tidigare version.

Och det är verkligen mycket nytt, Drupal 8 innehåller över 200 nya egenskaper. Dries Buytaert, ”Drupals pappa”, tog i sin keynote särskilt upp Drupals samhälleliga betydelse, vad systemet möjliggör som ett open source webbpubliceringssystem. I linje med det fokuserade Dries också mycket på egenskaper som tillgänglighet (accessability), mångspråkighet och mobilanpassning i sitt tal. Det var också glädjande för mig att höra att en stor vikt lagts på att semantisk annotering i Drupal, huvudsakligen i linje med definitionerna i schema.org (mer om vårt arbete kring detta i ett senare inlägg).

Andra dagens keynote hölls av Lisa Welchman som pratade om vikten i att vårda den community som byggts upp. Det finns en paradox för öppna gemenskaper, där just öppenheten blir den drivande faktorn för tillväxt och kreativ gemenskap, vilket väcker krav på styrning, vilket riskerar kväsa communityt. Det här är något som man sett inom Drupalgemenskapen där dessa DrupalCons och också mindre träffar har varit fantastiskt inspirerande. Och den hjälp som utvecklarna ger till varandra helt gratis och av pur välvilja är helt fantastik. Och tänkt ur ett mer krasst affärsperspektiv otroligt prisvärd. För det arbete som gemenskapen gör och ger varandra är värd miljontals euro!

Men samtidigt kommer den andra sidan in. Då en verksamhet växer så börjar den spreta åt olika håll och kan inte längre fungera effektivt utan styrning. Men där måste man gå försiktigt tillväga. Och även styrning är något man kan göra tillsammans. Och på så vis övervinna paradoxen mellan den inspirerande och tillväxtgivande friheten och den potentiellt kväsande styrningen.

En lärdom som vi gärna kunde överföra till fler verksamhetsområden, inte minst journalistiken.

Nedan en Storify som samlar mitt twitterperspekiv på DrupalCon Prag:

Vill du jobba med datajournalistik eller spel? Ansökningstiden har utgått.

Den 22.11 2012 gick vi ut med att vi söker efter två utvecklare till Svenska.yle.fi. Det här är en stor grej för oss på Svenska Yle då vi inte haft en möjlighet att verkligen utvidga vårt team så här sedan början på 2000-talet, trots att behovet ökat markant på 12 år. De jobb vi nu lediganslagit, ett webbutvecklarjobb med inriktning på spel och ett webbutvecklarjobb med inriktning på datajournalistik, visar också klart på vilka delområden Svenska Yle satsar på. Vi valde avsiktligt att inte gå på Monty Python-linjen den här gången eftersom man inte kan upprepa en likadan reaktion två gånger. Förra gången vi sökte en webbutvecklare som ersatte en person som slutat gick det nämligen så här.

Båda jobben är mycket intressanta och ger den personen som får jobbet möjlighet att jobba med ett team som är framåt och otroligt duktigt.

Det har redan länge stått klart att vi behöver mer krut för att kunna presentera innehåll som datavisuliseringar och stöda datajournalistiken på Svenska Yle. Trots att vi inte haft en enda dedikerad person för jobbet så har vi lyckats skapa en hel del journalistiskt innehåll utgående från tillgänglig data. Orsaken till att det lyckats är att en av Finlands främsta personer när det gäller datajournalistik finns i vårt team, Teemo Tebest, som har gett oss en insikt i hur mycket man verkligen kan göra med den data vi har tillgång till. Det mest uppmärksammade projektet vi gjort är Maktbasen http://svenska.yle.fi/maktbasen, men vi har också jobbat fram Svenskfinland som fem storkommuner utifrån datan i Maktbasen. Därutöver har vi haft mindre projekt, till exempel Alkoholkartan och Hjälp Kalle. När vi nu utökar vårt team med en webbutvecklare som skall ha som sin huvuduppgift att jobba med datajournalistik blir det en hel del annat att se fram emot.

Varje år har BUU-klubbens webbsatsningar och spel skapat glädje och förtjusning hos både barn och vuxna. Det är helt klart ett monsterjobb som har skötts med små resurser och med stor passion. Nu ser vi en stor potential och en massa outforskade möjligheter i den barnwebbsproduktion vi kan skapa, men vi klarar inte av att göra mera utan att få förstärkning. Pia Manns är den person som drivit produktionen och även i år skapar en helt fantastiskt fin julkalender som kommer att tvinga föräldrarna att slita loss sina barn från datorerna så att de själva skall hinna spela. Det paradigmskifte vi nu har framför oss är att kunna nå ut till alla mobila plattformar, som pekplattor och telefoner, men det går inte att direkt lösa med den teknik vi använder idag. Personen vi är ute efter ska kunna se potentialen i koncepten då det gäller att anpassa dem till andra plattformar, men också att kunna göra själva jobbet. Det gäller ju inte enbart BUU, utan man har hela Svenska.yle.fi som spelplan, ja varför inte även finska Yle om det blir tid över för att kunna göra spel av journalistiskt innehåll tillsammans med hela vårt team.

Bilderna med plock ur BUU-klubbens e-post respons

 

jagfyläråridagsnälajörnyaspel

 

hei buuglup minä aijon pelata paljon teidän pelejä ne ovat  kivoja pelejä
ja hyvin keksitty ja heippa minä alan nyt pelaamaan

 

– Häj jag vill att ni lagar nya häst spell och ett nyt bill spell.

 

BUU-KLUPPEN ON KIVA PAIKKA MÄ JA MUN PIKKUSISKO PELATAA SITÄ MELKEIN AINA KUN ON TYLSÄÄ

 

jag tykär at ni har brasidår måna pusar å kramar

 

hei minä en pidä saha pelistä voisitko laittaa jotain pelejä kiitos

DrupalCon 2012 München

En del av Svenska.yle.fi hade möjligheten att som en skolningsresa delta i årets europeiska Drupalkonferens som i år ordnades i München. För mig var detta mitt första Drupalevenemang så jag visste inte riktigt vad som väntade. Då Robert Douglass dök upp i öppningen av DrupalCon iklädd dirndl och några minuter senare salen genomljöd av 1800 programmerare som joddlade steg nog orosmålen några pinnsteg …

Men snabbt blev det nog klart att ovannämnda hör till den familjära atmosfär som präglar Drupalcommunityn, och själva programmet var ytterst intressant och mångsidigt. Stor fokus låg på utvecklingsarbetet med D8, följande version av Drupal. Det arbetet är nu inne på slutrakan och de funktioner som skall med bör vara klara i december. Lansering planerad till augusti 2013. Tills dags dato har över 600 webbutvecklare arbetat med D8.

 

Utvecklingen av D8 visar på flera intressanta spår för Drupal. Ett av dem är implementeringen av php-ramverket Symfony. Detta innebär en fortsättning på breddningen av Drupals verktygspalett till externa open source-lösningar, en utveckling som redan tidigare inletts med implementeringen av javascriptbiblioteket jQuery i D7. Det här var ett spår Henri Bergius var inne på i sin keynote Decoupling content managment. I hans mening är fortfarande samtliga CMS monoliter, som borde brytas ner.

 

Utvecklingsarbetet med arkitekturen i D8 forsätter med fokus på att ytterligare underlätta såväl testning, lansering och uppgradering genom att hålla olika lager mellan innehåll, frontend och backend separata. Ett annat steg är de stora framsteg som gjort i användarvänlighet och WYSIWYG-uppdatering i D8 i och med Spark-projektet och Alhoa-editorn. Imponerande grejer! Se själv:

Förutom det mer tekniska snacket jag i ärlighetens namn stundvis hade svårt att hänga med i, kom där också många intressanta saker fram som mer berör mitt eget konceptutvecklarperspektiv. Både Dries Buytaert och Anke Domscheit-Berg pratade om hur Drupal använts för att främja genomskinlighet, samarbete och deltagande mellan myndigheter och medborgare, dvs. det sk. Government 2.0.

 

Drupal har också framgångrikt använts av ideella organisationer som behöver ett system för att med minimala instegskostnader få upp en webbplats. Öppna ”distron” är här till stor hjälp, de är liksom nycklarna-i-handen-färdiga-att-tas-i-bruk webbpaket. En intressant presentation på DrupalCom handlade om ett av dem, OpenAid.

Andan av open source kändes starkt på många håll. Förrutom ovan nämnda OpenAid så var det Sony-sponsorerade projektet med views i Drupal6 ännu i färskt minne. De investerade miljoner i utvecklingspengar för att bygga mångspråkiga sajter för fans till de stjärnor som de har hos dem. De släppte sedan allt vad du utvecklat öppet till Drupal-gemenskapen. Som sedan dess bidragit med vidareutveckling som skulle ha kostat oräkneliga miljoner . Samma kungstanke ligger bakom initiativet Large Scale Drupal (LSD) där de största aktörerna som använder Drupal samarbetar med stora utvecklingsprojekt. Jag ställde i detta sammanhang en representant från NBC frågan om detta är besvärligt ur konkurenssynvinkel, han menade att det inte är så. ”Det är ju innehållet vi konkurerar med, inte de tekniska verktygen vi använder för att publicera innehållet. Dessutom gav detta oss bra insyn och samarbete med hur t.ex. Disney löst en del problem som vi också haft”.

Utöver det officiella programmet var korridorsnacket, Birds of a Feather-sessionerna (spontana möten kring av deltagarna föreslagna ämnen) och möjligheterna att träffa de främsta experterna inom området verkligen givande. Vi fick t.ex. stor hjälp och härligt meningsutbyte av Lin Clark och Stéphane Corlosquet, de ledande krafterna inom semantisk webb och Drupal. Och Dan ”dman” Morrison gjorde en code review av Svenska Yles Onki-modul mitt under pågående konferens. Mer om allt detta kommer så småningom här på Utvecklingsbloggen.

Just dessa möten, gemenskapen, samarbetet (och det goda ölet i München) blev de stora behållingarna av DrupalCon 2012 Munich.

 

It’s all about the community

Group Photo* DrupalCon Europe 2012. Munich, Germany

PS. gratis Drupal-klistermärken till den som kan hitta bloggpostförfattaren från bilden ovan 🙂

Datajournalistik i SYND

Nu när vi har använt Svenska Yles nya Drupal eller SYND i ett par månader är det tid att se hur systemet kan utnyttjas. Drupal är flexibelt och det möjliggör skapandet av olika innehållstyper.

Jag är mest interesserad av hur vi kan göra datajournalistik och andra visualiseringar i systemet. Vi har redan gjort några och jag tänkte prata lite om dom.

Vad har redan hänt

Visualisering gör det lättare att upptäcka skillnader.

Första större visualiserings jobbet som vi publicerade i SYND var en karta som visade hur mycket alkohol som säljs i finska kommuner.

Kartan bidrog till helheten i Radar:s rapportering om alkoholanvändningen i Finland. Den huvudsakliga produkten var radioprogrammet, men kartan publicerades samtidigt på Radars webbsida (som är publicerad i SYND).

Kartan var interaktiv vilket betyder att man kunde peka på kommuner med musen och sedan fick man mer information och statistik om den valda kommunen. Jag tycker att interaktiva visualiseringar är mer intressanta än statiska infografik, när användningen av visualiseringen känns mer som ett spel. Det att det är roligt gör att man utforskar datan mera.

Kartan var mycket populärt och då den är gjord med HTML5 så fungerar den med alla apparater och plattformar. Kartan funkade också med mobila enheter när den var bara 300px bred.

Google Forms möjliggöra att göra saker snabbt.

Andra och olika typers projekt gjorde vi på sommaren. Det var ett frågeformuläret som hade fem enkla frågor som handlade om våra nya försvarsminister Carl Haglund.

Formuläret var gjort med Google Forms och det var mycket snabbt att göra. Visualiseringarna gjordes också i Google Forms verktyg. Utredningen fick nästan 600 ansvar.

Den var inte en gallup, men det var ett fint och lätt sätt att involvera användare med innehållet.

Vad händer just nu

Nu jobbar vi mest med ett större och längre projekt som behandlar politiker i finlandsvenska kommuner och deras kopplingar till företag.

Systemet ska innefatta alla finlandsvenska kommuner och avsikten är att man skall kunna bläddra bland alla olika typer av informationen som har sparats i systemet. Den här informationen innefattar exempelvis namn, parti, ålder och information om kommunfusioner.

Visualiseringarna i Maktbasen projektet är interaktiva.

Systemet är skapat i SYND med Drupal och vi har skapat egna ”entities” för att kunna skräddarsy dem enligt behov. Det har varit en utmaning att använda sig av tidigare erfarenheter inom traditionella databasmodeller, när man vill bygga systemet ”the Drupal way”. Jag tror att vi har gjort bra jobb och klarat dessa utmaningar.

Datavaalit gör ett liknande projekt där alla finska kommuner ingår, där saknas dock kommunernas förtroendevaldas kopplingar till företag. Vi samarbetar med Datavaalit-gruppen, men rent tekniskt är det två olika lösningar.

Vad vill vi göra i framtiden

Jag hoppas att interaktiva visualiseringar mer och mer kommer att bli en del av vardagen i våra nyheter. Det finns många goda exempel från världen om hur man berika innehållet med informativa visualiseringar.

Många olika diskussioner pågår och det ser ut som att allt flera aktörer börjar göra visualiseringar. Mycket utveckling med andra ord, det blir spännande att följa med utvecklingen den närmaste tiden.

(Tack Mårten för korrekturläsning)

Prestanda downtime och cache servers

Såhär med facit på handen och en vecka efter lanseringen av den nya http://svenska.yle.fi sajten är vi en hel del erfarenheter rikare vad gäller infrastruktur och server hantering som görs i samarbete med en extern partner.

Vår Drupal delar servers och databasservers med andra på Yle vilket har både positiva och negativa följder. En av de positiva sakerna är definitivt att vi har ett bättre avtal gällande support och till det negativa hör att vi delar server resurser med andra. Delar man på resurserna så är det klart att en publikation som kräver mycket resurser av infran påverkar alla andra och det är en grej som även vår Drupal lidit av under den här veckan. Då det blir som värst så är det svårt att uppdatera sidan men trots det har vi på grund av vår cache server Varnish kunnat serva användarna så gott som utan avbrott men med långa laddningstider.

Varnish är en underbar serversofta som gör allt så mycket bättre och den skulle vara helt lysande om det inte skulle vara för en fatal bugg. Den bugg som helt klart finns i Varnish v2.x och v3 och som flera specialister kollat på är att den helt enkelt inte klarar av att fungera rätt med Round Robbin regler för belastningshantering utan i praktiken styr all trafik till en server trots att man har flera konfigurerade. Det innebär att man ex bara har 50% av den server effekt man borde ha och då stöter man snabbt på problem som påverkar alla de som servas av den helheten. Även vår nya Drupal blev offer för det  på fredagen 27.4. Det varade tills vår samarbetspartner hittade ett sätt att implementera en extra belastningshanterare mellan Varnish och Apache servrarna.

En till sak man kan konstatera nu när Varnish även servar alla våra gamla sajter förutom Buu, X3M, Vetamix är att laddningstiderna på de gamla sidorna förkortats avsevärt med upp till 50% i bästa fall och med 10% i genomsnitt.

Länge leve Varnish!

I väntan på att få flytta till nya servrar så fortsätter vi optimera.

/KS