Aan de slag met de nieuwe weergave sjablonen

Vorig jaar was het jaarthema van AFAS één procentje beter. Het omzetten van een weergave met de nieuwe mogelijkheden vind ik nu een typisch voorbeeld van een één procentje beter handeling. Je wilt graag dat je InSite of OutSite er gelikt uit ziet. Daarom hoop ik je met deze blog te motiveren om deze week nog je eerste weergave om te bouwen met de nieuwe mogelijkheden.

Allereerst: een aantal voorbeelden

Om je eerst een indruk te geven wat er nu precies mogelijk is met de nieuwe weergavesjablonen, staan hieronder een aantal voorbeelden. Van de lay-out, de hoogte, het hovereffect tot de data die je laat zien, je kunt een hoop dingen zelf bepalen. Bepaalde keuzes die je maakt (zoals de vaste hoogte en de lay-out) hebben invloed op elkaar. Daarover straks meer.

Waar kun je weergave sjablonen voor gebruiken?

• Nieuwsoverzichten
• Wie is wie
• Taken
• Signalen
• Evenementenoverzicht
• FAQ

Je ziet hieronder een aantal voorbeelden van de Wie is Wie, nieuwsweergave en evenementenoverzicht.

De inrichting - 6 punten waar je op moet letten

In het Help Center staat al beschreven hoe je een overzicht kunt stylen met een weergave sjabloon. De stappen gaan we in deze blog niet letterlijk opnieuw beschrijven. Wel vind je onderaan deze blog een video waarin een Wie is Wie omgebouwd wordt. Beschouw dit als naslagwerk. In deze blog wil ik je vooral laten weten waar je op moet letten.

1. Data

Alles begint bij de data van je weergave. Als je een bestaande weergave gaat ombouwen, zal dit niet het probleem zijn. Maar wanneer je een nieuwe weergave gaat bouwen, moet je eerst bepalen welke data je nodig zult hebben. Wil je een nieuwsoverzicht maken met een afbeelding? Dan moet deze afbeelding zowel in de eigenschappen van het document (onder Algemeen of Banner) als in je gegevensverzameling staan. Wil je de tag publicatiedatum toevoegen in je nieuwsoverzicht? Dan moet deze wel in je gegevensverzameling staan.

Je kunt de gegevensverzameling van je weergave aanpassen in Profit onder Algemeen / In & OutSite / Pagina

2. De keuze van je lay-out

Er zijn momenteel 11 verschillende lay-out mogelijkheden. Je hebt de mogelijkheid om 1 tot maximaal 4 kolommen naast elkaar te tonen. Daarnaast is het mogelijk om het eerste item over de hele breedte te laten gaan (+ kop) of links 1 item en rechts 2 items te vertonen (+extra). Zie onderstaande voorbeelden voor de uitzonderingen:

Je ziet hier een lay-out met de optie 'kop'.

Je ziet hier een lay-out met de optie 'extra'.

Voor signalen, evenementen of je wie is wie is het aan te raden om een standaard lay-out te kiezen.

3. Marges toevoegen

Het is aan te raden om er altijd voor te zorgen dat er marges om je sjabloon onderdeel zitten. Wanneer je geen marge toevoegt, zullen alle onderdelen uit je overzicht tegen elkaar aan staan. Wij raden aan om boven, onder, links en rechts minimaal 5px marge toe te voegen.

4. Een afbeelding of achtergrondkleur toevoegen

Je kunt ervoor kiezen om een vaste achtergrondafbeelding of achtergrondkleur in te stellen (zie voorbeeld Tour de Small Business hierboven of voorbeeld AFAS Live hieronder). Je kunt deze ook ophalen uit de weergave. Wanneer je voor dit laatste kiest, moet je het vinkje ‘Neem afbeelding over van weergave’ inschakelen. 

Wanneer je zowel een afbeelding upload als het vinkje ‘Neem afbeelding over van weergave’ aanvinkt, zal automatisch je geüploade afbeelding in je sjabloon worden vertoond wanneer er geen afbeelding beschikbaar is. Zo voorkom je, wanneer je bent vergeten een afbeelding bij je document of nieuwe medewerker te uploaden, er niets vertoond wordt.

5. Kies je hover- & randeffect

Misschien wel de allerleukste optie van de weergaven. Wat moet er gebeuren wanneer je met je muis over een onderdeel van je weergave gaat (de zogeheten mouseover)? Er zijn nogal wat mogelijkheden. Van zwart-wit tot bright of een schaduw creëren, je moet hier zelf mee gaan spelen en bepalen wat je mooi vindt.

Een kleine favoriet van mijn kant is de optie ‘Bright’. Deze is het best toepasbaar wanneer je gebruik maakt van een vaste afbeelding of achtergrondkleur. Wanneer je een grijze achtergrond instelt en je gaat er met je muis overheen wordt deze wit dankzij de Bright functie. Onderstaand voorbeeld van AFAS Live geeft ook een gaaf effect dankzij de Bright functie:

6. Je tekst met tags links, rechts, boven of onder vertonen

In Profit 7 is er een nieuwe functionaliteit toegevoegd aan de CMS-editor. Je kunt nu namelijk een stukje tekst binnen een inhoudsblok links, rechts, boven of onder uitlijnen met een achtergrondkleur. Hierbij wordt ook rekening gehouden worden met een stukje marge. Ideaal voor het maken van je weergave!

Je vindt deze optie onderaan de tekststijlen in de CMS-editor.

Ook kun je met Tags (velden) zelf bepalen welke data je wilt vertonen en welke opmaak je deze mee wilt geven. Dus of je nu een volledige naam, titel van een document of de publicatiedatum wilt tonen, je kunt dit helemaal zelf bepalen zolang deze maar in de gegevensverzameling zit.

Is dit nog niet helemaal duidelijk in één keer? Geen probleem. Kijk dan onderstaande video eens!

Bekijk het voorbeeld – je bestaande wie is wie ombouwen

Ik kan uit eigen ervaring zeggen dat het prettig is om iemand ergens doorheen te zien klikken zodat je stap voor stap kan zien wat hij of zij gedaan heeft. Nu je weet waar je op moet letten wil je natuurlijk ook zien hoe je dat nu precies bouwt. Daarvoor heb ik een schermopname gemaakt. Maar bekijk ook zeker de documentatie in het Help Center!

PS: Meer tips over styling? Check de themapagina InSite & OutSite styling of kijk het webinar terug!

De kern van deze blog

Waar moet je precies op letten wanneer je aan de slag gaat met de nieuwe weergave sjablonen? Zodra je dit weet, kan je binnen 10 minuten je eerste weergave hebben omgebouwd!