L'éditeur de modèles de documents dans Rentman vous permet de personnaliser vos fichiers selon vos envies et les besoins de votre entreprise. Il vous offre de nombreuses options de personnalisation pour vos modèles, avec un système WYSIWYG (acronyme de "what you see is what you get" : "ce que vous voyez est ce que vous obtenez") qui ne nécessite aucune connaissance spécifique ou modification de code. 

Cela dit, nous souhaitons donner à nos utilisateurs/-trices plus expérimenté·e·s la possibilité d'apporter des modifications plus poussées à leurs modèles - des modifications qui ne se limitent pas aux options proposées via le système WYSIWYG. C'est pourquoi nous vous permettons de modifier les styles CSS de vos documents, d'adapter les variables et d'y implémenter une logique, ainsi que d'appliquer un style conditionnel. 

Note : pour utiliser ces options, vous devez disposer de connaissances techniques. Si ce n'est pas le cas, nous vous recommandons de confier vos modifications à un tiers ou d'utiliser nos services de personnalisation de modèles de documents. Nous ne proposons pas d'assistance à l'implémentation ou au débogage des CSS, variables ou styles conditionnels, comme vous pouvez le voir dans notre article dédié à l'étendue de notre assistance (en anglais).

CSS

Si vous souhaitez effectuer manuellement les modifications CSS de vos documents pour que ces derniers soient à votre image, il suffit de vous rendre dans le menu Style de l'éditeur de modèles de documents :

Avant de vous lancer dans vos modifications CSS, nous vous recommandons d'appliquer un thème. Cela vous permet de disposer d'une structure de départ, que vous pourrez adapter à votre guise.

Classes CSS

Chaque élément du modèle de document Rentman dispose d'une classe CSS que vous pouvez utiliser dans votre CSS pour cibler les éléments spécifiques à personnaliser individuellement. Bien que nous ne puissions pas fournir de liste exhaustive des classes, vous pouvez facilement identifier les classes que vous souhaitez cibler en utilisant la fonction inspection de votre navigateur sur l'aperçu du document :

Dans l'exemple ci-dessus, vous pouvez voir que les lignes contenant des articles de location dans le module Équipement sont indiquées en classe item rental.

Astuce : les lignes peuvent être générées de manière dynamique et peuvent appartenir à la même classe. Tous les articles de location appartiendront à la classe ci-dessus, par exemple. Pour cibler des classes spécifiques, vous aurez éventuellement besoin d'utiliser des sélecteurs de pseudo tels que :nth-child(i)

PHP

Si vous modifiez le bloc de texte dans n'importe quel modèle du système, vous verrez que la présentation des informations peut varier. Alors qu'avant la modification du champ, vous pouviez voir le nom de votre client comme "Rentman", il apparait désormais sous {$f.customer.displayname}. Cela indique une variable. Ce que cette variable fait, c'est de récupérer le nom d'affichage du client pour le projet à partir duquel vous générez le document et de l'insérer à la place de la variable dans e document généré.

Modificateur de variable

Dans la plupart des cas, tout ce dont vous avez besoin pour afficher une variable spécifique est de l'ajouter à votre document. Néanmoins, dans certains cas de figure, ils est possible que vous vouliez ou soyez obligé·e·s de modifier une variable donnée. Par exemple, avant de pouvoir comparer un prix à un nombre (pour plus d'informations sur les fonctions SI, voir la section ci-dessous), vous aurez besoin de convertir le prix en élément numéral.

Cela peut s'effectuer en ajoutant un modificateur de variable à la variable elle-même. En suivant l'exemple précédemment cité et en utilisant le modificateur regex_replace, la variable reprenant le prix total du projet, {$f.project_total_price}, une fois convertie en élément numéral, devrait ressembler à cela :

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

Merci de vous référer à la documentation sur les modificateurs de variables pour voir quels types de modifications peuvent être apportées au variables.

Note : les modificateurs de variables ne sont pas tous pris en charge par l'éditeur de modèles de documents. Lorsqu'un modificateur n'est pas pris en charge, l'éditeur vous en informera. En outre, merci de vous référer à la section suivante pour connaître les modificateurs et fonctions personnalisé·e·s que vous pouvez utiliser dans l'éditeur de modèles.

