Med konceptet enterprise search menas att användaren kan söka i flera datakällor med en och samma sökfråga.

I Sandvikens fall innebar detta att de ville att användaren skall få sökträff på både personer och sidor när han eller hon gör en sökning.

Sandviken använder sökmotorn SiteSeeker som har möjlighet att indexera dynamiska webbsidor.

Lösningen är inte byggd med portlets utan bara lättuppdaterade skript.

Indexering

Genom att skapa en dynamisk sida i SiteVision som hämtar användarinfo från katalogen kan man få SiteSeeker att lägga in dessa i sitt index. Sidan skapas på natten när SiteSeeker spindlar hela intranätet.

SiteSeeker sparar en specialskriven html struktur för varje person, som sen används när sökresultatet visas.

Indexeringen går till så att SiteSeeker får en startpunkt till en sida som genererar alla bokstäver i alfabetet. Bokstäverna är länkade till en sida som söker på katalogträffar (personer med ett användarnamn som börjar på bokstaven).

Sidan med träffar länkar till sidan som visar en (1) personträff på just den katalogträffen.

Denna sida indexeras av SiteSeeker och taggas med metadatat person=yes.

Sökträffsidan

Genom att tagga träffen med ett metadata kan man sen söka ut bara personträffar.

Det finns också en möjlighet att visa endast träffar inom personer

Personalbilder

Alla personalbilder sparas i en separat webbtjänst. En databas håller koll på viket bild-id som hör ihop med vilket personnummer. Detta för att personnummer inte skall exponeras för användaren.

Alla användare kan välja om hans eller hennes bild skall visas eller ej.

Alla dessa funktioner funktioner körs på natten när SiteSeeker spindlar personsidan och sparar dess html-kod:

• Kontrollera om användaren vill att bild skall visas

• Slå upp bild-id kopplat till personnummer

• Skapa a-taggen med src=”bild-id.jpg”

Användaren har en sida där han eller hon kan kontrollera sina uppgifter, samt välja om bilden skall få visas

Fördelar

Låg last:

Eftersom frågor till katalogen bara ställs på natten när SiteSeeker indexerar om alla personer belastar inte personsöken katalogen vid varje sökning.

Ibland väljer man att separera personsök till en egen sida, detta för att inte sökningar på sidor skall belasta katalogen, detta problem uppstår inte med Sandvikens lösning.

Sökning på andra attribut

Eftersom personsidan indexeras i sin helhet hanterar SiteSeeker all text på den sidan som sökbar.

Därför kan man klicka på Digitalenheten i exemplet ovan och få träffar på alla personer med det ordet indexerat, plus sidor som innehåller ordet.

Om man hade velat få samma resultat med en LDAP-sökning hade man varit tvungen att skriva en sökfråga för varje attribut. När användaren klickar på sök-knappen måste man ha en funktion som klarar till exempel ordet it-enheten på ett bra sätt, både bland sidor och personer som jobbar på it-enheten.

Lätt att lägg till nya attribut

Om man vill utöka funktionen i framtiden med nya värden från katalogen är det enkelt att lägga till dessa i html-mallen. Dessa blir då automatiskt sökbara utan att nya LDAP-sökfrågor behöver implementeras.

Framtiden

Om jag har förstått det rätt kommer den nya sökmodulen i SiteVision 3 klara av att indexera dynamiska sidor (vilket inte går i dagens modul). Så även om man inte kör med SiteSeeker kommer en lösning som den ovan snart att vara ett alternativ för alla glada SiteVision-lösningar!

Dessa funktioner låter användaren skapa en mobilvänlig webbplats utan att koda varken HTML eller CSS. Detta var precis vad Upplands-Bro önskade sig; deras prio var att få en webbplats som skulle vara mycket enkelt att förvalta i framtiden.

Ett tidigare projekt hade lämnat efter sig en webbplats byggd på så sätt som ingen inom förvaltningen förstod. De kunde därför inte ändra utseendet eller funktionaliteten, utan var alltid beroende av konsulter. 

