In de User Interface is een beperkt aantal hoofdmappen toegestaan. Dit heeft te maken met de werking van het Procurios Platform. Een eigen User Interface overschrijft bestanden uit een basis User Interface. Als je alles in je eigen UI weg laat is er dus niet niks, maar nog steeds de standaard mappen en bestanden uit het platform. Dit noemen wij de uibase.

Om ervoor te zorgen dat niets in je eigen UI gaat conflicteren met de uibase zijn op hoofdniveau de volgende mappen toegestaan:

• article-templates: Hierin staan alle artikel templates
• components: Hierin kunnen componenten uit het platform overschreven worden (er is geen overzicht van de mogelijkheden, zie bestaande UI’s)
• droplets: Naar eigen inzicht in te vullen
• font: Om font bestanden in te plaatsen
• icons: Hierin kunnen icons uit het platform overschreven worden
• img: Voor alle afbeeldingen die bij de user interface horen 
• lang: Vertaalbestanden worden door het platform gegenereerd
• modules: In deze folder kunnen style, twig en javascript bestanden van modules overschreven worden (er is geen overzicht van de mogelijkheden, zie bestaande UI’s)
• preview: In deze verplichte map staan de pictogrammen die in het CMS worden gebruikt om (inhouds-)containers te duiden (jpg, png, webp)
• script: Voor alle javascript bestanden behorende bij de User Interface
• style: In deze verplichte map staan CSS bestanden behorende bij de User Interface (m.u.v. module-, component- en article-template bestanden)
• templates: Voor een aantal specifieke UI template bestanden (zie systeem token overzicht)
• video: Om eventueel video’s in mp4 of web formaat behorende bij de template op te slaan (max 5 MB)

Op het hoofdniveau kunnen de verplichte  template.html , info.yml en optionele bestanden  variant-*.html gemaakt worden. De HTML template bestanden moeten minstens de verplichte template tokens bevatten.

Procurios maakt voor User Interfaces gebruik van verschillende template engines

• Voor modules wordt gebruik gemaakt van de TWIG template engine. Deze bestanden zijn te herkennen aan de .html.twig extensie. De documentatie daarvan is te vinden op de TWIG website: https://twig.symfony.com/doc/3.x/
• Voor het overige deel van de template gebruiken we een eigen template engine. Deze bevat verschillende tokens die speciaal gemaakt zijn om aan te sluiten op Procurios CMS. Hieronder vind je meer informatie over deze tokens. Deze bestanden hebben de .html extensie.

In onze templates vind je twee soorten tokens

• ProDesign tokens voor de Ontwerp instellingen. Te herkennen aan de {}-haken. Daarover lees je hier meer
• UI tokens, voor alle andere gegevens die in de template kunnen. Te herkennen aan geen, of []-haken

Alle template tokens zijn te herkennen aan de hekjes

De UI tokens zijn weer in drie types te verdelen

• Inhoud tokens: Hiervan zijn een aantal standaard tokens en deze kun je verder definiëren in de info.yml
• Menu tokens: Ook hiervan zijn een aantal standaard en kun je deze verder in de info.yml definiëren.
• Systeem tokens: Er zijn verschillende speciale tokens waarvan sommige met geavanceerde functionaliteit die door het platform worden aangeboden. Sommige hiervan zijn verplicht, andere kun je gebruiken om je template te verrijken.

Sommige tokens kunnen op een plek in het CMS ingevuld worden. Zo kunnen bijvoorbeeld de meta keywords wel of niet gevuld zijn, of kan een container wel of geen artikelen bevatten. Als je bij een niet gevuld token ook bijbehorende html niet wil tonen dan kan dat.

De html die tussen de []-haken staat wordt alleen getoond als het token gevuld is. De inhoud van het token wordt getoond op de plek van het sterretje: *

Om het platform goed te laten werken is er een aantal tokens verplicht in een template.

De head moet de volgende tokens bevatten:

• ##charset##
• ##css##
• ##metadescription##
• ##pblib##
• ##head##
• ##uigcache##

De body moet de volgende tokens bevatten:

• ##body##
• ##body_class##
• ##content##
• ##notice##

De title moet het ##title## token bevatten;

• ##current_url##: Huidige url inclusief domeinnaam
• ##charset##: Karakter set: UTF-8 (verplicht)
• ##css##: Combineert en minified template css bestanden automatisch. Ook andere aanvullende css bestanden die ingeladen worden komen op deze plek te staan. (verplicht)
• ##body##: Voor informatie die als laatste in de body toegevoegd moet worden (verplicht)
• ##body_class##: Toon classes die door andere modules worden toegevoegd aan de body (verplicht)
• ##head##: Voor bestanden die door het platform in de head toegevoegd worden (verplicht)
• ##content##: De standaard (hoofd-) inhoudscontainer (verplicht)
• ##sidebar##: De standaard secundaire inhoudscontainer
• ##notice##: De plek waar tijdelijke systeemmeldingen worden weergegeven
• ##pathui##: Verzorgt pad naar bestanden in de huidige UI
• ##pathdefaultui##: Verzorgt pad naar bestanden in de uibase
• ##pathpub##: Publieke pad. Meestal /
• ##site_url_root##: Domeinnaam van de huidige website
• ##title##: Pagina titel zoals ingesteld als standaard of ‘browser titel’ (verplicht)
• ##page_title##: Pagina titel zoals ingesteld als standaard of ‘pagina titel’
• ##site_name##: Naam van de site, zoals ingesteld bij de siteinstellingen
• ##menu##: Het standaard menu
• ##submenu##: Standaard menu onder actieve menu item
• ##navbar##: Vergelijkbaar met, maar niet hetzelfde als broodkruimelpad
• ##breadcrumbs##: Broodkruimelpad structuur
• ##metadescription##: De meta description zoals ingevuld in het CMS (verplicht)
• ##metakeywords##: De meta keywords zoals ingevuld in het CMS
• ##metaauthor##: De auteur van de pagina zoals ingevuld bij de website instellingen
• ##language##: De taalcode voor in het lang attribuut 
• ##search##: Standaard html voor een zoekformulier dat submit naar de standaard zoekpagina
• ##copyright##: Copyright zoals ingesteld bij de website instellingen
• ##pblib##: Script tags om PrototypeJS en pblib.js in te laden (verplicht)
• ##login_simple##: HTML output die weer of de gebruiker ingelogd is of niet. Custom twig in templates > user > login-simple.html.twig
• ##languages##: HTML output voor de taalswitcher. Custom twig in templates > language > languages.html.twig
• ##uigcache##: Hier worden javascript vertalingen geplaatst (verplicht)
• ##profile_picture_url##: URL van de profiel afbeelding zoals ingesteld in het CRM voor de huidige gebruiker
• ##userName##: Gebruikersnaam van de huidige gebruiker.