SharePoint

SP.UI en ECMA-script

16 februari 2012

In een presentatie zag ik laatst iemand gebruik maken van alert(); om de gebruiker te informeren over het slagen van een asynchroon event. Naar mijn mening niet echt gebruiksvriendelijk. Gelukkig heeft SharePoint hier zelf een framework voor genaamd: SP.UI . In deze blog post wil ik niet alleen aandacht besteden aan SP.UI maar ook aan ECMA-script en CAML.

Case
We hebben een team/project-site. De eindgebruiker moet geïnformeerd worden over zijn of haar openstaande dringende taken, zonder hiervoor zelf eerst naar de takenlijst te gaan.

Tools

Om dit te kunnen bereiken maak ik gebruik van een aantal technieken:

[listdot]

  • CAML, de querytaal van SharePoint
  • ECMA,  Client Side Javascript voor SharePoint
  • SP.UI Framework, informatie tonen op een gebruiksvriendelijke manier

[/listdot]

Query

Om te beginnen moet er bepaald worden welke taken er nog open staan. Hiervoor moet er worden gefilterd in de takenlijst. De eisen zijn: huidige gebruiker, einddatum vandaag en niet voltooid. Om dit te bereiken is de volgend CAML query nodig:

 

Helaas heeft CAML geen optie zoals SQL count(*), dus moeten we eerst alle lijst-items ophalen en kunnen we daarna pas een .get_count() doen.

Items ophalen
Om de lijst-items om te kunnen halen is Javascript nodig:

In dit stukje code wordt de context opgevraagd van de gebruiker, daarna geef ik aan dat ik van de lijst ‘taken’ alleen de items op wil halen die voldoen aan mijn CAML-query.  Als laatste geef ik aan welke methodes aangeroepen moeten worden bij het slagen (of niet slagen) van de query. Dit is nodig omdat het een asynchroon verzoek is.

UI Framework aanroepen

Als de query geslaagd is, moet het aantal taken aan de gebruiker getoond worden. Hiervoor wil ik de standaard SharePoint statusbar gebruiken. Deze is aan te roepen door SP.UI.Status.addStatus. Deze functie geeft het ID van de status terug, zodat we hier later nog wat mee kunnen doen.\,  maar eerst moeten we weten hoeveel taken er open staan. (Ik wil dingen als ‘er staan 1 taken open’ graag voorkomen)

Met statusId kan ik de kleur van de status aanpassen, hiervoor zijn vier kleuren beschikbaar: blue, green, yellow en red. In het bericht zet ik voor de eindgebruiker meteen een linkje naar een overzicht van zijn/haar taken. Hieronder het resultaat:

 

 

Dezelfde statusbalk kun je ook gebruiken voor de foutafhandeling natuurlijk:

 

Het resultaat:

Uiteindelijk heb je dus maar één Javascript nodig om deze gebruiksvriendelijke oplossing neer te zetten. Dit script kun je in de default.aspx verwerken, of in een content editor webpart gebruiken. In dit voorbeeld heb ik script.txt in de document library gezet en in een content editor webpart hierna verwezen.

Er is één belangrijke voetnoot:

Begin je script met:  ExecuteOrDelayUntilScriptLoaded(getOpenTaken, “sp.js”);

Als je dit niet doet kan het gebeuren dat SP.js (hierin zit het UI framework) nog niet helemaal geladen is voordat jouw script word uitgevoerd, en zal SP.UI.Status.addStatus dus niet werken.

 

 

 

 

You Might Also Like

1 reactie

  • avatar
    Reply Nico de Jong 17 februari 2012 at 18:05

    Super nuttig – echt een real life example en een van die features die in SP2007 web 1.0 opgelost moesten worden maar met SP2010 en zoiets als dit blogartikel web 2,0-ig opgelost kunnen worden .. erg leuk …

  • Plaats een reactie