SmarMaker - Documentation
Docs» back:mapping_dolibarr_-_react

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
back:mapping_dolibarr_-_react [2025/09/08 07:56] – caprelback:mapping_dolibarr_-_react [Date inconnue] (Version actuelle) – supprimée - modification externe (Date inconnue) 127.0.0.1
Ligne 1: Ligne 1:
-#Mapping dolibarr <-> react 
- 
-Pour que le front sache quel type de données sont envoyées par le back les objets dolibarr sont exposés au front. 
- 
-Comme certains types de données côté dolibarr n'existent pas à l'identique côté front nous avons mis en place des mécanismes de correspondance ou **mapping** dont vous trouverez les détails ci après. 
- 
-Pour optimiser les échanges entre le back (php) et le front (react) nous avons fait le choix de permettre la modification des données côté back (fond et forme) avant l'envoi vers le front et lors du retour. 
- 
-##Listez les champs de l'objet dolibarr que vous voulez publier vers le front 
- 
-Vous pouvez limiter côté back la liste des champs qui seront envoyés vers l'application react en lisant les champs que vous voulez exporter dans la variable ` listOfPublishedFields` comme par exemple ci après.  
- 
-La clé est le nom du champ de l'objet dolibarr et la valeur est le nom que vous voulez donner côté réact : Dans l'exemple ci dessous le champ ''nom'' de la société côté dolibarr sera transformé en ''name'' pour le côté front (react). 
- 
-Les clés étrangères comme ''fk_departement'' sont transformée au vol pour passer la valeur au front qui n'a donc pas besoin de connaître l'implémentation et faire une sous requête pour obtenir la valeur du champ en question. 
- 
-Ce choix est clairement fait pour que le front soit le plus générique possible. 
- 
-``` 
- //corresponding fields left dolibarr right front app 
- protected $listOfPublishedFields = [ 
- 'rowid' => 'rowid', 
- 'nom' => 'name', 
- 'address' => 'address', 
- 'zip' => 'zip', 
- 'town' => 'city', 
- 'fk_departement' => 'departement', 
- 'fk_pays' => 'country', 
- 'phone' => 'phone', 
- 'url' => 'url', 
- 'email' => 'email', 
- 'note_public' => 'note_public', 
- 'note_private' => 'note_private', 
- 'logo' => 'logo' 
- ]; 
-``` 
- 
-Ensuite au moment où les données seront mises en formes pour être envoyées vers react un certain nombre de mécanismes sont mis en œuvre: 
- 
-## Filtrer le contenu : fonction magique fieldFilterValueXXXX 
- 
-Imaginez que vous voulez rendre le logo de l'objet Société accessible à l'application react : l'objet dolibarr contient le nom du fichier logo et l'application react s'attend à avoir un logo sous la forme d'un champ base64 encodé (choix qui a été fait pour des questions d'optimisation et d'uniformité / code générique). 
- 
-Vous pouvez implémenter la fonction ''fieldFilterValueXXXX'' en replaçant ''XXXX'' par le nom du champ dont vous voulez filtrer le contenu (avec la 1ere lettre en majuscule), dans notre exemple ça serait donc ''fieldFilterValueLogo'' dans la classe de mappage ''dmSociete'' 
- 
- 
-``` 
- public function fieldFilterValueLogo($societe) 
- { 
- global $conf; 
- // dol_syslog("##### dmHelper : call for fieldFilterValueLogo for " . $societe->logo); 
- $dir     = $conf->societe->multidir_output[$societe->entity] . "/" . $societe->id . "/logos"; 
- $logo = $dir . '/' . $societe->logo; 
- $logoBase64 = ""; 
- if (file_exists($logo)) { 
- $type = pathinfo($logo, PATHINFO_EXTENSION); 
- } else { 
- $logo = dol_buildpath("/smartlivraisons/img/logo.png", 0); 
- $type = pathinfo($logo, PATHINFO_EXTENSION); 
- } 
- $logoBase64 = 'data:image/' . $type . ';base64,' . base64_encode(file_get_contents($logo)); 
- // dol_syslog("##### dmHelper : returns " . strlen($logoBase64)); 
- return $logoBase64; 
- } 
-``` 
- 
- 
-##Listez les champs des lignes de l'objet dolibarr que vous voulez publier vers le front 
- 
-Certains objets dolibarr sont composés de lignes (Exemple : une facture, un devis, un bon de commande...) il faut donc 
- 
-a) envoyer une description des lignes au front pour savoir ce qu'il faut afficher comme composants pour afficher les données (par exemple 4 colonnes : id de type nombre, description de type texte, prix unitaire, quantité, total) 
-b) envoyer le contenu des lignes 
- 
-Malheureusement tous les objets dolibarr ne sont pas conçus de manière strictement identiques (certains ont un préfixe ''Line'' et d'autres ''Ligne'', comme par exemple ''FichinterLigne'' et ''OrderLine'').: 
- 
-D'autre part les objets dolibarr ont tous une variable "fields" qui décrit l'objet mais il n'en est pas de même pour la description des lignes des objets ce qui rends impossible la gestion de code générique côté front. 
- 
-DoliMobile apporte une solution à ce double problème: dans la classe de description du mapping de votre objet (exemple ''dmSmartinter'') vous pouvez utiliser 
- 
-  * a) ''parentClassNameForLines'' pour indiquer le nom de la classe dolibarr qui implémente les lignes de l'objet 
-  * b) ''listOfPublishedFieldsForLines'' pour indiquer la liste des champs que vous voulez exporter et sous quel nom (mapping dolibarr -> application) 
-  * c) ''parentLabelForLines'' pour indiquer le titre (qui sera traduit) que vous voulez afficher au dessus de la liste des lignes sur l'application (par exemple "Détail des lignes de la facture") 
- 
  
