JavaScript in Inhoudseditor webonderdelen: eenvoudige uitbreidingen op webpagina's

JavaScript kan, gebruikt in Inhoudseditor webonderdelen, eenvoudige uitbreidingen op webpagina's mogelijk maken.

Te denken valt aan:
Gebruik van plaatjes in lijsten: hiertoe worden kolomwaarden door JavaScript omgezet in HTML IMG tags;
Genereren van eenvoudige Ajax webonderdelen die aangestuurd worden door informatie op een web pagina.

Voor - en nadelen:

Voordelen van dergelijke webonderdelen zijn:
Eenvoudig te maken, zonder gebruik te maken van software als SharePoint Designer, waarmee de eindgebruiker wellicht te veel kan;
Geen serverside code dus geen extra belasting voor de server(s).

Nadelen zijn:
Afhankelijkheden met browser(versies), opzet van de HTML user interface, migraties (b.v. SharePoint versies);
Kans op onnodig ingewikkelde JavaScripts.

Kortom: gebruik deze techniek voor eenvoudige uitbreidingen.

Een voorbeeld uitgewerkt: een illustratie in een lijst
In het onderstaande voorbeeld wordt een eenvoudig plaatje gegenereerd welke een percentage voorstelt. Dit plaatje wordt in een lijst weergegeven, op basis van twee kolommen: een waarde en een totaalwaarde.

Stappenplan:
De oplossing kan in de onderstaande stappen worden gemaakt:
1. Maak een lijst met daarin drie kolommen: een waarde, een totaalwaarde en een placeholder voor de uiteindelijke illustratie;
2. Maak een plaatjesbibliotheek aan waarin de illustraties worden opgeslagen;
3. Maak een inhoudseditor webonderdeel met daarin het JavaScript dat voor het genereren van het plaatje zorgt.

1. Maak een lijst met daarin drie kolommen: een waarde, een totaalwaarde en een placeholder voor de uiteindelijke illustratie
De kolommen met de waarde en totaalwaarde worden gebruikt om de placeholder voor de uieindelijke illustratie in de lijst/bibliotheek te genereren. Zie Berekeningen in SharePoint: berekende velden voor uitgebreidere uitleg over berekende velden. De inhoud van het berekende veld moet heel goed herkenbaar zijn in de HTML code (gebruik bijvoorbeeld de tekens ~ of @) in de webpagina zodat het Ajax web onderdeel de veldwaarden eenvoudig kan omzetten in andere HTML code, namelijk weergave van de illustratie, bijvoorbeeld:

[img border="0" src="http://www.blogger.com/mijnplaatjesbibliotheek/groenelamp.jpg" width="25" /]

De formule heeft de volgende vorm (waarin Status de berekening is):

= "@" & Status & "~"

Maak eventueel een weergave waarin de relevante velden worden opgenomen.
Let op: het berekende veld moet dus altijd onderdeel uitmaken van de weergave.

2. Maak een plaatjesbibliotheek aan waarin de illustraties worden opgeslagen
De URL naar de opgeslagen illustraties worden in de Ajax code van het webonderdeel gebruikt.

3. Maak een inhoudseditor webonderdeel met daarin het JavaScript dat voor het genereren van het plaatje zorgt

Onderstaande code is een voorbeeld waarin kolomwaarden in drie verschillende illustraties wordt overgezet.

[script type="text/javascript"]
// ="@"&Status&"~"
var theTDs = document.getElementsByTagName("TD");
var i=0;
var TDContent = "";

while (i < theTDs.length -1 ) {

         switch (theTDs[i].innerHTML) {

            case "@Niet beschikbaar~":
               theTDs[i].innerHTML = "[img border="0" src="http://www.blogger.com/mijnplaatjesbibliotheek/rodelamp.jpg" width="25" /]";
               break;

            case "@Beperkt beschikbaar~":
               theTDs[i].innerHTML = "[img border="0" src="http://www.blogger.com/mijnplaatjesbibliotheek/gelelamp.jpg" width="25" /]";
               break;

            case "@Beschikbaar~":
               theTDs[i].innerHTML = "[img border="0" src="http://www.blogger.com/mijnplaatjesbibliotheek/groenelamp.jpg" width="25" /]";
               break;

            default:
               theTDs[i].innerHTML = "UNKNOWN";

         }

      }

   }

   i = i + 1;
}

// ExpGroupRenderData vervangt SharePoint ivm collapsed groupings

function ExpGroupRenderData(htmlToRender, groupName, isLoaded) {
var tbody=document.getElementById("tbod"+groupName+"_");
var wrapDiv=document.createElement("DIV");
wrapDiv.innerHTML=""+htmlToRender+"";
var theTBODYTDs = wrapDiv.getElementsByTagName("TD"); var j=0; var TDContent = " ";
while (j < tdcontent =" theTBODYTDs[j].innerText">") >= 0)) {
theTBODYTDs[j].innerHTML = TDContent;
}
}
catch(err){}
j=j+1;
}
tbody.parentNode.replaceChild(wrapDiv.firstChild.firstChild,tbody);
}
[/script]

Let op:
- Het Inhoudseditor web onderdeel moet onder de lijst/bibliotheek met plaatjes staan. Anders worden de waarden in de berekende kolom niet vervangen door de bijbehorende plaatjes
- Vergeet niet het JavaScript webonderdeel te verbergen (zie de instellingen van het betreffende webonderdeel).

Tips en valkuilen:
- Houd rekening met de verschillende browsers die JavaScript ondersteunen; wat in de ene browser werkt, hoeft niet perse in de andere browser te werken.
- Houd rekening met migraties, b.v. naar een volgende versie van SharePoint of een wijziging van de structuur of user interface. De JavaScript functionaliteit is afhankelijk van de opbouw van de (DOM) structuur van de webpagina waarin het script draait. Wijzigt deze pagina, dan kan het JavaScript niet meer functioneren.
- Houd rekening met de volgorde waarin de webpagina wordt opgebouwd en dus het moment waarop de zich daarin bevindende JavaScipt wordt uitgevoerd. Stel: een JavaScript wordt uitgevoerd voordat een webonderdeel waaruit gelezen wordt, wordt geplaatst, dan kan het zijn dat het JavaScript niet functioneert.
Vermijd afhankelijkheden met de webpagina en/of de website in het JavaScript. Hoe meer afhankelijkheden, hoe meer werk bij migratie of hergebruik van het webonderdeel in andere sites en op andere web pagina's.
- Vermijd langlopende JavaScripts; deze kunnen de responsetijd van de betreffende webpagina aanzienlijk verhogen of de pagina zelfs "ophangen".
- Vermijd onnodig ingewikkelde JavaScripts, val op tijd terug op een andere oplossing, b.v. middels SharePoint Designer, Visual Studio of een oplossing van een derde partij.
- Gebruik kleine (minimale hoeveelheid schijfruimte) om het weergeven van het overzicht snel te houden.
- Gebruik duidelijke, maar niet te vele in het oog springende plaatjes. Het doel van de plaatjes moet te allen tijde worden ondersteund. Het implementeren van deze oplossing is geen doel op zich.