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.

🆙 data2table : Affiche le contenu d'un fichier JSON, XML ou CSV sous forme d'un tableau

Cliquer pour lire la documentation

syntaxe {up data2table=data_source}
@version: UP-3.0 @author: lomart @license: GNU/GPLv3 @tags: Expert

    emplacement et type des données

    • data2table: URL vers data ou fichier
    • datatype: pour forcer la détection du type de données (json, xml)
    • encoding: codage des caractères de la source : ISO-8859-1

    uniquement pour les données CSV ou XML

    • csv-header = 1: 0 ou 1 pour indiquer que la première ligne contient les titres de colonnes
    • csv-header-title: liste des titres de colonnes séparés par csv-separator
    • 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: 0 /* [st-sel-lign] sélection des lignes *

    sélection racine données et lignes

    • lign-root: chemin de la clé racine. Exemple: trk/trkseg
    • lign-select: indice du groupe de données ou champ:valeur pour recherche contenu
    • lign-filter: filtrage après lign-select sous la forme champ[=>,<=,==,<>]valeur OU field>
    • lign-sort: tri des données sous la forme champ1:asc|desc, champ2:asc|desc, ...
    • lign-max: nombre de lignes retournées

    sélection des colonnes/champs

    • col-include: liste des champs (séparateur virgule) retournés
    • col-exclude: liste des champs (séparateur virgule) non retournés

    Mise en forme des colonnes

    • col-list:
    • 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, compact 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 ou égal à zéro. ex: colname:none, ...

    habillage du bloc retourné

    • model: nom de la classe modèle dans le fichier data2table.css : noborder, line, blue, green
    • id:
    • class: classe(s) pour bloc
    • style: style inline pour bloc
    • css-head (base-css): style ajouté dans le HEAD de la page

    internal action cache

    • cache-delay = 30: durée du cache en minutes. 0 pas de cache

    Version 3.1
    • Ajout option col-list qui permet de définir l'ordre des colonnes principales (niveau 1)
    Version 5.1

    Un exemple simple

    Je vais reprendre l'exemple utilisé pour l'action data2list.

    Nous voulons afficher les données des villes partageant le même code postal en utilisant les données fournies par le site geo.api.gouv.fr

    Le contenu du fichier distant

    Le shortcode

    {up data2table=https://geo.api.gouv.fr/communes?codePostal=13600}
    

    L'option principale du shortcode est l'url vers les données.

    Vous pouvez les voir dans leur forme brute ci-contre ou directement avec cette url https://geo.api.gouv.fr/communes?codePostal=13600.

    L'action peut traiter des données au format JSON, XML ou CSV. Si elle ne peut pas reconnaitre le format, il est possible de le forcer avec l'option datatype

    Le résultat

    nom code codeDepartement siren codeEpci codeRegion codesPostaux population
    0
    Ceyreste130231321130023120005480793136004729
    La Ciotat1302813211300280200054807931360035993

    C'est un bon début, mais deux ou trois choses me gêne.

    • le label des colonnes est le nom du champ dans le fichier. Remédions à cela avec l'option col-label qui reçoit la liste des champs avec leur traduction.
      Exemple: fields-label=nomChamp:label, nomChamp:label, ...
    • pour gagner de la place, la colonne codeDepartement est redondante avec le code postal. Nous allons la supprimer avec l'option col-exclude.
    • le style de base de l'action est très neutre. Avec model, nous lui affectons une des classes du fichier data2table.scss.
      L'option class centre le contenu de toutes les cellules du tableau.
      Pour avoir la première colonne 'nom' en gras et justifiée à gauche, nous utilisons l'option col-class avec les classes à affecter au champ.
    • l'affichage des valeurs des colonnes siren et population pourrait être enrichie en ajoutant l'unité et des espaces pour faciliter la lecture avec l'option col-type.
    {up data2table=https://geo.api.gouv.fr/communes?codePostal=13600
    | col-exclude=codeDepartement
    | col-label=code:Code INSEE, codeRegion:Région, codesPostaux:CP, codeEpci:EPCI
    | col-type=population:##num## hab., siren:MASK ### ### ###
    | model=blue | class=tc | col-class=nom:b tl }
    nom Code INSEE siren EPCI Région CP population
    0
    Ceyreste13023 211 300 23120005480793136004 729 hab.
    La Ciotat13028 211 300 280200054807931360035 993 hab.

    Plus d'informations sur les options communes aux 3 actions data

    Sélection des lignes

    Option lign-root

    L'option lign-root permet de sélectionner une partie de l'arborescence du fichier qui deviendra la racine des données affichées

    Le fichier des communes ne convenant pas pour cette démo, je vais utiliser un fichier GPX, au format XML, créé avec https://graphhopper.com/maps/

    {up data2table=images/actions-demo/data/GraphHopper-exemple.gpx
    | lign-root=trk/trkseg/trkpt
    | xml-attributes}

    L'argument de root est le chemin comme vous pouvez le voir sur le fichier original

    Note: le titre "@attributes" est attribué (par PHP) pour les éléments internes à une balise.
    Il peut être renommé avec l'option col-label ou ignoré avec xml-attributes=0

    @attributes ele
    lat lon
    48.4049502.72074078.1
    48.4049602.72087078.3
    48.4049202.72094078.5
    48.4050602.72144078.1
    48.4051202.72152077.8

    L'option lign-select

    L'option lign-select propose 2 méthodes pour sélectionner une ou plusieurs lignes.

    id prenom nom
    1AlainTERRIEUR
    2AlexTERRIEUR
    3AlainPROVISTE
    4AnneANAS
    5KellyDIOTE

    Afficher les lignes contenant la valeur recherchée pour un ou plusieurs champs.
    L'argument de select est une liste de clé:valeur séparée par des virgules. select=key:value, ... ,keyN:valueN
    La ligne doit répondre à tous les critères (opérateur AND).
    La recherche n'est pas sensible aux minuscules/majuscules pour la valeur.

    Pour le premier exemple, je veux les fiches des prénommés Alain ou Alex

    {up data2table=images/actions-demo/data/select.json
    | lign-select=prenom:Alain;alex}
    id prenom nom
    1AlainTERRIEUR
    2AlexTERRIEUR
    3AlainPROVISTE

    Pour sélectionner uniquement Alain TERRIEUR

    {up data2table=images/actions-demo/data/select.json
    | lign-select=prenom:Alain;Alex, nom:terrieur}
    id prenom nom
    1AlainTERRIEUR
    2AlexTERRIEUR

    Afficher des lignes selon leur indice.

    Il est possible d'indiquer la position de la ligne dans le fichier. La première ligne est 1.
    Pour avoir les dernières lignes, il suffit d'indiquer la position en valeur négative. La dernière ligne est -1

    Ce shortcode affiche la première et dernière ligne de notre fichier.

    {up data2table=images/actions-demo/data/select.json
    | lign-select=1,-1}
    id prenom nom
    1AlainTERRIEUR
    5KellyDIOTE

    L'option lign-filter

    L'option lign-filter réalisée après une éventuelle sélection par lign-select, permet une sélection plus souple.

    La valeur de cette option se compose du nom de la colonne, d'un opérateur de comparaison et de la valeur recherchée. 

    Les opérateurs de comparaison proposés sont :

    • <= : inférieur ou égal
    • >= : supérieur ou égal
    • == : égal
    • <> : différent
    • >< : compris entre 2 valeurs séparées par un tiret (-)

    Pour la démonstration, nous utiliserons la même table avec des colonnes date et numérique :

    id prenom nom score date
    1AlainTERRIEUR1020240101
    2AlexTERRIEUR5020231001
    3AlainPROVISTE2020240915
    4AnneANAS2020240101
    5KellyDIOTE10120220701
    {up data2table=images/actions-demo/data/select-2.json
    | col-type=date:date | date-format=%d/%m/%Y 
    | lign-filter=prenom<=B, date><20230101-20240701}

    Nous recherchons toutes les personnes dont le prénom commence par un a et dont la date est entre le 01/01/2023 et le 01/07/2024.

    id prenom nom score date
    1AlainTERRIEUR1001/01/2024
    2AlexTERRIEUR5001/10/2023
    4AnneANAS2001/01/2024

    Notez que le filtrage n'est pas sensible aux minuscules/majuscules et que le type de contenu est identifié automatiquement comme étant une chaine ou un nombre. Ici, la date est filtrée sur sa valeur numérique avant conversion vers un format plus lisible.

    L'option lign-sort

    Cette option permet de trier le résultat selon la valeur d'une ou plusieurs colonnes.

    Le tri est réalisé sur la valeur de la cellule avant l'application de la mise en forme. Cela est particulièrement utile pour les dates.

    L'exemple ci-dessous trie la table dans l'ordre croissant des dates, puis décroissant pour les scores

    {up data2table=images/actions-demo/data/select-2.json
    | col-type=date:date | date-format=%d/%m/%Y
    | lign-sort=date:asc, score:desc}
    id prenom nom score date
    5KellyDIOTE10101/07/2022
    2AlexTERRIEUR5001/10/2023
    4AnneANAS2001/01/2024
    1AlainTERRIEUR1001/01/2024
    3AlainPROVISTE2015/09/2024

    L'option lign-max

    Cette option retourne uniquement le nombre de lignes demandées après un séléction par lign-select et lign-filter puis le tri par lign-sort

    Ce  shortcode affiche les 3 premières lignes après tri sur score et nom

    {up data2table=images/actions-demo/data/select-2.json
    | col-type=date:date | date-format=%d/%m/%Y
    | lign-sort=score:asc, nom:desc
    | lign-max=3}
    id prenom nom score date
    1AlainTERRIEUR1001/01/2024
    3AlainPROVISTE2015/09/2024
    4AnneANAS2001/01/2024

    Les titres de colonnes

    Nous n'avons pas besoin de les définir, car ils correspondent au nom des champs des fichiers JSON, XML ou CSV.
    L'action ne peut traiter que 2 niveaux de sous-titres, ce qui me semble raisonnable pour la représentation dans un tableau.
    En cas de dépassement, les données seront affichées sous une forme compacte. Voir maths pour Alain TERRIEUR

    Voici un exemple avec ce shortcode qui utilise ce fichier :

    {up data2table=images/actions-demo/data/school.json | style=display:block;overflow-x:scroll;}
    Id Nom Age Matières Classe Absences
    Physique Français SVT Allemand Maths Anglais 0 1 2
    1Alain TERRIEUR1714168spé: 16, expert: 14TS210/3/2225/4/224/6/22
    2Annie VERSAIRE16101213TS2
    3Sarah TATOUILLE17101211TS216/2/22
    4Kelly DIOTE188811TS2

    Si vous avez regardé le fichier à l'origine de ce tableau, on constate que les 4 élèves n'ont ni les mêmes matières, ni les mêmes absences. De plus les informations ne sont pas dans le même ordre. L'action data2table s'en arrange fort bien !

    Apportons quelques modifications :

    Id Nom Age Matières Classe Absences
    Physique Français SVT Allemand Maths Anglais
    1Alain TERRIEUR1714168spé: 16, expert: 14TS210/3/22, 25/4/22, 4/6/22
    2Annie VERSAIRE16101213TS2
    3Sarah TATOUILLE17101211TS216/2/22
    4Kelly DIOTE188811TS2

    avec ce shortcode :

    {up data2table=images/actions-demo/data/school.json
     | col-type=Absences:compact
    | class=tc | model=blue | col-class=Matières:b t-green, Matières/Maths:b bg-yellow t-blue, Nom:tl b, Absences:tl}
    • col-type: si pour les matières, la présence de sous-titres avec le nom de celles-ci se justifie, c'est inutile pour les absences. Il suffit le nom de la colonne concernée suivies d'un deux-points et du mot 'compact'. 
    • class : pour centrer toutes les cellules
    • model : le nom d'une classe du fichier data2table.css. Vous pouvez créer une version modifiée de ce fichier dans le sous-dossier custom de l'action.
    • col-class : cette option permet d'indiquer la ou les classes attribuées aux cellules d'une colonne du tableau. Il suffit d'indiquer le nom du champ et ses classes (pas de style inline). Pour les sous-colonnes, on peut affecter toutes les colonnes d'un groupe en utilisant son titre (Matières dans notre exemple pour le texte gras et vert) ou une sous-colonne en indiquant le chemin vers celle-ci (Matières/Maths pour le fond jaune).

    Version 3.1 l'option col-list permet de choisir et définir l'ordre des colonnes de niveau 1.
    Pour mémoire, l'option col-include sélectionne uniquement les colonnes dont le label est dans la liste et col-exclude les désélectionne à la lecture des données avant l'application de la règle de col-list.

    Exemple avec la première table de cette démo.

    {up data2table=images/actions-demo/data/communes-13600.json
    | col-list=code,nom}
    code nom
    13023Ceyreste
    13028La Ciotat

    Type des colonnes

    Les 3 actions "data" partagent des options que vous pouvez voir sur cette page

    image nom description lien vers démo
    cornercornerun badge et ruban dans un angleup.lomart.fr/demo/action-corner
    flexboxflexAutoune grille responsive sur plusieurs colonnesup.lomart.fr/demo/action-flexauto
    modalmodaldu contenu dans une popupup.lomart.fr/demo/action-modal
    osmaposmapaffiche une carte OpenStreetMapup.lomart.fr/demo/action-osmap
    popoverpopoverun popup lors d'un clicup.lomart.fr/demo/action-popover
    pdfpdf-gallerypropose la visualisation et le téléchargement de tous les fichiers PDF d'un dossier.up.lomart.fr/demo/action-pdf-gallery

    Pour cette démo, j'utilise ce fichier créé pour l'occasion.

    {up data2table=images/actions-demo/data/up-actions.csv
    | col-type=image:image, lien vers démo:url
    | image-path=images/actions/
    | image-max-size=50px}

    L'option col-type définit que la colonne "image" contiendra une image et que la colonne "lien vers démo" est une URL

    Pour l'image, je précise le chemin pour l'atteindre ainsi que sa plus grande dimension

    Trier la table

    Pour proposer une fonction de tri ou de sélection de vos données en format table, le plus simple est d'utiliser l'action "table-sort". Voici un exemple


    id nom population superficie
    FR-ARAAuvergne-Rhône-Alpes794828769711
    FR-BFCBourgogne-Franche-Comté281142347784
    FR-BREBretagne331890427209
    FR-CVLCentre-Val de Loire257625239151
    FR-CORCorse3349388722
    FR-GESGrand Est554958657441
    FR-HDFHauts-de-France600381531806
    FR-IDFÎle-de-France1217488012011
    FR-NORNormandie333047829906
    FR-NAQNouvelle-Aquitaine595697884036
    FR-OCCOccitanie584510272724
    FR-PDLPays de la Loire375760032082
    FR-PACProvence-Alpes
    Côte d'Azur
    503089031400
    FR-GUAGuadeloupe3902531628
    FR-GUFGuyane (française)26870083846
    FR-MTQMartinique3725941128
    FR-LRELa Réunion8536592512
    FR-MAYMayotte256518376
    {up table-sort | col-type=a-i-n-n | pagination=10 }
      {up data2table=files/mapael/france_regions_2016.csv}
    {/up table-sort}

    L'action data2table est inluse dans une action table-sort.avec 2 options :

    • col-type pour indiquer la méthode de tri pour chaque colonne: alphabétique pour la première, non sensible min/maj pour la seconde et numérique pour les 2 dernières
    • pagination limite le nombre de lignes

    Le cache

    Les actions data proposent un mécanisme de cache pour limiter les appel vers le serveur externe.

    Outre la fiabilité de disposer d'une source locale, cela permet d'utiliser les formules gratuites des API, limitées en nombre d'utilisations journalières.

    Il suffit d'indiquer le nombre de secondes avant d'actualiser les données : cache-delay=30

    Par défaut, le délai est de 3600 secondes, soit 1 heure

    Pour info, cette page utilise 51 action(s) :
    upactionslist (1) readmore (2) csv2def (1) flexauto (2) modal (8) icon (4) flexbox (6) div (1) data2table (16) listup (3) table-by-rows (2) span (1) table-sort (1) jcontent-info (1) tabslide (1) toc (1)