Made with ❤ by CAP-REL · SmartMaker · GNU AGPL v3+
Code source · Faire un don
SmarMaker - Documentation

Table of Contents

  • SmartAuth
  • SmartMaker - Back (PHP)
    • Mapping Dolibarr - React
  • SmartMaker - Front (React)
    • Animations de pages
    • Architecture
    • Astuces
    • Calendar
    • Composants et pages
    • Configuration du Provider
    • Debug et Logs
    • Hooks SmartCommon
    • PWA (Progressive Web App)
    • Requêtes API
    • Routage
    • SmartCommon
    • Stockage de données
    • Synchronisation offline
    • Thèmes
    • Traductions
  • HowTo - Pas à pas - Votre première application
    • Développement PHP (back)
    • Développement React (front)
    • Première étape : Module Builder Dolibarr
    • SmartAuth
    • SmartBoot : Un squelette prêt à l'emploi
  • Formation SmartMaker
    • Module 1 : Fondamentaux JavaScript ES6+
      • Chapitre 1 : Variables et Scope
      • Chapitre 2 : Fonctions
      • Chapitre 3 : Programmation Asynchrone
      • Chapitre 4 : Modules ES6
    • Module 2 : Introduction à React
      • Chapitre 1 : Philosophie React
      • Chapitre 2 : JSX
      • Chapitre 3 : Composants
    • Module 3 : Hooks React Fondamentaux
      • Chapitre 1 : useState
      • Chapitre 2 : useEffect
      • Chapitre 3 : useRef
      • Chapitre 4 : useContext
    • Module 4 : React Avancé
      • Chapitre 1 : useCallback et useMemo
      • Chapitre 2 : Custom Hooks
      • Chapitre 3 : Redux et Redux Toolkit
    • Module 5 : Architecture SmartMaker
      • Chapitre 1 : Structure du projet
      • Chapitre 2 : Configuration
      • Chapitre 3 : Flux de données
    • Module 6 : SmartCommon - Composants
      • Chapitre 1 : Mise en page
      • Chapitre 2 : Navigation
      • Chapitre 3 : Formulaires
      • Chapitre 4 : Affichage
    • Module 7 : SmartCommon - Hooks
      • Chapitre 1 : useApi
      • Chapitre 2 : Gestion d'état
      • Chapitre 3 : Hooks utilitaires
      • Chapitre 4 : Synchronisation Offline
    • Module 8 : Backend API (PHP)
      • Chapitre 1 : Routage
      • Chapitre 2 : Controllers
      • Chapitre 3 : Mappers
      • Extrafields et formulaires dynamiques
    • Module 9 : Intégration complète
      • Chapitre 1 : Backend
      • Chapitre 2 : Frontend
      • Chapitre 3 : Déploiement
    • Module 10 : Fonctionnalités avancées
      • Chapitre 1 : Mode offline
      • Chapitre 2 : Internationalisation (i18n)
      • Chapitre 3 : Autres fonctionnalités
    • Module 11 : Bonnes pratiques
  • Démonstration
  • Start
  • Composants et pages