Layouts gebruiken in XperienCentral

Layouts gebruiken in XperienCentral

Een handige functionaliteit van XperienCentral betreft Layouts. Een Layout is een HTML template die geplaatst kan worden binnen een pagina of artikel. Een Layout bevat een of meerdere content gedeeltes die bewerkt kunnen worden in de Inline Editor van XperienCentral.

Een praktijkvoorbeeld van het gebruik van een layout

 

Layouts bieden redacteuren de vrijheid en flexibiliteit om zelfstandig dynamische aanpassingen en uitbreidingen te realiseren binnen de context van de vormgeving van de website. Deze flexibiliteit wordt versterkt doordat redacteuren onafhankelijk zijn van vormgevings- en implementatiepartijen en zelf dynamische wijzigingen kunnen doorvoeren.

Waarom een layout gebruiken?

Layouts bieden redacteuren de mogelijkheid om eenvoudig wijzigingen door te voeren aan hun website die afwijken van de standaard vormgeving die zij tot hun beschikking hebben. Ze bieden de mogelijkheid om binnen de main content area HTML-flexibliteit te kunnen bieden. Voor dergelijke wijzigingen zou een vormgevingspartij gevraagd kunnen worden om HTML plus vormgeving op te leveren die GX Software of een andere implementatie partij, als maatwerk kan implementeren. Wanner het om aanpassingen gaat die vaker gebruikt zullen worden, is dit de juiste aanpak, maar wanneer het om aanpassingen gaat die niet veelvuldig worden gebruikt, kan het wellicht te kostbaar zijn om deze geheel als maatwerk te laten ontwikkelen. In deze gevallen bieden layouts uitkomst. Zolang er geen al te ingrijpende vormgevingsaanpassingen vereist zijn kan HTML snel en eenvoudig worden ingevoegd in de website zonder dat hiervoor maatwerk oplossingen dienen te worden ontwikkeld (geprogrammeerd). Een redacteur met enig begrip van HTML is zelf in staat om zelfstandig wijzigingen te implementeren. Bijkomend voordeel is het feit dat de doorlooptijd van een wijziging heel beperkt is, er is immers maar 1 partij betrokken; de redacteur zelf.

Eenvoudig voorbeeld (grijs vlak)

Dit voorbeeld toont een contentblokje met een grijze achtergrond .

• Open het Layout panel
• Klik op ‘Layout toevoegen’
• Geef de layout een naam , "Grey Box"
• Kopieer onderstaande in het template vlak:

             <div style="background-color: #d0d0d0; width: 80%; padding: 10px;">{{body}}</div>

• Klik op “Geavanceerde eigenschappen” onderaan het scherm.
• Klik op “Veld toevoegen”
• Geef het nieuwe veld de naam “body” (in het eerste tekst-invoer-veld) en vul “(Grey box text)” in in het “Standaard tekst” veld.
• Zet de status van de layout op “Actief”

• Sluit het panel en plaats de nieuwe layout “Grey box” op een pagina via de “Invoegen” knop op de toolbar.
• Als het goed is, zie je nu een grijs vlak met de tekst "(Grey box text)" erin. Deze tekst kan worden bewerkt en je kunt er elke willekeurige content in plaatsen.
  

De werking van een layout

Een layout bestaat uit twee onderdelen en wat bijbehorende metadata velden; Het eerste onderdeel is de templatecode. Het tweede onderdeel is de "Layoutdatadefinitie" onderaan het Layout panel. Deze beschrijft het schema van de data die wordt gebruikt in het template. Het schema bevat daarnaast nog de datadefinitie die bepaalt hoe de layout data velden worden gebruikt.

Template code

Elk template dient te beginnen met een div tag die alle content binnen het template omsluit. Het “Grey box” voorbeeld maakt gebruik van een style attribuut voor de DIV tag. Hiermee kan door middel van css referenties vormgeving worden aangepast.
Het onderdeel "{{body}}" toont de content die de gebruiker heeft toegevoegd aan het “body”  gedeelte van de layout op de pagina

Loops

Een van de krachtigste features van layouts is het gebruik van herhalende groepen van velden door middel van een loop. Een loop is een veld dat een groep van meerdere velden kan bevatten. Deze groep van velden kan onbeperkt herhaald worden. Deze functie is bijvoorbeeld erg handig voor het opbouwen van meerdere tabs of kolommen.