Även om de responsiva funktionerna är nya och odokumenterade är det tämligen enkelt att förstå hur de fungerar. Funktionen bygger på ramverket Twitter Boostrap vilket gör att ramverkets dokumentation är till stor hjälp.

Alla inställningar görs i menyerna, men vill man skriva egen CSS finns det även inputfält för detta.

Vi byggde faktiskt först webbplatsen utan de responsiva funktionerna på grund av tidspress, men sen var det bara några få dagars jobb att lägga till den responsiva funktionen till grundmallarna. Textsidor pekades sen om till nya grundmallen och webbplatsen blev mobilapassad, utan att redaktörerna behövde gå igenom alla sidorna.

Jag blev mycket positivt överraskad av hur enkelt det var att bygga en responsiv webbplats med denna nya funktionalitet i SiteVision 3.1!

Kan även tillägga att webbplatsen använder den nya cloud-tjänsten som SiteVision tillhandahåller. Tjänsten var mycket smidigt som helst: jag mailade över SVA-filen, och två timmar senare kunde jag logga in och fortsätta arbeta, men nu helt utan att Upplands-Bro kommun behöver tänka på serverdrift eller uppgraderingar.

SBAB ville bli första banken som hade en responsiv banklösningen för kunderna (istället för att använda sig av appar som andra banker gör).

Projektet gick ut på att bygga både en inloggad lösning (på SiteVision 2.7) och en oinloggad (på SiteVision 3.0).

Eftersom vi inte kunde uppgradera den inloggade webbplatsen kunde vi inte använda oss av det inbyggda mobilstödet som kom först i SiteVision 3.0, utan istället valde vi att skapa en gemensam CSS-fil som båda webbplatserna använder sig av.

Arbetssättet var extra intressant efter som designbyrån (Ziggy Creative Colony) satt i samma rum som oss utvecklare.

Min roll i projektet var att skapa mallar med layouter som sen kopplades mot CSS-filen som skrevs av webbutvecklaren Kal Ström.

Det krävdes även en hel del specialskript för att hantera menyerna och skapa en god redaktörsupplevelse.

SBAB har omkring 600 000 besök per månad, varav drygt 60 000 sker via mobil eller surfplatta och antalet mobila besök ökar konstant.

Högerspalten

”Appmenyn”

Förut startade de anställda sina applikationer genom en rättighetsstyrd på intranätets startsida. Men under projektet pratade vi om att det ibland faktiskt kan få vara lite roligare och trevligare att jobba. Så vi kollade på hur iPhonen fungerar med dess ikoner för att starta program, och snodde idén rakt av…

De 19 applikationerna fick alla var sin nygjord ikon med ”Apple-känsla”. När man klickar på dem öppnas respektive systems webbsida eller applikation.

Rättighetsstyrningen avgör fortfarande vilka man får se.

Man kan påpeka att det inte alltid är jätteenkelt att ta fram 19 nya ikoner som skall godkännas av 19 applikationsägare…

Notifieringar

När önskemål om att kunna signalera utifall att en applikation hade ”väntande ärenden” dök upp valde vi att fortsätta på ”iPhone-spåret”.

Varje ikon är förberedd för att kunna visa upp en notifiering med samma utseende som i iPhonen.

Teknik: Varje applikationsägare kan skapa en sida som ställer en Ajax-fråga till. Kommunikationen sker via JSONP, och eftersom användaren är inloggad i webbläsaren (via Windows) så vet applikationerna vilken siffra som gäller för användaren.

Nyheter

Nyheter är en summering av alla nyhetsartiklar som skrivits i något av de över 300 nyhetsarkiven som finns på intranätet.

De visas med rubrik och en del av ingressen.

Vi bytte från klassisk datumvisning i stil med 2012-08-12 till det mer lättlästa ”Idag”, ”I torsdags”, ”Förra veckan”, etc.

