De document template bewerker in Rentman stelt je in staat eenvoudig templates te bewerken naar jouw behoeftes. Onze bewerker geeft een aantal opties om templates te bewerken met een WYSIWYG systeem (what you see is what you get), zonder kennis nodig te hebben van code. 

Echter, willen we onze meer ervaren gebruikers in staat stellen ingrijpendere veranderingen te doen aan hun templates, zodat zij niet beperkt zijn aan de WYSIWYG opties. Hierom geven we je de mogelijkheid documenten te bewerken met CSS, variabelen te manipuleren en met logica te implementeren en tot slot voorwaardelijke opmaak te gebruiken. 

Let op: Om deze opties te gebruiken, heb je technische kennis nodig. Als je deze kennis niet hebt, raden we je aan een derde partij te contacteren om deze wijzigingen te doen, of gebruik te maken van onze Document template bewerking service. We bieden geen support voor het implementeren of debuggen van CSS, variabelen of voorwaardelijke opmaak, zoals je kan lezen in onze Scope of Support.

.

CSS

Als je handmatig de CSS van jouw document wilt aanpassen, kan je dat doen vanuit het Stijl menu van de document template bewerker:

Voordat je start met het bewerken van de CSS, raden we je aan eerst een thema te selecteren. Dit geeft namelijk een structuur om vanuit te starten, waarna je het naar behoefte kan aanpassen. 

CSS Klassen

Elk element in het Rentman document template heeft een CSS klasse die je kan gebruiken in jouw CSS om een specifiek element te adresseren om te bewerken. Hoewel we geen allesomvattende lijst van klassen aan je kunnen geven, kan je eenvoudig zien welke CSS klasse je moet adresseren in het document template via het Inspecteer element van jouw browser:

Het voorbeeld hierboven zie je dat rijen met verhuuritems in de materiaal module de klasse item rental hebben.

Tip: Rijen kunnen dynamisch gegenereerd worden en hebben wellicht dezelfde klasse. Alle verhuuritems hebben bovenstaande klasse. Om specifieke gevallen te adresseren, wil je wellicht gebruik maken van pseudo-selectors zoals: nth-child(i)

PHP

Zodra je een tekstblok in het template wijzigt, zie je dat de getoonde informatie wijzigt. Eerst zag je misschien voor contactnaam 'Rentman' staan, maar na het klikken op de bewerkknop staat er  {$f.customer.displayname}. Dit is een variabele. De variabele haalt de weergavenaam op van dit contact van het project waarvan je een document genereert. Dit wordt vervolgens toegevoegd aan het document op de plek van de variabele.

Bewerkers van variabele

In de meeste gevallen hoef je alleen maar een specifieke variabele toe te voegen aan het document. Echter, wil je in sommige gevallen misschien een variabele manipuleren. Een voorbeeld kan zijn dat je een prijs van een string naar een numerieke waarde moet converteren, voordat je het met een andere prijs kan vergelijken. 

Dit kan gedaan worden door een variabele bewerker toe te voegen aan de variabele zelf. Als we het bovenstaande voorbeeld pakken en de regex_replace bewerker gebruiken, dan zal de variabele van de totaalprijs van een project, {$f.project_total_price}, er zo uit zien na converteren:

{$f.project_total_price|regex_replace:'/[^0-9]/':''|intval}

Kijk eens naar de documentatie over variabele bewerkers om te zien welke manipulaties je allemaal kan doen. 

Let op: Niet alle variabele bewerkingen zijn toegestaan in de template bewerker. Als een bewerking niet is toegestaan, zal de template bewerker dit laten weten. Kijk ook eens naar de onderstaande sectie voor een aantal op maat gemaakte bewerkingen en functies die je kan gebruiken in de template editor. 

"lcfirstLocal",
"lcfirstlocal",
"ucfirstLocal",
"ucfirstlocal",
"formatTime",
"formatBytes",
"formatDateTime",
"formatDiscount",
"formatDistance",
"formatDuration",
"formatMonth",
"formatDay",
"formatDate",
"formatBoolean",
"formatNumber",
"formatPrice",
"formatPercentage",
"formatSpellout",
"formatPriceCustom",

public const F_TYPE = [
       'is_array',
       'is_bool',
       'is_countable',
       'is_int',
       'is_integer',
       'is_object',
       'is_null',
       'is_string',
       'is_float',
       'is_double',
       'isset',
   ];

   public const F_CAST = [
       'intval',
       'boolval',
       'doubleval',
       'floatval',
   ];

   public const F_DATETIME = [
       'time',
       'date',
   ];

   public const F_ARRAY = [
       'empty',
       'count',
       'sizeof',
       'current',
       'explode',
       'array_key_exists',
       'array_keys',
       'array_values',

   ];

   public const F_REGEX = [
       'regex_replace',
   ];

   public const F_STRING = [
        'nl2br',
        "ucfirst",
        "lcfirst",
        "ucwords",
        "htmlentities",
        "htmlspecialchars",
        "trim",
        "ltrim",
        "rtrim",
        "strtolower",
        "strtoupper",
        "mb_strtoupper",
        "count",
        "escape",
        "strlen",
        "mb_strlen",
        "substr",
        "mb_substr",
        "str_replace",
        'str_pad',
        'wordwrap',
        'sprintf',
        'strip_tags',
        'urlencode',
   ];

   public const F_MISC = [
        'min',
        'max',
        'abs',
        'rand',
        'number_format',
        'round',
        'ceil',
        'floor',
   ];

   public const F_RENTMAN = [
        "Rentman\\getTemplateVal",
        "sumprice",
        "substr",
        "multiplyprice",
        "removePrice",
        "toDate",
        'buildrow',
        'roundcents',
   ];

