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.

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)