Nyheterna visas med en ”oändlig scroll”, när du scrollat längst ner på sidan laddas 20 st nya artiklar in (på samma sätt som när du scrollar ner din Facebook-vägg).

Ett enkelt knep för att förenkla för användaren är att använda link:visited-atributet på rubriker. Det gör att man enkelt kan se vilka nyheter man redan har varit inne och läst.

Dessa tre funktioner tillsammans gör att användaren enkelt kan få en uppfattning om vilka nyheter man inte läst, även om hon eller han vart bortrest i tre veckor.

Prenumerationer

Under fliken Prenumerationer visas nyheter från något av de arkiv som användaren har valt att prenumerera på.

Visningen är utformad på samma sätt som för Nyheter.

Driftinfo

Driftinformation visas under en av flikarna.

Redaktörerna har även möjlighet att flagga ett driftmeddelande som akut vilket resulterar i att det lyfts och läggs under appmenyn.

Favoriter

Favoriter illustreras med hjälp av stjärnan på alla intranätets sidor. På just startsidan hittar man den bredvid flikarna för nyheter.

Mouseover-funktionen som används är:

http://uhleeka.com/demo/bubbletip/

Summering

När vi lanserade den nya startsidan fick den ett varmt mottagande. Användarna tyckte den innehöll en lagom blandning av information och arbetsredskap.

En framgångsfaktor var att vår projektgrupp bara bestod av fyra medlemmar, varav den ena var en ihärdig projektledare som hela tiden hade kontakt med alla intressenter för att få snabba Ja/Nej-svar på våra förslag.

Projektgruppen bestod också av två designers vilket resulterar i en inte-välja-första-bästa-mentalitet. Utan istället sporras man att försöka överträffa den andras förslag och idéer. Den här iterativa designprocessen tror jag är väldigt fördelaktig.

Även stor verktygskunskap (i det här fallet SiteVision) är viktigt. Det gjorde att vi enkelt kunde bygga prototyper av idéer utan att behöva tänka på saker som ”tid är pengar” i för stor utsträckning.

Jag tror slutligen att det är nyttigt att ta sig en titt på startsidan några månader efter lanseringen av ett nytt intranät.

Användares synpunkter kan samlas in, och man har själv haft tid att reflektera över val man tidigare gjort.

När vi fick möjlighet att göra om startsidan tog vi ett rejält omtag, och lyckades höja antalet visningar med 4000/dag.

Startsidan består av två spalter där den vänstras innehåll är en blandning av sådant organisationen vill att användaren skall veta om, medan den högra är mer personifierad.

Vänstra spalten

Redaktionell yta

Den redaktionella ytan ägs helt av kommunikationsavdelningen, och det finns inga begränsningar för hur de kan använda den.

Den är inte heller kopplad till ett klassiskt nyhetsarkiv, utan istället kan redaktörerna koppla nyheterna till sidor, nyheter eller externa artiklar.

Den här friheten innebär också att de kan variera dispositionen av ytan.

Utfällbar statistik

Ledning på Arbetsförmedlingen vill på ett tydligt sätt visa för medarbetarna hur organisationen ligger till jämfört med de mål som satts upp.Tre ikoner ger en första överblick, och om användaren expanderar ytan visas procentsatser för hur nära organisationen är att uppfylla sina mål.

Det finns även en länk till en sida med förklarande texter samt mer statistik.

Banners

Arbetsförmedlingen arbetar mycket med banners för att pusha för olika kampanjer eller tillfälliga satsningar.Bannersytan kan visa antingen två små eller en stor. Dessa slumpas från en mapp vilket gör att man kan använda fler än annars bara två.

Sök kollega

Personsöksidan låg förut alltid två klick bort från startsidan. Det gör den fortfarande, men vi skapade ett enkelt litet formulär som finns tillgängligt direkt. Formuläret länkar till samma sida som innan, och skickar med de parametrar användaren fyllt i.

