diff --git a/doc/source/administrator/rapports/definition_html.md b/doc/source/administrator/rapports/definition_html.md
index ce419a5da99305addf3db32771b244c59b1e7820..e78fb90511b4a51ff0fb7efd2190c1a5b3e76745 100644
--- a/doc/source/administrator/rapports/definition_html.md
+++ b/doc/source/administrator/rapports/definition_html.md
@@ -1,6 +1,7 @@
# Définition du modèle HTML
Un rapport est défini selon un modèle HTML qui est renseigné dans l'interface de création ou de modification.
+Il est également possible d'utiliser le langage CSS dans la définition HTML pour personnaliser son rapport.
*Note : Le modèle HTML utilise la syntaxe de AngularJS, par exemple `ng-if` et `ng-repeat`, pour les expressions et les boucles.*
## Intégrer une valeur dynamique dans le rapport
@@ -55,11 +56,12 @@ Il est aussi possible de mettre un id="..." à la balise et de la lier à un obj
## Intégrer une valeur dynamique à l'aide d'une boucle
Dans certains cas, vous pourriez avoir besoin d'itérer à travers une liste d'objets pour afficher des données dynamiques dans votre rapport. Pour cela, vous pouvez utiliser la syntaxe `ng-repeat` dans votre modèle HTML.
+Il est également possible d'utiliser la syntaxe `ng-if` dans les boucles.
Voici comment procéder :
1. Assurez-vous que les données que vous souhaitez afficher dans votre boucle sont disponibles sous forme d'un [Objet JSON](objet_json.md).
-2. Utilisez la syntaxe `ng-repeat` dans votre modèle HTML pour itérer à travers la liste d'objets.
+2. Utilisez la syntaxe `ng-repeat` et `ng-if` dans votre modèle HTML pour itérer à travers la liste d'objets uniquement si celle-ci existe bien.
3. À chaque itération de la boucle, accédez aux propriétés de l'objet actuel pour afficher les données dans votre rapport.
### Exemple :
@@ -67,15 +69,63 @@ Voici comment procéder :
Supposons que vous ayez une liste d'objets représentant des intersections de routes, et vous souhaitez afficher les détails de chaque intersection dans votre rapport. Voici comment vous pourriez le faire en utilisant `ng-repeat` :
```html
-<div ng-repeat="parcelle in parcel_details">
- <!-- Afficher les détails de chaque intersection -->
- <p>Nom de l'intersection : {{parcelle.prop}}</p>
- <p>Nombre de routes : {{parcelle.id_par}}</p>
- <!-- Ajoutez d'autres détails selon vos besoins -->
+<!-- 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="intersection in intersections" indique que vous itérez à travers la liste d'intersections stockée dans la variable intersections.
-- {{intersection.nom}}, {{intersection.nombre_routes}}, etc., représentent les propriétés de chaque objet intersection que vous affichez dans votre rapport.
\ No newline at end of file
+- 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 :
+
+```html
+<div ng-if="parcelle">
+ {{parcelle|json}}
+</div>
+```
+
+## Exemple complet
+
+```html
+<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>
+```
\ No newline at end of file
diff --git a/doc/source/administrator/rapports/informations_generales.md b/doc/source/administrator/rapports/informations_generales.md
index 719454b8cb023a023430c9bfdecf401f58f6380e..29c6ef255f445c93e8bde0a33368425c7520faf5 100644
--- a/doc/source/administrator/rapports/informations_generales.md
+++ b/doc/source/administrator/rapports/informations_generales.md
@@ -18,4 +18,6 @@ Lors de la création d'un rapport, plusieurs paramètres doivent être renseign
- **Rapport sur plusieurs éléments dans un fichier** : En cas de sélection multiple, ce paramètre indique si l'application doit générer un rapport par élément (Non) ou un seul rapport contenant tous les éléments (Oui).
- **Active les styles d'impression** : Si activé, une fenêtre modale s'ouvrira lorsque l'utilisateur demandera la génération d'un rapport, pour sélectionner le style d'impression à utiliser.
- **Définition HTML** : Voir [Définition du modèle HTML](definition_html.md).
-- **Objet JSON** : Voir [Objet JSON](objet_json.md).
\ No newline at end of file
+- **Objet JSON** : Voir [Objet JSON](objet_json.md).
+
+
\ No newline at end of file
diff --git a/doc/source/images/administrator/rapports/rapport_parametres.png b/doc/source/images/administrator/rapports/rapport_parametres.png
new file mode 100644
index 0000000000000000000000000000000000000000..29da887caf3503f0a4f64bedc3998cb4e11cfc40
Binary files /dev/null and b/doc/source/images/administrator/rapports/rapport_parametres.png differ