Logo 1001 tips
De Parisienne - Roman van André Van Butsel

Zoektocht naar een verdwenen jeugdvriendin.

Lees meer >>

Meisje aan de Overkant - Debuutroman van André Van Butsel

Een simpele dorpsjongen, een rebels stadsmeisje, een ontroerende vriendschap.

Lees meer >>

 


 

Vorige pagina

Dynamische KPI-lijst met Google charts

  1. Startpagina Sharepoint oplossingen en handleidingen
  2. Top 10 verbeteringen en vernieuwingen in Sharepoint 2010
  3. Werken met het webonderdeel Inhoudseditor (CEWP)
  4. Onderdelen van een Sharepoint pagina verbergen
  5. Dynamische KPI-lijst met Google charts
  6. Lijst met grote tekstvelden inklappen en uitklappen
  7. Lange veldnamen in een formulier afbreken
  8. Een bevraging of enquête gebruiksvriendelijker maken
  9. Gratis Sharepoint Designer!

De Google Charts API (http://code.google.com/intl/nl/apis/chart/) laat toe om aan de hand van een URL en enkele parameters, grafieken te ontwikkelen. Klik eens op deze link en je krijgt een mooi grafiekje te zien. Mits enige verdieping in de verschillende parameters, kan je op deze manier prachtige grafieken maken. Hieronder tonen wij een voorbeeld van een soort KPI-lijst (Key Performance Indicators) die we maakten in een Sharepoint lijst (klik op de afbeelding voor een groter exemplaar).

KPI-lijst Sharepoint

Lees verder om te zien hoe we dit in drie stappen gedaan hebben.

Stap 1: maak een nieuwe lijst

Maak in Sharepoint een nieuwe lijst met:

  1. een titel (bijv. taak, opdracht),
  2. 8 kolommen van het type getal (kol-01, ...kol-08)
  3. 4 berekende velden voor de grafieken

Misschien zou je eerst geneigd zijn om velden te maken van het type URL of afbeelding. Het nadeel daarvan is dat je de inhoud van dat veld niet dynamisch kan aanpassen, en dat de lengte van het veld beperkt is tot 255 karakters.

De oplossing zit hem in het gebruik maken van berekende velden om de grafieken samen te stellen. Op die manier ontsnappen we tevens aan de beperking van 255 tekens in een gewoon URL veld. Een berekend veld heeft die beperking immers niet, en kan tot max. 1000 karakters hebben. Zelfs als je een langere berekening hebt dan 1000 karakters, kan je die nog altijd opsplitsen in verschillende velden.

Stap 2: voer formules in voor de berekende velden

In de vier velden voor de grafieken voeren we een formule in, gebaseerd op:

  1. parameters van de Google Charts API,
  2. 8 vaste waarden (bijv. 60,60,70,60,60,50,60,60),
  3. 8 variabele waarden die we uit de 8 kolommen halen.

Voor een goede leesbaarheid beginnen we elke parameter van Google Charts op een nieuwe lijn. In de formule zelf moet uiteraard alles aaneen hangen. Voor een uitleg over de verschillende parameters verwijzen we naar de Google Charts API: http://code.google.com/intl/nl/apis/chart/

Voor de radargrafiek gebruikten we volgende formule:

=TEKST.SAMENVOEGEN("<DIV><img src='http://chart.apis.google.com/chart?
cht=rs&
chs=250x250&
chco=12bf12,4d89f9&
chls=2,4,0|2,4,0&
chm=B,FF990080,0,1,5|B,4d89f980,1,1,5&
chxt=x,r&
chxl=0:|KPI1|KPI2|KPI3|KPI4|KPI5|KPI6|KPI7|KPI8&
chxr=0,0,10|1,0,10&
chd=t:60,60,70,60,60,50,60,60|";[Kol-01]*10;",";[Kol-02]*10;",";[Kol-03]*10;",";[Kol-04]*10;",";[Kol-05]*10;",";[Kol-06]*10;",";[Kol-07]*10;",";[Kol-08]*10;"'></DIV>")

Voor de kolomgrafiek deze:

=TEKST.SAMENVOEGEN("<DIV><img src='http://chart.apis.google.com/chart?
cht=bhg&
chs=250x250&
chxr=0,0,10|1,0,10&
chbh=a&
chds=0,10&
chco=12bf1280,4d89f9&
chxt=x,y&
chxl=1:|KPI1|KPI2|KPI3|KPI4|KPI5|KPI6|KPI7|KPI8&
chm=D,4d89f9,1,0,2,1&
chd=t:6,6,7,6,6,5,6,6|";[Kol-01];",";[Kol-02];",";[Kol-03];",";[Kol-04];",";[Kol-05];",";[Kol-06];",";[Kol-07];",";[Kol-08];"'></DIV>")

Horizontale staven:

=TEKST.SAMENVOEGEN("<DIV><img src='http://chart.apis.google.com/chart?
cht=bvg&
chs=250x250&
chxr=0,0,10|1,0,10&
chbh=a&
chds=0,10&
chco=12bf1280,4d89f9&
chxt=y,x&
chxl=1:|KPI1|KPI2|KPI3|KPI4|KPI5|KPI6|KPI7|KPI8&
chd=t:6,6,7,6,6,5,6,6|";[Kol-01];",";[Kol-02];",";[Kol-03];",";[Kol-04];",";[Kol-05];",";[Kol-06];",";[Kol-07];",";[Kol-08];"'></DIV>")

Taartdiagram:

=TEKST.SAMENVOEGEN("<DIV><img src='http://chart.apis.google.com/chart?
chs=250x200&
cht=p3&
chdl=KPI1|KPI2|KPI3|KPI4&
chco=0000FF|8be08b|f79781|a8c5fc&
chd=t:";[Kol-01]*10;",";[Kol-02]*10;",";[Kol-03]*10;",";[Kol-04]*10;"'></DIV>")

Hierin zijn [Kol-01] tot [Kol-08] de naam van de 8 kolommen. KPI1 tot KPI8 zijn de labels voor bij de grafieken en staan dus voor 8 KPI's, competenties of wat dan ook.

Stap 3: een CEWP (webonderdeel inhoudseditor) toevoegen om de html te renderen

Je vraagt je wellicht af waarom die <DIV> tags moeten mee opgenomen worden in de formule?

Hiervoor hebben we een ander maar zeer krachtig wapen nodig. Immers, als we onze lijst bekijken, zien we geen grafieken, maar een formule. We hebben dus iets nodig om die formule door de browser te laten "renderen" als een grafiek. Daarvoor hebben we twee zaken nodig:

  1. een Webonderdeel Inhoudseditor (Eng: Content Editor Web Part of kortweg CEWP)
  2. een javascript dat zegt dat onze DIV-tags moeten gerenderd worden als HTML.

Toevoegen van een CEWP en een javascript in de lijst

  1. Open de lijst in de standaardweergave
  2. Klik op Siteacties > Pagina bewerken: je krijgt de mogelijkheid een Webonderdeel toe te voegen. Voeg het Webonderdeel Inhoudseditor toe, en verplaats dit helemaal naar onderen onder de lijst. Dit is belangrijk!
  3. Bewerk het webonderdeel en vink aan onder Vormgeving "Verbergen". Hierdoor is er niks te zien van dit webonderdeel.
  4. Klik op de knop "Broneditor" en voeg onderstaand javascript toe.
  5. Sla alles op

Dit is het javascript:

<script type="text/javascript">
//
// Text to HTML
// Feedback and questions: Christophe@PathToSharePoint.com
//
var theTDs = document.getElementsByTagName("TD");
var i=0;
var TDContent = " ";
while (i < tdcontent =" theTDs[i].innerText">= 0)) {
try {
TDContent = theTDs[i].innerText || theTDs[i].textContent;
if ((TDContent.indexOf("<DIV") == 0) && (TDContent.indexOf("</DIV>") >= 0)) {
theTDs[i].innerHTML = TDContent;
}
}
catch(err){}
i=i+1;
}
//
// ExpGroupRenderData overwrites the default SharePoint function
// This part is needed for collapsed groupings
//
function ExpGroupRenderData(htmlToRender, groupName, isLoaded) {
var tbody=document.getElementById("tbod"+groupName+"_");
var wrapDiv=document.createElement("DIV");
wrapDiv.innerHTML="<TABLE><TBODY id=\"tbod"+ groupName+"_\" isLoaded=\""+isLoaded+ "\">"+htmlToRender+"</TBODY></TABLE>";
var theTBODYTDs = wrapDiv.getElementsByTagName("TD"); var j=0; var TDContent = " ";
while (j < tdcontent =" theTBODYTDs[j].innerText">= 0)) {
try {
TDContent = theTBODYTDs[j].innerText || theTBODYTDs[j].textContent;
if ((TDContent.indexOf("<DIV") == 0) && (TDContent.indexOf("</DIV>") >= 0)) {
theTBODYTDs[j].innerHTML = TDContent;
}
}
catch(err){}
j=j+1;
}
tbody.parentNode.replaceChild(wrapDiv.firstChild.firstChild,tbody);
}
</script>

Toevoegen van een CEWP en een javascript in de detailfiche

Als je de detailfiche wil zien van een item in een lijst, kan je klikken op dit item. Het zou uitermate interessant zijn om in die detailfiche eveneens de google charts te zien. Dus voegen we ook daar een CEWP of Inhoudseditor Webonderdeel in met het voornoemde javascript. Juist!

Alleen is er één probleem. Je kan zo'n detailformulier niet bewerken via Siteacties > Pagina bewerken. Dit item komt niet tevoorschijn in het context-menu.

De oplossing daarvoor is om een "querystring" toe te voegen aan de URL.

Een detailformulier heeft deze vorm:

/Lists/KPI/DispForm.aspx?ID=1&Source=...

Voeg gewoon dit toe na het eerste vraagteken:

ToolPaneView=2&

De URL ziet er dan als volgt uit:

/Lists/KPI/DispForm.aspx?ToolPaneView=2&ID=1&Source=...

Nu kan je via Siteacties > Pagina bewerken hetzelfde doen als met de lijst. Dus een CEWP of Inhoudseditor Webonderdeel invoegen met het voornoemde javascript.

Bron voor het javascript: http://pathtosharepoint.wordpress.com/2008/08/10/the-content-editor-web-part/.

Op deze website vindt u zeer veel interessante toepassingen van de CEWP gecombineerd met een javascript.

Tip: sla het webonderdeel met de javascript/css code op in de galerie met webonderdelen, zodat jij of een collega het webonderdeel steeds opnieuw kan gebruiken. Hoe?

  1. Klik op Siteacties > Pagina bewerken
  2. Klik op het pijltje bij Bewerken van het webonderdeel en kies "Exporteren"
  3. Sla het webonderdeel lokaal op
  4. Ga naar de hoofdpagina van de sitecollectie
  5. Klik op Siteacties > Site-instellingen > Alle site-instellingen wijzigen
  6. Klik bij Galerieën op Webonderdelen
  7. Uploaden
  8. Geef bij Groep en Snel groepen toevoegen uw eigen naam op, zodat het webonderdeel achteraf in de lijst met webonderdelen voorkomt onder uw eigen naam. Vermeld ook steeds of het webonderdeel boven of onder de lijst moet staan.
Share to Facebook Share to Twitter Blogger Wordpress LinkedIn Myspace Email Meer...
Laatste aanpassing op Friday, December 8, 2017 om 09:14u

Rel to Facebook© Copyright 1001tips.be 2006-2023 - Disclaimer - Gebruiksvoorwaarden en privacybeleid
Contact: info[at]1001tips.be
XHTML-strict en CSS gevalideerd