Webbfråga

Det pratas mycket om det sociala intranätet. Arbetsförmedlingen har påbörjat arbetet genom att använda sig av kommentarer på vissa av nyheterna på intranätet.

Ett annat sätt att integrera användare i intranätet är att låta han eller henne tycka till/svara på frågor.

Frågorna ligger uppe under några dagar, och resultatet presenteras sen i en nyhet.

Omvärldsbevakning

Flikmenyn

För flikmenyerna använder vi jQuery-pluggen EasyTabs.

Allt innehåll i flikarna (även den som är öppen från början) hämtas med Ajax efter att sidan har laddats. Så när man byter mellan flikarna laddas innehållet in i bakgrunden. Detta för att inte servern skall behöva skapa innehåll för flikar som användaren sen ändå inte klickar på.

Media

Under fliken media finns en lista med länkar som sätts ihop av en extern leverantör. Länkarna går till artiklar på Internet som kan vara bra att känna till för de anställda på Arbetsförmedlingen.

Listan kommer till oss i RSS, och vi använder Googles API för att transformera den till HTML.

(Dom ringde faktiskt från Google och undrade över vår belastning av deras API, men när vi förklarade att det gällde Arbetsförmedlingens intranät var det inga som helst problem.)

https://developers.google.com/feed/

Pressmeddelanden

Under fliken Pressmeddelanden visar vi upp en RSS med alla nationella pressmeddelanden från Arbetsförmedlingen.se.

Detta för att de anställda enkelt skall kunna se vad vi kommunicerar ut till omvärlden.

Teknik: Så även om både Arbetsförmedlingen.se och intranätet är SiteVision-webbplatser använder vi RSS för att kommunicera mellan dem.

Facebook

Arbetsförmedlingen har en mycket aktiv Facebook-sida där kraft läggs på att svara på frågor och tipsa om möjligheter till nya jobb.

Inte alla anställda har kunskap om hur man hittar till sidan, men vi ville ändå ge dem möjlighet att hänga med i vad som pågår där, och skapade därför en funktion för att läsa in flödet från sidan.

Det är inte mening att de anställda på Arbetsförmedlingen skall ge sig in i debatten eller svara på frågor (detta finns det speciellt anställda för), så från startsidan kan man bara läsa inläggen (inte ”gilla” eller kommentera), men det finns även en länk till Facebook-sidan.

Vi tror den här funktionen på ett enkelt sätt har ökat kunskapen bland de anställda om Arbetsförmedlingens engagemang i de sociala medierna. 

Teknik: Det visade sig att Facebooks API för att hämta information är ganska begränsat i antal hämtningar per dag. Vi har därför fått cachea resultatet hos oss, så när vi upptäckte att även hämtandet av användares profilbild räknades som API-användande fick vi en hel del problem, och blev tillslut tvungna att cachea även dessa.

Mer statistik

Även om den övre statistiken visar hur organisationen ligger till jämfört med målen, kan det även vara bra om de anställda känner till siffrorna.

Lediga jobb

En RSS från ett system som hanterar interna jobbannonser för Arbetsförmedlingen.

Facebook erbjuder den här funktionaliteten genom deras comments, problemet är att den ger den anställde möjlighet att kommentera och ”gilla” saker direkt. Ofta vill organisationen att den här typen av aktiviteter skall skötas av exempelvis informationsavdelningen.

Arbetsförmedlingen har en tydlig profil i sociala medier och vill att de anställda skall vara insatt i vad som sägs, därför har vi valt att lyfta in Facebook-väggen på intranätet, men med hjälp av pluginen fb.wall.

Fördelen med den här är att det inte går att interagera med kommentarerna, utan bara läsa.

Väggen presenteras ihop med samlingar av nyhetsartiklar och pressmeddelanden. Allt för att den anställde med bara två klick skall få en heltäckande omvärldsbevakning.

+

Men det finns en lösning!

