From fce80c87c415bcd5c4f164e4f166f972336e89dc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabrice=20PENHO=C3=8BT?= Date: Fri, 4 Mar 2022 17:19:47 +0100 Subject: [PATCH] =?UTF-8?q?Suite=20r=C3=A9daction=20documentation.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/documentation.html | 67 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 67 insertions(+) diff --git a/public/documentation.html b/public/documentation.html index 691c438..d1ef384 100644 --- a/public/documentation.html +++ b/public/documentation.html @@ -158,8 +158,75 @@

Dans les deux cas, il faut ensuite attribuer votre Render à votre instance de FreeDatas2HTML :
myConverter.datasRender=myRender;

+

Besoin d'un rendu complexe, fusionnant plusieurs champs ?

+ +

Il est possible d’obtenir un rendu plus complexe, mixant les données venant de plusieurs champs. C’est par exemple le cas si vous souhaitez créer un lien dont l’URL se trouve dans un champ et l’ancre dans un autre.

+ +

Ceci est possible via l’extension MixedFieldsRender.ts. Cette documentation ne présente pas l’usage de cette extension pour l’instant, mais vous pouvez vous inspirer du code utilisé de l’exemple d'usage de ce site de démonstration ou encore du code utilisé sur le site d’une association pour lister ses partenaires à partir d’un fichier CSV.

+ +

Affichage d’un compteur

+ +

Si vous souhaitez afficher quelque part le nombre d’enregistrements, il vous suffit de fournir l’id de l’élément de votre page devant recevoir cette information :
+ myConverter.datasCounterElt={ id:"ndDatas" };

+ +

Ce compteur sera ensuite mis à jour à chaque actualisation des données. Il prend en compte les filtres activés par l’utilisateur, mais ignore la pagination qui n’est qu’une commodité de navigation.

+ +

Si vous souhaitez vous-mêmes actualiser ce compteur, utilisez cette méthode :
+ myConverter.datasCounter2HTML();

+ +

Proposer des filtres pour les données

+ +

Les filtres sont des éléments SELECT listant, de manière classée et dédoublonnée, toutes les valeurs disponibles pour un champ. Le classement se fait par ordre « naturel », c’est-à-dire par ordre alphabétique ignorant la casse pour les chaînes. De même pour les nombres, « 02 » ne sera pas avant « 1 », bien que « 0 » précède « 1 »… Pour des besoins particuliers, il vous est possible d’utiliser votre propre fonction de classement, ce qui sera expliqué plus loin.

+ +

Si plusieurs filtres sont proposés à l’utilisateur final, seuls les enregistrements validant tous les choix de l’utilisateur seront affichés.

+ +

Pour ajouter un filtre, commencer par l’inclure dans votre script :
+ import { FreeDatas2HTML, Selector } from "./modules/FreeDatas2HTML";

+ +

Pour créer une instance :
+ const myFilter1=new Selector(myConverter, 3, { id:"filter1"});

+ +

Les trois premiers paramètres sont obligatoires :

+ + + +

Un quatrième paramètre est facultatif, mais permet d’indiquer un séparateur, qui vous sera utile si un champ contient plusieurs valeurs pour un même enregistrement.
+ Par exemple, à supposer que vous souhaitiez créer un filtre sur le 3ᵉ champ (donc le numéro 2 !) contenant des mots-clés séparés par des point virgule, voici le code à utiliser :
+ const myFilter2=new Selector(myConverter, 2, { id:"filter2"}, ";" );

+ +

Attention, vous devez d’abord avoir parsé vos données avant de créer votre instance de Selector, car l’existence du champ fourni en paramètre est testé à cette étape.

+ +

Une fois votre instance créée, en attribut supplémentaire permettra à l’utilisateur de sélectionner plusieurs valeurs dans la liste :
+ myFilter2.isMultiple=true;
+ Ce n’est pas le cas par défaut. Si le choix multiple est permis, tout enregistrement valide pour au moins une des valeurs sélectionnées sera affiché.

+ +

L’instanciation va aussi récupérer les données distinctes à proposer dans la liste. Vous pouvez récupérer cette liste de valeurs, via le code suivant :
+ const selectDatas=myFilter1.selectedValues;
+ Il s’agit d’un tableau de chaînes de caractères. Par exemple pour des années :
+ ["1998", "2000", "2005" ....]

+ +

Une fois la configuration terminée, vous pouvez afficher votre liste dans la page via le code suivant :
+ myFilter.filter2HTML();

+ +

Par défaut, le label affiché devant la liste sera le nom du champ tel que présent dans les données traitées.
+ Si vous souhaitez afficher un autre texte, vous pouvez le passer en paramètre :
+ myFilter.filter2HTML("Choisissez une valeur :");

+ +

Pour que votre filtre soit effectivement actif, il vous faut ensuite le transmettre à votre instance de FreeDatas2HTML.
+ Vous pouvez passer tous vos filtres en une seule fois :
+ myConverter.datasFilters=[myFilter1, myFilter2, myFilter3];
+ Il sera en fait acceptée toute instance d’une classe respectant l’interface Filters décrite dans le script interface.ts.

+ + +

 

+

À SUIVRE – DOCUMENTATION EN COURS D’ÉCRITURE

+