Tijdens de uitvoering van mijn werkzaamheden voor een klant kwam de vraag naar voren of bepaalde snelkoppelingen in een apart venster geopend zouden kunnen worden. Hier ben ik naar op zoek gegaan hoe dit te bewerkstelligen is en ben ik tot enkele oplossingen gekomen.
Koppeling in bovenste navigatie balk
Als je een koppeling in de bovenste navigatiebalk wil plaatsen en deze in een nieuw scherm wil openen kun je een stukje Javascript gebruiken om dit te bewerkstelligen. Om dit te doen plak je bijvoorbeeld de onderstaande code in het URL veld:
javascript:window.open(“http://www.centric.eu/”);void(0);
Door bovenstaande code in het veld te plakken zal er een nieuw scherm geopend worden waar de URL op wordt geopend. In het geval van dit voorbeeld zal de site www.centric.eu in een nieuw browserscherm geopend worden. Het toevoegen van links aan het menu aan de zijkant van een SharePoint pagina kan ook gedaan worden met behulp van dit stukje JavaScript. Ook hier zal de pagina in een nieuw venster geopend worden. De bovenstaande oplossing kan ook gebruikt worden in editors die gebruikt worden voor het maken van blogs (Bijvoorbeeld Windows Live Writer 2011).
LET OP!: bovenstaande oplossing werkt niet als de publishing feature van SharePoint is geactiveerd. In dit geval heb je bij het aanmaken van een hyperlink al de mogelijkheid om aan te geven of de hyperlink in een nieuw scherm geopend moet worden of niet.
Koppeling in een lijst
Indien je een koppeling in een lijst wil plaatsen dan is dit ook mogelijk. Hiertoe dien je 4 velden toe te voegen aan een bestaande lijst, of als je een lijst met koppelingen wil maken dan dien je een custom list te maken (de template ‘Koppelingen’ is helaas niet te gebruiken omdat je bij de berekende kolom niet de beschikking hebt over het veld ‘Titel’ en ‘URL’):
– Naam Hyperlink
– URL
– selectievakje ‘Openen in een nieuw venster’
– Berekende kolom ‘Naam rapport’
door in de berekende kolom de volgende berekening toe te voegen wordt er een DIV gecreëerd waar de URL in wordt geplakt. Voeg in de berekende kolom de volgende berekening in (voor een Nederlandstalige site, zie onderstaande links voor de Engelstalige berekeningen):
=TEKST.SAMENVOEGEN(“<DIV><a href=”;URL;ALS([Openen in een nieuw venster]=WAAR;” target=’_blank'”;””);”>”;Titel;”</a></DIV>”)
Als de URL’s die in de berekende kolom opgebouwd worden, getoond moeten worden op een pagina, moet op deze pagina een stuk javascript geplaatst worden. Om dit te doen voeg je een ‘Inhoudseditor’ toe op de pagina. In de broneditor van dit type web part moet je de volgende Javascript code plakken:
1: <script type="text/javascript">
2: //
3: // Text to HTML
4: // Feedback and questions: Christophe@PathToSharePoint.com
5: //
6: var theTDs = document.getElementsByTagName("TD");
7: var i=0;
8: var TDContent = " ";
9: while (i < theTDs.length) {
10: try {
11: TDContent = theTDs[i].innerText || theTDs[i].textContent;
12: if ((TDContent.indexOf("<DIV") == 0) && (TDContent.indexOf("</DIV>") >= 0)) {
13: theTDs[i].innerHTML = TDContent;
14: }
15: }
16: catch(err){}
17: i=i+1;
18: }
19: //
20: // ExpGroupRenderData overwrites the default SharePoint function
21: // This part is needed for collapsed groupings
22: //
23: function ExpGroupRenderData(htmlToRender, groupName, isLoaded) {
24: var tbody=document.getElementById("tbod"+groupName+"_");
25: var wrapDiv=document.createElement("DIV");
26: wrapDiv.innerHTML="<TABLE><TBODY id=\"tbod"+ groupName+"_\" isLoaded=\""+isLoaded+ "\">"+htmlToRender+"</TBODY></TABLE>";
27: var theTBODYTDs = wrapDiv.getElementsByTagName("TD"); var j=0; var TDContent = " ";
28: while (j < theTBODYTDs.length) {
29: try {
30: TDContent = theTBODYTDs[j].innerText || theTBODYTDs[j].textContent;
31: if ((TDContent.indexOf("<DIV") == 0) && (TDContent.indexOf("</DIV>") >= 0)) {
32: theTBODYTDs[j].innerHTML = TDContent;
33: }
34: }
35: catch(err){}
36: j=j+1;
37: }
38: tbody.parentNode.replaceChild(wrapDiv.firstChild.firstChild,tbody);
39: }
40: </script>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Door de ‘Inhoudseditor’ onder de web parts te plaatsen waar de links in gecreëerd worden, zal de code uitgevoerd worden. In dit geval zul je dus de waarde te zien krijgen die in het ‘titel’ veld is ingevuld.
Voor meer informatie, zie ook de volgende URL’s:
Creëren van de benodigde custom list – http://blog.pathtosharepoint.com/2008/09/01/how-to-open-hyperlinks-in-a-new-window-or-not/
Meer informatie over het Content Editor Web part – http://blog.pathtosharepoint.com/2008/08/10/the-content-editor-web-part/
Gebruik van ‘Calculated Columns’ en HTML – http://blog.pathtosharepoint.com/2008/09/01/using-calculated-columns-to-write-html/
Joost van Lier's Blog 