Det man kan göra är att låta ett skript skriva ut användarens namn i ett gömt fält, för att sen flytta över det till namnfältet, samt sätta så det inte går att redigera.

I JavaSkript-delen hämtar vi användarens namn och lagrar den i variabeln name.

var utils = request.getAttribute("sitevision.utils");
var propertyUtil = utils.getPropertyUtil();
var context = utils.getPortletContextUtil();
var user = context.getCurrentUser();
 
var name = "";
 
try {
name = propertyUtil.getString(user, "displayName");
} catch(e) {}

Sen använder vi jQuery för att hämta och stoppa in namnet i rätt fält. Efter det förhindrar vi användaren från att ändra värdet.

I raden:

var inputField = $(‘#name12_61fd919f1288caeb0c4800032156′);

Måste vi stoppa in det id-nummer fältet fick när vi la ut kommentarsmodulen på sidan. Det gör man enklast genom att markera det i Firebug och se vilket id det fick.

Här är resten av skriptet som kopieras in i Velocitydelen:

<div id="userName" style="display: none;">$name</div>
<script>
 $(document).ready(function() {
 var name = $('#userName').html();
 var inputField = $('#name12_61fd919f1288caeb0c4800094285');
 inputField.val(name);
 inputField.attr('readonly', true); 
 inputField.attr('disabled', true);
 inputField.css('background' ,'#CCC');
 inputField.css('color', '#333');
 inputField.css('border' ,'1px solid #666');
 });
</script>

Obs: Eftersom den här lösningen är beroende av att JavaScript är påslaget i webbläsaren finns det en liten möjlighet för användaren att ta sig runt skyddet genom att stänga av Javascript.

Det fungerar på så sätt att när användaren börjar skriva några bokstäver i blankettens namn visas en lista på blanketter som stämmer överens. Om användaren då känner igen blanketten i listan är det bara för henne att klicka på den. Helt utan att behöva leta runt i en djup filstruktur.

Jag har byggt funktionen i en webbplats som går att ladda ner som en SVA-fil. Webbplatsen är byggd i SiteVision 2.7.

Funktionen använder jQuery och jQuery UI.

Ladda ner.

Problemet är att man inte kommer åt den med CSS, utan varje gång en redaktör vill använda webbfrågan måste hon göra en mängd inställningar för att den skall passa in med resten av webbsidans utseende. Därför kan man ibland som administratör dra sig för att ge redaktörerna rättigheter att använda sig av modulen.

Men det finns en lösning! Tack vara jQuery kan vi lista ut webbfrågans olika delar, och tilldela dem klasser, samt ändra dess färger etc.

jQuery-skriptet kan man lägga i grundmallen så det körs på alla sidor. På så sätt kommer webbfrågorna se rätt ut var än redaktören placerar den. Det enda redaktören behöver göra är att tilldela modulen klassen “webbfraga”.

<script>
$(document).ready(function() {
 
 var doDouble = true;
 $(".webbfraga table table").each(function (i) {
 
 // Sätter klass på rubrik
 $(".webbfraga caption").each(function (i) {
 $(this).removeClass('normal');
 $(this).addClass('ah4');
 });
 
 // Sätter rätt klass på text
 $(".webbfraga .normal").each(function (i) {
 $(this).removeClass('normal');
 $(this).addClass('11px');
 });
 
 // Sätter färg på staplar
 // Om den skall vara helfärgad
 if($(this).find('th').size() == 1)
 {
 
 var s = $(this).parent().parent().html();
 
 if(s.indexOf("(0)") > -1)
 {
 // Bara vit
 $(this).find('th').css('background-color', '#ecebeb');
 }
 else
 {
 // Bara blå
 $(this).find('th').css('background-color', '#00f');
 }
 
 }
 else
 {
 // Två
 $(this).find('th:nth-child(1)').css('background-color', '#00f');
 $(this).find('th:nth-child(2)').css('background-color', '#ecebeb');
 }
 });
});
</script>