Cette action fait partie du groupe d'actions gérant l'affichage de données JSON, XML ou CSV issues d'un fichier sur le serveur ou récupérées avec l'API d'un site web. Un mécanisme de cache permet de limiter les interrogations du serveur distant. Très pratique pour les sites avec une formule gratuite limitée en nombre d'appels.
- data2list : sous forme d'une liste arborescente
- data2table : dans un tableau HTML
- data-info : selon votre modèle de mise en page
Ces actions utilisent les mêmes principes et options que vous pouvez décoouvrir à l'aide des boutons bleus ci-dessous.
{up data2list=data_source}
emplacement et type des données
- data2list: URL vers data ou fichier
- datatype: pour forcer la détection du type de données (json, xml, csv)
- encoding: codage des caractères de la source. ex: ISO-8859-1
uniquement pour des données CSV ou XML
- csv-header = 1: 1 si la première ligne contient les titres des colonnes.
- csv-header-title: titres des colonnes séparées par csv-separator. Si défini, remplace les titres du fichier
- csv-separator = ;: caractère séparateur pour les colonnes
- xml-attributes: les champs dans la balise ouvrante sont dans un sous-tableau @attributes, Non par défaut
sélection des lignes
- lign-root: chemin vers la ligne racine. Exemple: trk/trkseg
- lign-select: indice(s) de(s) ligne(s) de données ou col1:val1;ou val2, colN:valN pour recherche contenu
sélection des colonnes/champs
- col-include: liste des champs retournés (séparateur virgule)
- col-exclude: liste des champs non retournés (séparateur virgule)
template pour mise en forme
- template = ##LABEL##: ##VALUE##: modèle pour une ligne
- array-subtitle: contenu du premier niveau de la liste. vide=indice
mise en forme du contenu
- col-class: classes pour les champs (champ1:class1 class2,champ2:class)
- col-label: correspondance entre nom du champ et titre colonne (champ1:col1,champ2:col2, ...)
type des contenus
- col-type: date, url, image, boolean, string ou format pour fonction php: sprintf
- date-format = %e %B %Y: format pour les dates
- boolean-in = 1,0: valeurs dans fichier pour true,false,null
- boolean-out = lang[fr=oui,non,-;en=yes,no,n.a.]: texte en sortie pour les valeurs true,false,null
- url-target = _blank: Cible pour ouverture URL
- image-path: chemin vers une image dans les données
- image-max-size: coté du carré dans lequel elle sera inscrite. Exemple: 100px
si un champ est vide
- col-empty: contenu d'un champ si vide u égal à zéro. ex: colname:none, ...
- col-empty-invisible: 1 = ne pas afficher les labels des champs avec valeur vide
habillage du bloc retourné
- id:
- class: classe(s) pour bloc
- style: style inline pour bloc
- css-head (base-css): style ajouté dans le HEAD de la page
Gestion du cache interne
- cache-delay = 30: durée du cache en minutes. 0 pas de cache
Un exemple simple
Nous voulons afficher les données des villes partageant le même code postal en utilisant les données fournies le site geo.api.gouv.fr
Le shortcode
{up data2list=https://geo.api.gouv.fr/communes?codePostal=13600}
L'option principale du shortcode est l'url vers les données. Voir la documentation sur geo.api.gouv.fr/decoupage-administratif/communes
Le contenu du fichier distant
Le résultat
- 0
- nom: Ceyreste
- code: 13023
- codeDepartement: 13
- siren: 211300231
- codeEpci: 200054807
- codeRegion: 93
- codesPostaux
- 0: 13600
- population: 4729
- 1
- nom: La Ciotat
- code: 13028
- codeDepartement: 13
- siren: 211300280
- codeEpci: 200054807
- codeRegion: 93
- codesPostaux
- 0: 13600
- population: 35993
Utilisez cet avantage pour vérifier et analyser l'organisation de la source de données.
Vous pouvez aussi vérifier les données avec ces 3 sites : CSV, JSON et XML
Améliorer la présentation
Le principal reproche que l'on peut faire au résultat précédent est la présence des indices des tableaux que l'on voit aussi dans la source de données.
Pour éviter cela, l'action data2list propose 2 options : col-type et array-subtitle.
Voyons-les en action avec ce shortcode.
{up treeview}
{up data2list=images/actions-demo/data/communes-01460.json
| array-subtitle=root:[b]##nom##[/b] (##codesPostaux/0##)
| col-type=codesPostaux:compact, population:##num## hab., siren:mask ###-###-###
| col-empty=population:[span class="t-red"]aucun habitant[/span]
}
{/up treeview}
J'ai inclus le shortcode dans une action treeview. Cette présentation plus compacte permet d'utiliser une autre commune avec plus de résultats.
Cliquez sur Nantua pour voir le résultat
- Brion (01460)
- nom: Brion
- code: 01063
- codeDepartement: 01
- siren: 210-100-632
- codeEpci: 200042935
- codeRegion: 84
- codesPostaux: 01460
- population: aucun habitant
- Béard-Géovreissiat (01460)
- nom: Béard-Géovreissiat
- code: 01170
- codeDepartement: 01
- siren: 210-101-705
- codeEpci: 200042935
- codeRegion: 84
- codesPostaux: 01460
- population: 1 053 hab.
- Montréal-la-Cluse (01460)
- nom: Montréal-la-Cluse
- code: 01265
- codeDepartement: 01
- siren: 210-102-653
- codeEpci: 200042935
- codeRegion: 84
- codesPostaux: 01460
- population: 3 456 hab.
- Nurieux-Volognat (01460)
- nom: Nurieux-Volognat
- code: 01267
- codeDepartement: 01
- siren: 210-102-679
- codeEpci: 200042935
- codeRegion: 84
- codesPostaux: 01460
- population: 1 025 hab.
- Nantua (01130)
- nom: Nantua
- code: 01269
- codeDepartement: 01
- siren: 210-102-695
- codeEpci: 200042935
- codeRegion: 84
- codesPostaux: 01130, 01460
- population: 3 454 hab.
- Port (01460)
- nom: Port
- code: 01307
- codeDepartement: 01
- siren: 210-103-073
- codeEpci: 200042935
- codeRegion: 84
- codesPostaux: 01460
- population: 836 hab.
- l'option array-subtitle substitue l'indice du tableau par le contenu du champ nom et de la première valeur de codesPostaux.
L'argument est composé du mot "root" pour indiquer que la règle s'applique à la racine du tableau, suivi d'un double-point, puis d'un modèle décrivant le contenu attendu au format bbcode.
On indique le nom des champs entre 2 double dièses selon la méthode habituelle avec UP.
Si la valeur désirée n'est pas un enfant direct, on indique le chemin en séparant les champs par des slash (voir codesPostaux).
Cette option accepte plusieurs règles en les séparant par des virgules. Pour les sous-tableaux dont les éléments sont des sous-tableaux, on utilise le nom du champ parent à la place de root. - l'option col-type spécifie le traitement à apporter au contenu du champ.
Dans notre exemple, nous voulons que le tableau interne de codesPostaux soit converti en chaîne et que la valeur du champ population soit exprimée avec un espace tous les milliers, puis suivie du mot 'hab.'. Pour siren, le mot-clé mask introduit le modèle de présentation. Plus d'informations sur les options des 3 actions data - l'option col-empty indique le texte à utiliser si la valeur est zéro ou vide pour le champ "population". La démo utilise une version modifiée des données avec une population à zéro pour "Brion".
Sélectionner les données
Il est possible de limiter les données à la ville de Nantua OU de Montréal-la-Cluse en les spécifiant dans une option select.
Juste pour montrer l'usage du ET, il faut également que ces 2 villes soient dans la région 84.
l'option col-exclude permet de ne pas afficher certains champs et col-label permet de renommer les champs.
{up data2list=https://geo.api.gouv.fr/communes?codePostal=01460
| lign-select=nom:NANTUA; Montréal-la-Cluse , codeRegion:84
| col-exclude=codeDepartement, codeEpci
| col-label=code:code INSEE, codesPostaux:CP
| array-subtitle=root:[b]##nom##[/b] (##codesPostaux/0##)
| fields-type=codesPostaux:compact, population:##num## hab.}
- Montréal-la-Cluse (01460)
- nom: Montréal-la-Cluse
- code INSEE: 01265
- siren: 210102653
- codeRegion: 84
- CP: 01460
- population: 3 456 hab.
- Nantua (01130)
- nom: Nantua
- code INSEE: 01269
- siren: 210102695
- codeRegion: 84
- CP: 01130, 01460
- population: 3 454 hab.
Une variante pour montrer la sélection par l'indice des lignes (la première et la dernière) et l'usage de l'option col-include.
{up data2list=https://geo.api.gouv.fr/communes?codePostal=01460
| lign-select=1,-1
| col-include=population
| array-subtitle=root:[b]##nom##[/b] (##codesPostaux/0##)
| fields-type=population:%s hab.}
- Brion (01460)
- population:
- Port (01460)
- population: 836 hab.
upactionslist (1) flexauto (5) modal (3) icon (2) data2list (4) div (1) treeview (1) jcontent-info (1) tabslide (1) toc (1)