Logo 1001 tips

Gratiszoekertjes.com

Vorige pagina

Lijst met grote tekstvelden inklappen en uitklappen

  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!

Wanneer je een lijst hebt in Sharepoint met tekstvelden van meerdere rijen, waar vrij veel inhoud is in opgenomen, dan wordt de lijst vrij onoverzichtelijk (figuur 1). Je kan dan besluiten om dat veld niet op te nemen in die specifieke weergave van de lijst, maar als dat nu net een zeer belangrijk veld is, dan is dat geen oplossing.

Er bestaat een eenvoudige manier om dergelijke lijsten toch wat overzichtelijk te maken (figuur 2)

Lijst met grote tekstvelden

Figuur 1: een lijst met zeer veel inhoud in een tekstveld met meerdere rijen (memoveld)

Lijst met grote tekstvelden ingeklapt

Figuur 2: dezelfde lijst met de mogelijkheid de tekst uit te klappen en in te klappen

Oplossing: een webonderdeel Inhoudseditor (CEWP)

Zoals zo vaak brengt een CEWP de oplossing. De oplossing is afkomstig van Paul Grenier op Endusersharepoint, en maakt gebruik van de javascript library JQuery. Ga als volgt tewerk:

  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 zorg dat het boven de lijst staat. 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">
if(typeof jQuery=='undefined'){
var jQPath = 'https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
document.write('<script src="',jQPath,'" type="text/javascript"><\/script>');
}
</script>
<style type="text/css">
.expandText {height:auto;}
.collapseText {height:26px;overflow:hidden}

</style>
<script type="text/javascript">
function ExpGroupRenderData(htmlToRender, groupName, isLoaded) {
$("#tbod"+groupName+"_").attr("isloaded",isLoaded)
.html(htmlToRender)
.show("fast",collapseText("#tbod"+groupName+"_"));
}
function collapseText(group){
if (!group) group = "#MSO_ContentTable";
var html = "<img alt='collapseText' style='cursor:pointer; margin-right: 3px; float: left;' src='/_layouts/images/menudark.gif' />";
$(group+" td.ms-vb2>div:has(>div)").toggleClass("collapseText")
.prepend(html);
$(group+" img[alt='collapseText']").click(function(event){
$(event.target).parent().toggleClass("collapseText");
});
}
$(function() {
collapseText();
});
</script>

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 dinsdag 27 juni 2017 om 06:57u
Auteur: Dries Hauwaert