Met het inrichten van een SharePoint Online intranet omgeving stuitte ik op een onderdeel in de Fabrikam demo wat ik zeer interessant vond om te gebruiken.
De informatie box met 'announcements', 'events' en 'links'.
Waarom is dit interessant?
het gebruik van tabbladen op een intranet pagina vereenvoudigd het overzichterlijk kunnen tonen van veel 'lopende' informatie binnen een organisatie, en persoonlijke taken etc.
Hoe werkt het dan?
Er wordt gebruik gemaakt van een standaard 'Inhoudseditor' met een link naar een .html of .txt file.
(ik maak zelf gebruik van een .txt aangezien ik die op de SP omgeving kan openen en editen zonder hem telkens hoeven te uploaden).
Orgineel_FKM.html
Wanneer ik het bestand open valt me op dat er 'nieuwe' code in staat, CAMLQuery en dat er verwezen wordt naar jQuery.
Na wat blogs en internet hebben afgestruind kwam ik erachter dat CAML nieuwe code is voor SharePoint Foundation
Als ik eerste heb ik uit de Fabrikam demo 3 javascript bestanden overgezet naar mijn eigen SharePoint omgeving om de jQuery in ieder geval te laten werken:
De informatie box met 'announcements', 'events' en 'links'.
het gebruik van tabbladen op een intranet pagina vereenvoudigd het overzichterlijk kunnen tonen van veel 'lopende' informatie binnen een organisatie, en persoonlijke taken etc.
Hoe werkt het dan?
Er wordt gebruik gemaakt van een standaard 'Inhoudseditor' met een link naar een .html of .txt file.
(ik maak zelf gebruik van een .txt aangezien ik die op de SP omgeving kan openen en editen zonder hem telkens hoeven te uploaden).
Orgineel_FKM.html
Wanneer ik het bestand open valt me op dat er 'nieuwe' code in staat, CAMLQuery en dat er verwezen wordt naar jQuery.
Na wat blogs en internet hebben afgestruind kwam ik erachter dat CAML nieuwe code is voor SharePoint Foundation
Als ik eerste heb ik uit de Fabrikam demo 3 javascript bestanden overgezet naar mijn eigen SharePoint omgeving om de jQuery in ieder geval te laten werken:
fkm.js,
jquery.SPServices-0.6.0.min.js,
jquery-1.5.2.min.js
en in mijn eigen Masterpage de verwijzing hiernaar toe gemaakt
<script type="text/javascript" src="_catalogs/masterpage/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="_catalogs/masterpage/jquery.SPServices-0.6.0.min.js"></script>
<script type="text/javascript" src="_catalogs/masterpage/fkm1.js"></script>
Nu de Javascript werkend is, ben ik begonnen met het strippen van de code, teneerste wil ik het design eruit hebben, om hier later me eigen design op aan te passen.
<img id="fkm_tabbarimg1" usemap="#tabsection" src="/sites/Fabrikamdemo/Style Library/en-us/Core Styles/graphics/announcements.png"/>
<img id="fkm_tabbarimg2" usemap="#tabsection" src="/sites/Fabrikamdemo/Style Library/en-us/Core Styles/graphics/events.png" style="display:none"/>
<img id="fkm_tabbarimg3" usemap="#tabsection" src="/sites/Fabrikamdemo/Style Library/en-us/Core Styles/graphics/links.png" style="display:none"/>
<map name="tabsection">
<area shape="rect" coords="30,3,150,30" href="#" onclick="switchTabs('fkm_tabbarimg1');return false;" title="Announcements"/>
<area shape="rect" coords="180,3,235,30" href="#" onclick="switchTabs('fkm_tabbarimg2');return false;" title="Events"/>
<area shape="rect" coords="265,3,315,30" href="#" onclick="switchTabs('fkm_tabbarimg3');return false;" title="Links"/>
</map>
<img style="position: absolute;" src="/sites/Fabrikamdemo/Style Library/en-us/Core Styles/graphics/bottom_cap.png"/>
Nu het design eruit is gehaald, wil ik de namen van de tabbladen en functies, hernoemen. Hier kwam ik achter dat dit zowel in de code moet als in de FKM1.js querie. veranderd moet worden.
Na dit alles te hebben aangepast, en de tabbladen zonder opmaak de juiste benamingen en titels hebben, moet er verwezen worden naar de juiste lijst waarin de informatie moet staan.
operation: "GetListItems",
async: false,
listName: "Announcements",
CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='ID' /><FieldRef Name='Body' /></ViewFields>",
CAMLQuery: "<Query><Where><Eq><FieldRef Name='Publiceren' /><Value Type='Text'>1</Value></Eq></Where></Query>",
CAMLRowLimit: 5,
completefunc: function (xData, Status) {
$(xData.responseXML).find("[nodeName='z:row']").each(function() {
fkm_bottomwp_html+='<div class="fkm_bootomwp_title"><a href="/sites/Fabrikamdemo/Lists/Announcements/DispForm.aspx?ID='+$(this).attr("ows_ID")+'&Source=/sites/Fabrikamdemo/">
'Operation' haalt alle items binnen 'ListName' kijkt naar de naam van de lijst waaruit informatie gehaald moet worden. 'CAMLViewFIelds' kijkt naar de velden waaruit informatie gehaald moet worden, echter viel me het op dat 'Title' en 'Body' werkt terwijl mijn velden 'Titel' en 'Hoofdtekst' heten. (bijzonder) 'CAMLQuery' Query die de waarde controleert van de checkbox 'Publiceren' (kom ik nog op terug) 'CAMLRowLimit' geeft aan hoeveel items weergegeven moet worden. ' <a href=' geeft de link aan waar de lijst zich bevind.
Om de CAMLQuery voor de checkbox werkend te krijgen moet er wat handelingen gedaan worden buiten de jQuerys en CAMLQuery om:
Orginele code:
CAMLQuery: "<Query><Where><Eq><FieldRef Name='ShowOnHomePage' /><Value Type='Text'>1</Value></Eq></Where></Query>",
Deze code is verantwoordelijk voor de 'checkbox' wat bij de nieuwsitems staan wanneer, iets wel of niet gepubliceerd moet worden in de contenteditor.
Ik heb een kolom toegevoegd aan de documentbibliotheek, genaamd 'Publiceren' met als type checkbox (Ja/Nee), met als standaard waarde 'Nee'. Wanneer er nu een nieuwsitems wordt aangemaakt zal de checkbox te zien zijn en werken met onderstaande code
Bewerkte code: CAMLQuery: "<Query><Where><Eq><FieldRef Name='Publiceren' /><Value Type='Text'>1</Value></Eq></Where></Query>" Resultaat tot op heden:
Met de standaard geschreven Fabrikam toepassing, wordt bij de 'CAMLRowLimit: 5' aangegeven hoeveel nieuwsitem in totaal worden getoond moeten worden. Wanneer een nieuwsitem bestaat uit meerdere tekstregels, zal dit allemaal getoond worden. Aangezien ik geen volledige boekwerken wil weergeven als nieuwsitem geef ik aan de hand van HTML code onder de CAMLQuery een maximale waarde van 150px aan de hoogte van de 'body' teksten;'<div class="fkm_bootomwp_body heighttext" style="max-height: 150px; position: relative; overflow: hidden;">' + $(this).attr("ows_Body")+ Nu de hoogte is bepaald wordt door middel van de code'overflow: hidden' de tekst die buiten de maximale waarde valt verborgen. Om aan te geven dat er wel meer tekst aanwezig is maak ik gebruik van de volgende regel;'<p style="position: absolute; bottom: 0; Left 0; width: 100%; text-align: right;"><a href="/Aankondigingen/DispForm.aspx?ID='+$(this).attr("ows_ID")+'&Source=/Intranet/"" class="button">Lees meer</a></p></div>';Deze regel zorgt ervoor dat achter elk nieuwsitem de hyperlink 'Lees meer' komt te staan. Wanneer men op de 'Lees meer' tekst klikt zal men de gehele nieuwsitem zien. Om te voorkomen dat er achter nieuwsitems die de maximale waarde niet bereiken ook de tekst 'Lees meer' komt te staan, maak ik gebruik van de volgende jQuery code: $('#Bedrijfsnieuws_tab1').html(fkm_bottomwp_html); $(document).ready(function(){ $('.heighttext').each(function() { if ($(this).children().first().height() < 150) { $(this).children().last().remove(); Hierbij wordt gekeken of de hoogte van de 'body' kleiner is dan 150 (px), zo ja dan word de 'Lees meer' link verwijderd.Resultaat, 2 nieuwsitems, 1 onder de 150, ander groter:
fkm_bottomwp_html+='<div class="fkm_bootomwp_title"><h3><a href="/Aankondigingen/DispForm.aspx?ID='+$(this).attr("ows_ID")+'&Source=/Intranet/">'+$(this).attr("ows_Title")+'</a></H3></div>'+Ik kies er op dit moment voor om de tabbladen zo standaard mogelijk weer te geven ipv plaatjes te gebruik. Ik maak geen gebruik van <H> tags aangezien de teksten als titel worden gezien en onder elkaar worden geplaats. <a href="#" onclick="switchTabs('Bedrijfsnieuws');return false;" style="font-size:10pt; font-weight: normal;">Bedrijfsnieuws </a>Met het finetunen van de opmaak viel me op dat er niet werd gesorteerd op het laatste nieuwsitem. Ik heb gekozen voor de OrderBy 'Modified' ipv 'Created' aangezien ik van mening ben dat wanneer er een nieuwsitem gewijzigd wordt, dit automatisch opnieuw gepubliceerd moet worden. Wanneer je het alleen wilt wijzigen en niet opnieuw publiceren, kan er gekozen worden het vinkje uit te zetten van 'Publiceren' (zie hierboven 'Checkbox'). CAMLQuery: "<Query><Where><And><Eq><FieldRef Name='Publiceren' /><Value Type='Text'>1</Value></Eq><Geq><FieldRef Name='Expires' /><Value Type='DateTime'><Today /></Value></Geq></And></Where><OrderBy><FieldRef Name='Modified' Ascending='False' /></OrderBy></Query>",Wat tevens aan deze CAMLQuery is toegevoegd om de 'Nieuwsitem verloopt datum' optie werkend te krijgen is de functie</Eq><Geq><FieldRef Name='Expires' /><Value Type='DateTime'><Today /></Value></Geq>FYI: Vergeet hierbij niet de AND in de CAMLQuery te verwerken.
Aangepast_FKM.html
In mijn volgende artikel ga ik de volgende tabbladen met verschillende items uitwerken, te denken aan Wiki, Agenda, Laatste 10 documenten etc.
Aangepast_FKM.html
In mijn volgende artikel ga ik de volgende tabbladen met verschillende items uitwerken, te denken aan Wiki, Agenda, Laatste 10 documenten etc.
0 reacties:
Een reactie posten