"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',
   ];

Instructions conditionnelles

Comme leur nom l'indique, les instructions conditionnelles sont un moyen de générer une action sur votre document si certaines conditions sont remplies et sinon, de générer une autre action. Vous trouverez une instruction de ce genre dans le tout premier bloc de texte de tous vos modèles systèmes de devis, contrats et factures. Si vous éditez le bloc de texte, vous verrez le code suivant :

{$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}

Dans ce cas, la condition est la suivante et est toujours définie au tout début de l'instruction conditionnelle :

{iff $f.contact > 0}

Si la valeur renvoyée par la variable {$f.contact} (le nombre de personnes de contact dont un client dispose) est supérieure à 0, le document imprimera ce qui est inséré avant la balise fermante {/iff}. Dans ce cas, il s'agit du texte "attn." et du prénom, suffixe et nom de famille de la personne de contact. Si cette condition n'est pas remplie (le client ne dispose pas de personne de contact), l'ensemble des données contenues dans l'instruction conditionnelle sera ignorée et aucune de ces informations ne sera imprimée.

Autre exemple de champ de saisie supplémentaire avec saisie Oui/Non

{iff $f.project.custom_1 == 'Yes'}
    La réponse était oui
{else}
    La réponse était non
{/iff}

Ceci peut également être effectué avec plus d'alternatives en utilisant {elseif}. Par exemple :

{iff $name ='Fred'}
    Bonjour Monsieur.
{elseif $name = 'Wilma'}
    Bonjour Madame.
{else}
    Bonjour, qui que vous soyez.
{/iff}

Style conditionnel

Le style conditionnel vous permet d'appliquer une classe CSS que vous définissez si la colonne choisie comporte une certaine valeur. Par exemple, imaginons que vous ayez un champ de saisie supplémentaire pour votre équipement qui puisse contenir deux valeurs : bleu et orange. Grâce au style conditionnel, vous pouvez dire que les rangées d'équipement qui ont la couleur bleue auront la classe CSS .blue, tandis que les rangées d'équipement qui ont la couleur orange auront la classe CSS .orange.

Cela fait, vous pouvez personnaliser le style des rangées d'équipements séparément en fonction de leur classe : par exemple, vous pouvez faire en sorte que les équipements "orange" aient un fond orange dans votre tableau, alors que les équipements "bleus" auront un fond bleu.

Une fois que vous aurez compris le fonctionnement du style conditionnel, le nombre de modifications visuelles que vous pourrez apporter à votre document sera presque infini. Tout style que vous pouvez appliquer à vos documents, vous pouvez l'appliquer aux classes que vous définissez via le style conditionnel.

Le style conditionnel peut être défini dans un module sélectionné, en cliquant sur Options Couper/Coller :

Structure

En ouvrant la fonctionnalité Options Couper/Coller, une fenêtre de ce type s'affichera :

Pour appliquer un style conditionnel, vous pouvez appliquer le code suivant juste avant la parenthèse refermant le couper/coller d'options :

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

Vous devrez ensuite modifier le snippet au-dessus afin de spécifier les conditions où :

• templVarName = la valeur que vous verrez dans le champ templVar pour la colonne dont vous souhaitez vérifier la condition. En utilisant la capture d'écran ci-dessus, si vous devez définir une condition en fonction de la valeur du coefficient (staffel), il vous faudrait écrire “staffel”
• comparatorValue = le type de comparaison que vous souhaitez effectuer entre la valeur dans le champ défini ci-dessus et la valeur que vous définissez pour la comparaison. Vous pouvez utiliser différents comparateurs, comme : = (égal), != (pas égal), > (supérieur à), < (inférieur à), *= (contient), *!= (ne contient pas). Si vous souhaitez vérifier si le coefficient est supérieur à 3, il vous faudra alors utiliser >.
• valueValue = la valeur que vous souhaitez comparer. Si vous souhaitez vérifier si le coefficient est supérieur à 3, vous devrez écrire 3 ici. Il est également possible de comparer la valeur à un autre champ comme ceci : "value":{"value":"templVarName", "type: "templVar"}}
• cssClass = la classe CSS que vous souhaitez appliquer aux lignes qui remplissent la condition que vous avez définie. Par exemple, factorGreaterThanThree