Définition du modèle HTML

Un rapport est défini selon un modèle HTML développé par l'administrateur.
Il est également possible d'utiliser le langage CSS dans la définition HTML pour personnaliser son rapport.

Note

Le modèle HTML peut utiliser la syntaxe de AngularJS pour lui permettre de réaliser des conditions ou de boucler sur un élément (Exemple ng-if et ng-repeat).

Intégrer une valeur dynamique dans le rapport

Lorsqu'un rapport est lié à une couche, il est possible d'insérer une valeur dynamique à partir des champs de celle-ci. Pour cela, il faut indiquer le champ précédé par "BO." et le tout entouré d'accolades.

Exemple :

Si dans la couche "Ville" il y a un champ "nom_ville", il est possible d'utiliser {{BO.nom_ville}} dans le rapport. Cette balise sera alors remplacée par la valeur du champ "nom_ville" de l'objet courant.

<p>{{BO.nom_ville}}</p>

Variables disponibles

En plus des variables possibles à renseigner depuis la couche associée, les rapports de vMap disposent d'un ensemble de variables disponibles par défaut. Pour les utiliser, il suffit de les insérer en les entourant de doubles accolades ({{..}}).

date : date du jour
date_hour : date et heure du jour
layer_sources : sources des couches
map_legend : légende de la carte principale
user_name : nom de l'utilisateur
user_login : login de l'utilisateur
user_company : société de l'utilisateur
user_department : service de l'utilisateur
user_email : adresse mail de l'utilisateur
user_id : identifiant de l'utilisateur

Intégrer une image dynamiquement

Il est possible d'intégrer une image dans un rapport en utilisant la balise HTML img et en modifiant la source dynamiquement. Deux formats sont alors pris en compte :

Lien (de type https://...)
Base 64 (de type data:image/png;base64,...)

Exemple :

<img src="https://www.example.com/image.png" alt="Description de l'image">
<img src="data:image/png;base64,..." alt="Description de l'image">

Il est aussi possible de mettre un id="..." à la balise et de la lier à un objet JSON pour afficher l'image dynamiquement.

Exemple avec id et lien à un objet JSON :

Code HTML :

<img id="sig_logo" src="" alt="Image dynamique">

Code Json correspondant à l'image:

{
	"type": "image",
	"imageUrl": "data:image/png;base64,iVBORw0KGgoAAxFDAnF6fftB2....",
	"target": "#sig_logo"
}

Note

Si à la fois l'attribut id de la balise HTML et l'attribut src sont tous deux remplis, l'objet JSON prendra le dessus pour déterminer l'URL finale de l'image affichée.

Intégrer une valeur dynamique à l'aide d'une boucle

Dans certains cas, l'objet Json renvoie de multiples valeurs. Afin de pouvoir toutes les afficher dans le rapport, réaliser une boucle peut s'avérer nécessaire. Pour cela, utiliser la syntaxe ng-repeat dans le modèle HTML.

Note

Il est également possible d'ajouter la syntaxe ng-if dans les boucles pour faire des conditions.

Voici comment procéder :

S'assurer que les données que l'on souhaite afficher dans la boucle sont disponibles sous forme d'un Objet JSON.
Utiliser la syntaxe ng-repeat et ng-if dans le modèle HTML utiliser les données de l'Objet JSON
À chaque itération de la boucle, accéder aux propriétés de l'objet souhaité pour afficher les données dans le rapport.

Exemple :

Supposons que l'ont ait une liste d'objets représentant des intersections de routes, et que l'on souhaite afficher les détails de chaque intersection dans le rapport. Voici comment procéder en utilisant ng-repeat :

<!-- Boucle exécutée uniquement si parcel_details existe -->
<div ng-repeat="parcelle in parcel_details" ng-if="parcel_details">
    <div ng-if="parcelle.prop">
        <!-- Afficher les détails de chaque intersection -->
        <p>Propriétaire de la parcelle : {{parcelle.prop}}</p>
    </div>
    <div ng-if="parcelle.id_par">
        <p>Nombre de routes : {{parcelle.id_par}}</p>
        <!-- Ajoutez d'autres détails selon vos besoins -->
    </div>
</div>

Dans cet exemple :

ng-repeat="parcelle in parcel_details" indique que vous itérez à travers la liste de parcelles stockées dans la variable parcel_details.
{{parcelle.prop}}, {{parcelle.id_par}}, etc., représentent les propriétés de chaque objet parcelle que vous affichez dans votre rapport.

Il est aussi possible d'afficher entièrement un objet au format JSON dans le rapport en utilisant la syntaxe {{ ma_variable|json }}.
En reprenant notre exemple cela donnerait :

<div ng-if="parcelle">
    {{parcelle|json}}
</div>

Exemple complet

<style>
.prop {
    font-size: 15px;
    color: red;
    text-align: center;
}

#id_par {
    font-size: 12px;
}
</style>

<!-- Boucle exécutée uniquement si parcel_details existe -->
<div ng-repeat="parcelle in parcel_details" ng-if="parcel_details">
    <div ng-if="parcelle.prop">
        <!-- Afficher les détails de chaque intersection -->
        <p class="prop">Propriétaire de la parcelle : {{parcelle.prop}}</p>
    </div>
    <div ng-if="parcelle.id_par">
        <p id="id_par">Nombre de routes : {{parcelle.id_par}}</p>
        <!-- Ajoutez d'autres détails selon vos besoins -->
    </div>
    <img src="https://www.veremes.com/wp-content/uploads/2023/01/vMap2_carteFrance.webp" alt="Image d'exemple">
    <!-- L'objet sig_logo doit être renseigné dans l'objet JSON -->
    <img id="sig_logo" src="" alt="Image dynamique">
    <div ng-if="parcelle">
        {{parcelle|json}}
    </div>
</div>