Onderstaande layout template code biedt de mogelijkheid om een aantal kolommen op te bouwen:

<div class='layout{{content.size()}}columns'>
{{for item in content}}
  <div class='column'>{{item.body}}</div>
{{/for}}
</div>

 Als extra actie dient bij de Layoutdefinitie een Loop te worden toegevoegd als volgt:

 

De “Naam” waardes bieden de mogelijkheid om de velden in een loop een naam te geven en deze zie je ook terugkomen in de Inline Editor. Bijv. Verplaats Kolom naar links (zie onderstaande afbeelding). Met de knop ‘Acties’ kunnen items (in dit voorbeeld kolommen) worden toegevoegd, verplaatst of verwijderd.

 

Modes voorbeeld

Om de verschillende modes van velden te demonstreren dient het volgende voorbeeld.

Layout template:

    <div>

        Rich text:

        <div style="border: 1px solid green;">{{rich}}</div>

        Plain single:

        <div style="border: 1px solid red;">{{single}}</div>

        Rich single:

        <div style="border: 1px solid blue;">{{rich_single}}</div>

    </div>

Richt de data definitie hiervoor als volgt in:

• Veld 'rich' met modus "Rich text"
• Veld 'single' met modus "1 regel (plat)"
• Veld 'rich_single' met modus "1 regel rich"

Dit resulteert in het volgende:

 

Tips

> Styling van Layouts in de Inline Editor

Het kan handig zijn om in de bewerken modus (inline editing) van XC een layout net wat anders te stylen dan aan de ‘voorkant’ (bezoekerskant). Zo kan het handig zijn om bijvoorbeeld een stippellijn om de layout te presenteren zodat de layout in de bewerken modus sneller te identificeren is (zeker wanneer deze nog geen content bevat). Dit kan worden bereikt door het gebruik van een CSS-rule. Een aanpassing van het eerste voorbeeld (Grey box) uit dit artikel:

<div class="my_layout" style="background-color: #d0d0d0; width: 80%; padding: 10px;">{{body}}

<style>

    DIV.rte_container DIV.my_layout {

        border: 1px dashed #808080;

    }

</style>

Als de inline editor in bewerken modus is dan krijgt de gehele layout de rte_container class. Deze class wordt verwijderd wanneer de redacteur de bewerken modus verlaat. Dit ziet er zo uit in bewerken modus:

En zo buiten de bewerken modus:

> Veld namen

Er zijn enkele beperkingen mbt de naamgeving van velden in een layout:

• Veldnamen moeten uniek zijn binnen de layout. Uitzondering hierop is de loop; hiervoor geldt dat veldnamen binnen de loop uniek moeten zijn.
• Veldnamen zijn hoofdlettergevoelig
• Veldnamen moeten beginnen met een hoofdletter of een underscore. De rest van de naam kan bestaan uit willekeurige alfanumerieke karakters en underscores.
• Bepaalde – door Histone - gereserveerde namen kunnen niet worden gebruikt: "if", "var", "macro", "call", "import" en "for".

> HTML Nesting

Door de nesting van de layout binnen de HTML context van de pagina waarbinnen deze wordt geplaatst kan invalide HTML ontstaan. Vermijd daarom het gebruik van de volgende HTML tags: <p>, <h1>, <h2> etc. Gebruik als alternatief bijvoorbeeld een of meer Single line velden en gebruik geen rich tekst.

> Layouts mogen maar één root node produceren

Een layout mag slechts één root node zoals een DIV of TABLE opleveren. Er zijn weinig restricties aan de inhoud van deze node, maar het template moet beginnen met een enkele node.

> Browser cache

Indien na het aanpassen van de definitie van een layout de wijzigingen niet direct zichtbaar zijn voor de redacteur dan kan het nodig zijn om de browser-cache te legen middels CTRL+F5. Hierna wordt de gewijzigde layout correct weergegeven.

 

Praktijkvoorbeelden:

Ter inspiratie - enkele voorbeelden waar complexere layouts zijn gebruikt:

https://www.ing.com/About-us/How-we-create-value-2.htm

https://www.wnf.nl/haaialarm/actienieuws.htm

https://about.ing.be/NL/About-ING.htm

https://fontys.nl/Studeren/Opleidingen/Bedrijfseconomie-voltijd.htm