If-statements

If-statements, zoals de naam aangeeft, is een manier om jouw documenten iets te laten doen als er aan een bepaalde conditie voldaan wordt. Wordt de conditie niet voldaan, dan gebeurt er wat anders. Je vindt zo'n if-statement in het allereerste blok van al onze systeemtemplates voor offertes, contracten en facturen. Als je het tekstblok wijzigt, zie je de volgende code:

{$f.customer.displayname}
{iff $f.contact > 0}attn. {$f.contact.firstname} {$f.contact.surfix} {$f.contact.lastname}
{/iff}{$f.customer.post_street} {$f.customer.post_number}
{$f.customer.post_postalcode} {$f.customer.post_city} {iff $f.customer.country != $company.country}{$f.customer.country}{/iff}

De conditie (altijd aan het begin van de if-statement) in dit geval is als volgt:

{iff $f.contact > 0}

Als de waarde die wordt gegeven door de variabele {$f.contact} (het aantal contactpersonen dat een contact heeft) groter is dan 0, zal het document weergeven wat is ingevuld voor de afsluitende tag {/iff}. In dit geval is dat de tekst “attn.”, naam, tussenvoegsel, en achternaam van het contactpersoon. Als er niet aan deze conditie voldaan wordt (het contact heeft geen contactpersoon), wordt alles in deze if-statement genegeerd en wordt er geen informatie geprint. 

Een ander voorbeeld met een extra invoerveld met een Ja/Nee input:

{iff $f.project.custom_1 == 'Ja'}
    Het antwoord was ja
{else}
    Het antwoord was nee
{/iff}

Je kan dit ook voor elkaar krijgen met meer dan één conditie, door gebruik te maken van {elseif}. Bijvoorbeeld:

{iff $name ='Fred'}
    Welcome Sir.
{elseif $name = 'Wilma'}
    Welcome Ma'am.
{else}
    Welcome, whatever you are.
{/iff}

Voorwaardelijke opmaak

Voorwaardelijke opmaak laat je een CSS klasse die je gedefineerd hebt toepassen als een kolom een bepaalde waarde heeft. Bijvoorbeeld: je hebt een extra invoerveld voor materiaal met twee waardes: blauw en oranje. Met voorwaardelijke opmaak kan je materialen met kleur blauw de CSS klasse .blauwmeegeven, en de materialen met een oranje kleur de CSS klasse .oranje meegeven.

Je kan nu de materiaalrijen apart stylen op basis van de klasse die ze hebben. Bijvoorbeeld: oranje materiaal heeft een oranje achtergrond in jouw tabel, terwijl blauwe materialen een blauwe achtergrond hebben. 

Zodra je voorwaardelijke opmaak succesvol hebt toegepast, zijn de visuele aanpassingen die je kan maken bijna eindeloos. Elke stijl die je toe kan passen op jouw document, kan je toekennen aan de klassen die je gedefinieerd hebt via de voorwaardelijke opmaak. 

Voorwaardelijke opmaak kan gedefinieerd worden in de 'Opties knippen/plakken' knop van de geselecteerde module:

Structuur

Zodra je de 'Opties knippen/plakken' knop hebt ingedrukt, zie je een scherm zoals hieronder:

Om voorwaardelijke opmaak toe te passen, voeg je de volgende code toe net voor het laaste haakje van de 'Opties knippen/plakken' pop-up:

,
  "conditionalstyling": [
    {
      "condition": {
        "field": "templVarName",
        "comparator": "comparatorValue",
        "value": {
          "value": "valueValue"
        }
      },
      "class": "cssClass"
    }
  ]

Je moet bovenstaande code stukje wijzigen naar jouw specifieke condities, waar:

• templVarName = templVar is de kolom waar je de conditie op wilt controleren. Als we bovenstaand screenshot gebruiken als voorbeeld en we een conditie gebruiken op basis van de staffel, schrijven we “staffel”
• comparatorValue = wat voor soort vergelijking je wilt maken in de waarde van het veld dat je hierboven hebt gedefinieerd. Je kan verschillende vergelijkingen gebruiken, zoals: = (gelijk aan), != (niet gelijk aan), > (groter dan), < (kleiner dan), *= (bevat), *!= (bevat niet). Als je wilt zien of de staffel groter is dan 3, gebruik je hier >.
• valueValue = de waarde waarmee je het wilt vergelijken. Als je wilt zien of de staffel groter is dan 3, schrijf je hier 3. Het is ook mogelijk om te vergelijken met een waarde van een ander veld, zoals hier: "value":{"value":"templVarName", "type: "templVar"}}
• cssClass = de CSS klasse die je aan de rijen wilt geven die aan de conditie voldoen. Bijvoorbeeld: factorGreaterThanThree