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.

🆙 data_info : Retourne des champs d'une source de données selon un template de mise en forme *

Cliquer pour lire la documentation

syntaxe {up data-info=data_source | template=##nom_champ##}
@version: UP-3.0 @author: lomart @license: GNU/GPLv3 @tags: Expert

    emplacement et type des données

    • data_info: 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 : ISO-8859-1

    uniquement pour des 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 des lignes

    • lign-root: chemin de la clé racine. Exemple: trk/trkseg
    • lign-select: indice du groupe de données ou champ:val1;val2 pour recherche champ=val1 ou val2
    • 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

    template pour mise en forme

    • template (item-template): modèle de mise en forme résultat

    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 u égal à zéro. ex: colname:none, ...
    • no-data-html = en=no data for %s;fr=aucune donnée pour %s: contenu si aucune donnée disponible. BBcode admis.

    habillage du bloc retourné

    • id: identifiant
    • tag: balise pour bloc principal
    • class: classe(s) ou style inline pour bloc principal
    • style: classe(s) ou style inline pour bloc principal
    • css-head (base-css): style ajouté dans le HEAD de la page

    cache interne

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

    Version 5.1

    Un exemple simple

    Nous voulons afficher la population d'une ville française en utilisant les données fournies le site geo.api.gouv.fr

    Le contenu du fichier distant (avec les actions data2list et treeview)

    • 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

    Le résultat


    La ville de Ceyreste (13600) a 4729 habitants
    La ville de La Ciotat (13600) a 35993 habitants

    Le shortcode

    {up data-info=https://geo.api.gouv.fr/communes?codePostal=13600}
    La ville de [b]##nom##[/b] (##codesPostaux/0##) a ##population## habitants
    {/up data-info}

    L'option principale du shortcode est l'url vers les données que l'on peut voir au-dessus dans sa forme brute grâce à l'action data2list.

    Le modèle de mise en page pour le retour est le contenu entre les shortcodes. Il peut également être indiqué avec l'option template.
    Le nom des champs est indiqué entre des doubles dièses. Pour le code postal qui est le premier champ du champ "codesPostaux", on indique le chemin en séparant les éléments par des slash. Le html et bbcode sont acceptés.

    Avec des options

    Dans l'exemple précédent, comme nous n'avons pas précisé la ligne d'informations recherchée, data-info a pris la première ligne des données. Il n'est pas possible de cibler plusieurs lignes. Pour avoir les infos de la dernière ligne, nous utiliserons l'option lign-select=-1. Plus d'informations sur les options des 3 actions data

    Le shortcode

    {up data-info=images/actions-demo/data/communes-13600.json
    | lign-select=-1
    | template=La ville de [b]##nom##[/b] (##codesPostaux/0##)##population##.
    | col-type=population:" a ##num## habitants"}

    Le résultat

    La ville de La Ciotat (13600) a 35 993 habitants.
    Avez-vous remarqué les guillemets doubles qui encadre les textes des options ?
    C'est une nouveautés de la version 3.0 de UP qui permet d'ajouter des espaces au début ou à la fin des arguments des options.

    L'option col-type contient l'ensemble du texte qui sera affiché.
    Le mot-clé ##num## affiche la valeur de "population" avec un espace tous les milliers.
    Si la valeur est zéro ou vide, rien ne sera affiché. Il est possible d'indiquer un texte dans ce cas avec l'option col-empty. Exemple: col-empty=population:" n'a aucun habitant"

    Affichage de plusieurs lignes

    Avant la version 5.1, seule la première ligne correspondant à l'option lign-select était affiché. Cela empêchait d'utiliser un fichier de données (csv, json, xml) pour alimenter une autre action comme scroller, marquee, flexauto, ...

    Pour tous les exemples nous allons utiliser ce fichier JSON présenté ici en vue table pour montrer les titres de colonnes.

    {up data2table=images/actions-demo/data/select-2.json}

    Le résultat

    id prenom nom score date
    1AlainTERRIEUR1020240101
    2AlexTERRIEUR5020231001
    3AlainPROVISTE2020240915
    4AnneANAS2020240101
    5KellyDIOTE10120220701

    lign-select

    Lign-select est utilisé pour retourner uniquement les lignes dont le prenom est Anne OU Alain ET l'age 20 ans .

    Notez que la recherche non sensible aux minuscules/majuscules est réalisée sur la totalité du contenu des cellules.

    Le shortcode

    {up data-info=images/actions-demo/data/select-2.json
      | lign-select=prenom:anne;Alain, score:20
      | tag=ul
      | template=[li]{up icon=Ux1F7A7}##prenom## [b]##nom##[/b] (##score## pts) a commencé le ##date##[/li]
    }

    Le résultat

    • Alain PROVISTE (20 pts) a commencé le 20240915
    • Anne ANAS (20 pts) a commencé le 20240101

    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 (-)

    Dans l'exemple ci-dessous, nous recherchons toutes les personnes dont le nom commence par une lettre plus grande que A et dont le score est inférieur à 50.

    Vous remarquerez que la recherche est réalisée sur la valeur des nombres.

    Le shortcode

    {up data-info=images/actions-demo/data/select-2.json
      | lign-filter=nom>=B, score<=50
      | tag=ul
      | template=[li]{up icon=Ux1F7A7}##prenom## [b]##nom##[/b] (##score## pts) a commencé le ##date##[/li]
    }

    Le résultat

    • Alain TERRIEUR (10 pts) a commencé le 20240101
    • Alex TERRIEUR (50 pts) a commencé le 20231001
    • Alain PROVISTE (20 pts) a commencé le 20240915

    Un autre exemple pour la recherche des lignes dont la date est en 2024.

    Pour faciliter la lecture, j'ai indiqué avec l'option col-type que la colonne date contient des dates à afficher selon le format de l'option date-format

    Attention : la comparaison n'est pas faite sur la chaine 20240101, mais sur sa valeur numérique. Il est donc important que les 2 valeurs aient la même longueur. 

    Le shortcode

    {up data-info=images/actions-demo/data/select-2.json
      | lign-filter=date><20240101-20241231
      | col-type=date:date | date-format=%d/%m/%Y
      | tag=ul
      | template=[li]##prenom## [b]##nom##[/b] (##score## pts) a commencé le ##date##[/li]
    }

    Le résultat

    • Alain TERRIEUR (10 pts) a commencé le 01/01/2024
    • Alain PROVISTE (20 pts) a commencé le 15/09/2024
    • Anne ANAS (20 pts) a commencé le 01/01/2024

    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.

    Le shortcode

    {up data-info=images/actions-demo/data/select-2.json
      | lign-sort=date:desc, nom
      | col-type=date:date | date-format=%d/%m/%Y
      | tag=ul
      | template=[li]##prenom## [b]##nom##[/b] (##score## pts) a commencé le ##date##[/li]
    }

    Le résultat

    • Alain PROVISTE (20 pts) a commencé le 15/09/2024
    • Anne ANAS (20 pts) a commencé le 01/01/2024
    • Alain TERRIEUR (10 pts) a commencé le 01/01/2024
    • Alex TERRIEUR (50 pts) a commencé le 01/10/2023
    • Kelly DIOTE (101 pts) a commencé le 01/07/2022

    lign-max

    Cette option, exécutée après toutes les sélections, retourne le nombre de lignes indiquées. 

    Les critères de sélection de l'exemple ci-dessous sont identiques au précédent, mais seules les 3 premières lignes sont affichées.

    Le shortcode

    {up data-info=images/actions-demo/data/select-2.json
      | lign-sort=date:desc, nom
      | col-type=date:date | date-format=%d/%m/%Y
      | lign-max=3
      | tag=ul
      | template=[li]##prenom## [b]##nom##[/b] (##score## pts) a commencé le ##date##[/li]
    }

    Le résultat

    • Alain PROVISTE (20 pts) a commencé le 15/09/2024
    • Anne ANAS (20 pts) a commencé le 01/01/2024
    • Alain TERRIEUR (10 pts) a commencé le 01/01/2024