Leçon 5.1.

Recherche Multicritère Page 1 of 24

Leçon 5.1. Recherche Multicritère

Ce que vous allez apprendre dans cette leçon
• Création d'une requête paramétrée.
• Création de l'interface de sélection des critères de recherche.
• Passage de paramètres à une requête.
• Affichage du résultat d'une requête dans un champ Table.
• Optimisation du rafraîchissement de la page en activant Ajax.

Durée estimée : 1h30 mn

Leçon précédente Sommaire Leçon suivante

Présentation
Dans les parties précédentes, nous avons créé un projet WEBDEV permettant de créer un site contenant à la fois une partie
Internet et une partie Intranet.

Nous allons reprendre le projet "Site_WEBDEV_Complet" que nous avons manipulé dans les parties 3 et 4.

▶ Si vous n'avez pas ouvert le projet "Site_WEBDEV_Complet" dans la leçon précédente :

1. Si nécessaire, affichez la page d'accueil de WEBDEV (Ctrl + <).
2. Dans la page d'accueil, cliquez sur "Cours d'auto-formation" puis cliquez sur "Site WEBDEV Complet (Avec pages)".

Un projet corrigé est disponible. Ce projet contient les différentes pages créées dans cette
Corrigé

leçon. Pour ouvrir le projet corrigé, dans la page d'accueil, cliquez sur "Cours d'auto-
formation" puis cliquez sur "Site WEBDEV Complet (Corrigé)".

Dans cette leçon, nous allons permettre à l'utilisateur de faire une recherche multicritère.

Dans notre exemple, cette recherche se fera sur le fichier de données "Commande". L'utilisateur pourra sélectionner :
• le nom du client,
• l'état de la commande,
• son mode de règlement,
• le prix de la commande.

L'interface de la page "PAGE_Recherche_multicritere" sera la suivante :

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 5.1. Recherche Multicritère Page 2 of 24

Cette interface est composée :

• de champs permettant de sélectionner les critères de recherche.
• de boutons permettant de lancer la recherche ou d'imprimer le résultat.
• d'un champ Table permettant d'afficher le résultat de la recherche. Ce champ Table est basé sur une requête. Cette
requête va permettre de sélectionner les enregistrements à afficher. Le champ Table listera les résultats de la recherche.

La première étape consiste à créer la requête de sélection des enregistrements.

Qu'est-ce qu'une requête de sélection ?

Une requête de sélection est une requête qui va "ressortir" uniquement les enregistrements
Note

correspondant aux critères spécifiés.

Ce type de requête s'appelle une requête de sélection car en langage SQL l'ordre SELECT est
utilisé.

Création de la requête pour rechercher les commandes

Création de la requête
▶ Pour créer une requête, nous allons utiliser l'éditeur de requêtes.
1. Cliquez sur parmi les boutons d'accès rapide. La fenêtre de création d'un nouvel élément s'affiche : cliquez sur

"Requête". L'assistant de création d'une requête se lance.

2. Sélectionnez l'option "Sélection (SELECT)".
En effet, la requête que nous allons créer va nous permettre de sélectionner des enregistrements. Passez à l'étape
suivante.
3. La fenêtre de description de la requête apparaît.
Arrêtons-nous un instant sur l'interface de l'éditeur de requêtes :

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 5.1. Recherche Multicritère Page 3 of 24

Cette interface est composée de :

1. un rappel de l'analyse (la description de la base de données du projet).

2. les rubriques que la requête doit comporter.
3. les options de sélection des enregistrements.
4. la requête en code SQL ou en langage naturel.

▶ Nous allons construire la requête en sélectionnant les éléments que nous voulons dans le résultat.
1. Double-cliquez sur les rubriques présentes dans l'analyse à gauche de la fenêtre de description. Les rubriques prises
en compte apparaissent alors au centre de l'écran.
Nous voulons afficher :

• les renseignements concernant la commande. Dans le fichier de données "Commande", double-cliquez sur les
rubriques : IDCommande, Date, Etat et TotalTTC.
• les renseignements concernant le client ayant passé la commande. Dans le fichier de données "Client", double-
cliquez sur la rubrique "NomComplet".
• les renseignements concernant le mode de règlement de la commande. Dans le fichier de données
"ModeRèglement", double-cliquez sur les rubriques "Libellé" et "IDModeRèglement".
La fenêtre de description de la requête est la suivante :

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 5.1. Recherche Multicritère Page 4 of 24

2. Nous allons trier les données par date.

• Sélectionnez la rubrique "Commande.Date" au centre de l'écran, puis cliquez sur le bouton "Trier" (présent dans
la liste des actions) et sélectionnez l'option "Trier sur la rubrique sélectionnée".

• Dans la fenêtre qui s'affiche, indiquez un tri croissant sur la rubrique et validez.

3. Une flèche bleue avec le numéro 01 apparaît à droite de la rubrique "Commande.Date". Cette flèche indique qu'un
tri croissant est fait sur cette rubrique. Le chiffre "01" indique que ce tri sera réalisé en premier.

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 5.1. Recherche Multicritère Page 5 of 24

4. Donnez un nom à la requête : saisissez "REQ_RechercheCommandes" à la place de "REQ_SansNom1" dans la zone

"Nom de la requête" :

5. Validez la fenêtre de description de la requête (bouton "OK").

6. Validez la fenêtre de sauvegarde de la requête.
7. La représentation graphique de la requête est affichée :

Test de la requête
Comme tous les éléments d'un projet WEBDEV, il est possible de tester immédiatement la requête que nous venons de
créer :
1. Cliquez sur .

2. Le résultat s'affiche dans une fenêtre :

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 5.1. Recherche Multicritère Page 6 of 24

Si vous faites un clic droit sur le résultat de la requête, un menu contextuel apparaît. Vous avez
alors la possibilité d'exporter le résultat vers :
• un fichier XLS (Excel).
Note

• un fichier XML (eXtensible Markup Language).

• un fichier Word ou Open Office.

3. Le résultat affiché liste TOUTES les commandes. Dans notre cas, nous souhaitons afficher uniquement les commandes
correspondant aux critères de recherche. Pour cela, il est nécessaire d'utiliser une requête paramétrée.
4. Fermez la fenêtre.

Utilisation de paramètres dans la requête

Dans notre exemple, l'utilisateur va pouvoir sélectionner une valeur pour les critères de recherche suivants :
• Nom du client.
• Etat de la commande.
• Mode de règlement de la commande.
• Prix de la commande.

Nous devons modifier la requête afin que ces critères de recherche correspondent à des paramètres de la requête.

▶ Pour définir les paramètres de la requête, affichez la fenêtre de description de la requête : double-cliquez sur le fond de
la représentation graphique de la requête (ou utilisez dans le menu contextuel, l'option "Description de la requête").

▶ Pour gérer le paramètre "Nom du client" :

1. Sélectionnez au centre de l'écran la rubrique Client.NomComplet.
2. Déroulez le bouton "Condition de sélection" (dans la partie "Actions" de la fenêtre) et sélectionnez "Nouvelle
condition".

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 5.1. Recherche Multicritère Page 7 of 24

3. Dans la fenêtre qui s'affiche, nous allons indiquer que la condition de sélection correspond à un paramètre :

• Sélectionnez "Contient".
• Cochez "au paramètre".
• Indiquez le nom du paramètre : "ParamNomClient".

Nous vous conseillons de préfixer les paramètres des requêtes par "param". Il est ainsi
possible de les retrouver très facilement dans l'éditeur de code.
Note

Quand vous recherchez un paramètre de la requête, saisissez simplement ‘param' et la

complétion de l'éditeur de code vous propose tous les paramètres.

4. Validez la fenêtre de description de la condition. Le chiffre "1" apparaît à droite de la rubrique "Client.NomComplet",
indiquant qu'une condition de sélection a été définie.

La description de la requête en langage naturel (en bas de l'éditeur de requêtes) est automatiquement
mise à jour en fonction de la condition ajoutée.
Note

▶ Passons au second paramètre : l'état de la commande :

1. Sélectionnez au centre de l'écran la rubrique Commande.Etat.
2. Déroulez le bouton "Condition de sélection" et sélectionnez "Nouvelle condition".
3. Dans la fenêtre qui s'affiche, nous allons indiquer que la condition de sélection est égale à un paramètre :

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 5.1. Recherche Multicritère Page 8 of 24

• Sélectionnez "Est égal à".

• Sélectionnez "au paramètre".
• Indiquez le nom du paramètre : "ParamEtat".

4. Validez la fenêtre de description de la condition. Le chiffre "1" apparaît à droite de la rubrique "Commande.Etat",
indiquant qu'une condition de sélection a été définie.

▶ Nous allons maintenant définir une condition sur le mode de règlement. La rubrique
"ModeRèglement.IDModeRèglement" ne doit pas être affichée dans le résultat de la requête mais nous souhaitons tout
de même lui appliquer une condition. Pour cela, nous allons la rendre invisible.
1. Pour ne pas afficher la rubrique "ModeRèglement.IDModeRèglement" dans le résultat :

• Cliquez sur l'oeil ( ) correspondant à la rubrique "ModeRèglement.IDModeRèglement" dans la liste des

éléments de la requête (au centre de l'écran).
• Dans le menu qui s'affiche, sélectionnez "Ne pas afficher".

2. Pour définir une condition de sélection sur la rubrique "ModeRèglement.IDModeRèglement" :

• Sélectionnez au centre de l'écran la rubrique "ModeRèglement.IDModeRèglement".

• Déroulez le bouton "Condition de sélection" et sélectionnez "Nouvelle condition".
• Dans la fenêtre qui s'affiche, indiquez que la condition de sélection correspond à un paramètre :

• Sélectionnez "Est égal à".

• Sélectionnez "au paramètre".
• Indiquez le nom du paramètre : "ParamIDModeRèglement".

3. Validez la définition de la condition de sélection.

▶ La dernière condition de sélection à définir concerne le montant de la commande. En fait, nous allons définir deux
conditions afin de spécifier un prix minimum et un prix maximum.
1. Sélectionnez la rubrique "Commande.TotalTTC" dans la liste des éléments de la requête.
2. Affichez le menu contextuel de la rubrique (clic droit) et sélectionnez "Condition de sélection .. Nouvelle condition".
3. Dans la fenêtre qui s'affiche :

• Sélectionnez la condition "Est supérieur ou égal à".

• Cliquez sur "au paramètre".

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 5.1. Recherche Multicritère Page 9 of 24

• Indiquez le nom du paramètre : "ParamPrixMin".

4. Validez la définition de la condition de sélection.

5. Définissez à nouveau une condition sur la même rubrique "Commande.TotalTTC" : affichez le menu contextuel de la
rubrique (clic droit) et sélectionnez "Condition de sélection .. Nouvelle condition".
6. Dans la fenêtre qui s'affiche :

• Sélectionnez la condition "Est inférieur ou égal à".

• Cliquez sur "au paramètre".
• Indiquez le nom du paramètre : "ParamPrixMax".

7. Validez la définition de la condition de sélection.

Il est possible de remplacer la définition des deux conditions de sélection sur la rubrique
(est supérieur ou égal à et est inférieur ou égal à) par une seule condition de sélection "Est
compris entre".
Note

Cependant, l'utilisation d'une condition de sélection de type "Est compris entre" oblige à
saisir les deux valeurs (ce qui n'est pas le cas si deux conditions différentes sont définies).

8. Validez la fenêtre de description de la requête. Le graphe de la requête est modifié pour prendre en compte les
conditions de sélection que nous avons définies.

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 5.1. Recherche Multicritère Page 10 of 24

9. Enregistrez la requête en cliquant sur parmi les boutons d'accès rapide.

Test de la requête paramétrée

▶ Pour tester la requête paramétrée :
1. Cliquez sur .

2. Une fenêtre s'affiche permettant de saisir les différents paramètres de la requête.

Les paramètres peuvent être ignorés en décochant la case devant leur nom. Dans ce cas, la
condition de sélection associée au paramètre est ignorée. Par exemple, si le paramètre
ParamNomClient est ignoré, les commandes de tous les clients seront prises en compte par
Note

la requête.

Remarque : Si tous les paramètres sont décochés, la requête renvoie l'intégralité du

résultat.

3. Saisissez les données suivantes :

• Décochez les paramètres ParamNomClient et ParamEtat.

• Sélectionnez le paramètre ParamIDModeRèglement. Dans la partie basse de l'écran, saisissez "1".
• Sélectionnez le paramètre ParamPrixMin. Dans la partie basse de l'écran, saisissez "1500".
• Sélectionnez le paramètre ParamPrixMax. Dans la partie basse de l'écran, saisissez "3000".

4. Validez la fenêtre. Le résultat de la requête correspondant aux paramètres spécifiés s'affiche.

5. Fermez la fenêtre.

Nous allons maintenant créer la page permettant :

• d'indiquer les paramètres de cette requête,
• d'exécuter cette requête,
• d'afficher le résultat de la requête.

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 5.1. Recherche Multicritère Page 11 of 24

Création de la page proposant la recherche multicritère

Création d'une page

▶ Pour créer une page affichant le résultat de la recherche multicritère :
1. Créez une nouvelle page vierge.

• Cliquez sur parmi les boutons d'accès rapide.

• La fenêtre de création d'un nouvel élément s'affiche : cliquez sur "Page" puis sur "Page".
• L'assistant de création d'une page s'affiche.
• Dans la zone "Basée sur un modèle du projet", choisissez "PAGEMOD_Simple" et validez l'assistant.

2. La fenêtre de sauvegarde de la page est affichée.

3. Saisissez le titre "Recherche multicritère". Le nom "PAGE_Recherche_multicritere" est automatiquement proposé.
4. Validez.

Création des champs de paramétrage des critères et affichage du résultat

Nous allons tout d'abord créer un champ Table basé sur la requête puis créer les différents champs qui permettront à
l'utilisateur de sélectionner les critères de recherche.

Création du champ Table

▶ Pour créer le champ Table affichant le résultat de la recherche :
1. Créez un champ Table : sous le volet "Création", dans le groupe "Données", déroulez "Table" et sélectionnez "Table".
2. Cliquez dans la page "PAGE_Recherche_multicritere" : l'assistant de création du champ Table se lance.
3. Le champ Table va être basé sur la requête "REQ_RechercheCommandes" (que nous avons créée précédemment).
Sélectionnez l'option "Afficher des données d'un fichier ou d'une requête existante". Passez à l'étape suivante de
l'assistant.
4. Sélectionnez la requête qui sera la source de données du champ Table :

• Déroulez le groupe "Requêtes".

• Sélectionnez la requête "REQ_RechercheCommandes".

• Passez à l'étape suivante de l'assistant.

• Sélectionnez toutes les rubriques proposées : elles seront toutes affichées dans le champ Table.

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 5.1. Recherche Multicritère Page 12 of 24

Passez à l'étape suivante de l'assistant.

5. Conservez les options par défaut dans les différents écrans de l'assistant et validez la création du champ Table.
6. Le champ Table est automatiquement créé dans la page.
7. Si nécessaire, modifiez la position du champ Table pour qu'il apparaisse entièrement dans la page.

▶ Pour plus de lisibilité, nous allons modifier la description du champ Table.

1. Affichez la description du champ Table (double-cliquez sur le champ).

La fenêtre de description d'un champ Table est composée de deux zones :

• la zone supérieure présentant le nom du champ, des colonnes et leur type.

• la zone inférieure composée des différents onglets de description.
Note

Si le nom du champ Table est sélectionné, la partie inférieure présente les caractéristiques du
champ Table.

Si une colonne est sélectionnée, la partie inférieure présente les caractéristiques des colonnes.

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 5.1. Recherche Multicritère Page 13 of 24

2. Cliquez sur le nom du champ Table. Dans la partie basse, le libellé du champ Table est affiché. Nous allons modifier
ce libellé. Remplacez le libellé proposé par "Résultats de la recherche".

3. Cliquez sur la colonne "COL_IDCommande". Le titre de la colonne apparaît dans la partie basse de l'écran.
Remplacez le libellé "Identifiant de la commande" par "ID".

4. Cliquez sur la colonne "COL_NomComplet". Remplacez le libellé "Nom" par "Client".

5. Cliquez sur la colonne "COL_Libellé". Remplacez le libellé "Libellé" par "Mode de règlement".
6. Validez la fenêtre de description du champ Table. Le champ est automatiquement mis à jour avec les changements
effectués.
7. Diminuez la taille de la colonne "ID" afin que toutes les colonnes apparaissent dans le champ Table.
8. Agrandissez la taille des colonnes Client et Mode de règlement du champ Table.

9. Enregistrez la page en cliquant sur parmi les boutons d'accès rapide. Nous allons vérifier les tailles des

colonnes en exécutant la page.

Note

Live Data et champs basés sur des requêtes

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 5.1. Recherche Multicritère Page 14 of 24

Le Live data n'est pas affiché dans les champs utilisant une requête comme source de données
pour la raison suivante : les données affichées dépendent du résultat de la requête et ne peuvent
être connues qu'en exécution.

▶ Nous allons faire un premier test de cette page :

1. Cliquez sur parmi les boutons d'accès rapide.

2. Seules les commandes réglées en espèces et dont le prix est compris entre 1500 et 3000 euros s'affichent, comme
lors du dernier test de la requête réalisé sous l'éditeur, lorsque nous avions spécifié les paramètres dans la fenêtre
de test de la requête.

3. Fermez le navigateur pour revenir sous l'éditeur.

▶ Regardons les événements associés au champ Table :

1. Sélectionnez le champ Table et utilisez la touche F2.
2. L'événement "Initialisation de TABLE_REQ_RechercheCommandes" contient le code suivant :

// Le champ utilise une requête paramétrée pour afficher ses données.

// Les paramètres de cette requête doivent être définis avant ou
// lors de l'initialisation du champ.
// La requête sera exécutée automatiquement si au moins un paramètre a été défini.
//
// Pour plus d'informations, veuillez consulter l'aide :
// Requête paramétrée, Utilisation dans un champ Table, un champ Liste ou un champ Combo
//
// Paramètres de la requête 'REQ_RechercheCommandes'
//MaSource.ParamNomClient = <Valeur du paramètre ParamNomClient>
//MaSource.ParamEtat = <Valeur du paramètre ParamEtat>
MaSource.ParamIDModeRèglement = "1"
MaSource.ParamPrixMin = "1500"
MaSource.ParamPrixMax = "3000"

Les paramètres de test ont été récupérés comme paramètres par défaut pour l'exécution. Nous allons maintenant
modifier la page pour que les paramètres soient saisis par l'utilisateur, à l'aide de champs.
3. Pour construire notre page, nous allons passer toutes les lignes de code correspondant aux paramètres en
commentaire :

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 5.1. Recherche Multicritère Page 15 of 24

• Sélectionnez les lignes de code "MaSource ...".

• Utilisez la combinaison de touches Ctrl + / du pavé numérique.

4. Fermez l'éditeur de code (utilisez la croix en haut à droite de l'éditeur).

Nous allons maintenant créer dans notre page les différents champs permettant à l'utilisateur de sélectionner les différents
paramètres de la requête. Ces champs vont être placés au-dessus du champ Table.
▶ Si nécessaire, déplacez le champ Table dans la page et diminuez sa hauteur afin de laisser de l'espace pour créer les
différents champs de sélection des critères.

Premier paramètre : Nom du client

Pour que l'utilisateur puisse saisir un nom de client à chercher, nous allons créer un champ de saisie.
▶ Pour créer le champ de saisie :
1. Affichez si nécessaire le volet "Analyse" : sous le volet "Accueil", dans le groupe "Environnement", déroulez "Volets"
et sélectionnez "Analyse". Les différents fichiers de données décrits dans l'analyse "Site_WEBDEV_Complet"
apparaissent dans le volet.
2. Cliquez sur l'icône à gauche du fichier de données "Client" : les rubriques du fichier de données sont listées.

3. Sélectionnez la rubrique "NomComplet" présente dans le fichier de données Client et réalisez un "Drag and Drop"
de cette rubrique vers la page "PAGE_Recherche_multicritere".
4. Le champ de saisie est automatiquement créé. Positionnez ce champ au-dessus du champ Table.

▶ Nous allons maintenant passer la valeur saisie dans le champ de saisie en paramètre à la requête :
1. Sélectionnez le champ Table et utilisez la touche F2.
2. Dans l'événement "Initialisation" du champ Table, remplacez la ligne :

//MaSource.ParamNomClient = <Valeur du paramètre ParamNomClient>

par

MaSource.ParamNomClient = SAI_NomComplet

Dans ce code, SAI_NomComplet est le nom du champ de saisie que nous venons de créer. La valeur de ce champ
est associée au paramètre ParamNomClient attendu par la requête.
3. Fermez l'éditeur de code.

▶ Avant de tester, nous allons créer un champ Bouton pour ré-afficher le contenu du champ Table en fonction de la valeur
sélectionnée dans le champ Sélecteur :
1. Créez un champ Bouton :

• sous le volet "Création", dans le groupe "Champs usuels", cliquez sur .

• cliquez ensuite dans la page, en haut à droite.

2. Modifiez le libellé du champ (utilisez la touche Entrée du clavier). Le nouveau libellé est "Rechercher".
3. Modifiez le style du champ :

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 5.1. Recherche Multicritère Page 16 of 24

• Dans le menu contextuel du champ (clic droit), sélectionnez l'option "Choisir un style WEBDEV".
• Dans la fenêtre qui s'affiche, sélectionnez "Détails (Avec fond)".

• Validez (bouton "OK").

4. Redimensionnez le champ si nécessaire :

• sélectionnez le champ.
• dans le menu contextuel, sélectionnez l'option "Adapter la taille".

5. Affichez le code associé à ce champ : appuyez sur la touche F2.

6. Dans l'événement "Clic (serveur)", saisissez le code suivant :

// Actualise l'affichage du champ Table

TableAffiche(TABLE_REQ_RechercheCommandes, taInit)

Dans ce code, la constante taInit permet de réexécuter l'événement "Initialisation" du champ Table (l'événement
dans lequel les paramètres sont passés à la requête).
7. Fermez l'éditeur de code.

▶ Nous allons tester le passage du premier paramètre :

1. Enregistrez la page en cliquant sur parmi les boutons d'accès rapide.

2. Cliquez sur parmi les boutons d'accès rapide.

3. Dans la page qui s'affiche, saisissez le nom du client "GUENOT" puis cliquez sur le bouton "RECHERCHER". Le
contenu du champ Table est modifié : toutes les commandes du client "GUENOT" sont affichées.

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 5.1. Recherche Multicritère Page 17 of 24

4. Fermez la page de test.

Second paramètre : Etat de la commande

Une commande peut avoir 3 états :

• en attente,
• payée,
• annulée.

Dans notre analyse, l'état de la commande est enregistré dans la rubrique "Etat" présente dans le fichier de données
"Commande". Cette rubrique est de type sélecteur.

Pour permettre à l'utilisateur de sélectionner un de ces trois états, nous allons utiliser le champ Sélecteur associé à la
rubrique "Etat" du fichier de données "Commande".

Les sélecteurs d'options sont également appelés "cases d'options". Ils permettent de sélectionner
une option et une seule, parmi celles proposées.

Comment différencier le sélecteur et l'interrupteur ?

Note

• Le sélecteur permet de sélectionner une seule option.

• L'interrupteur permet de sélectionner plusieurs options.

▶ Pour créer le champ Sélecteur :

1. Dans le volet "Analyse", cliquez sur l'icône à gauche du fichier de données "Commande" : les rubriques du fichier
de données sont listées.
2. Sélectionnez la rubrique "Etat" présente dans le fichier de données Commande et réalisez un "Drag and Drop" de
cette rubrique vers la page "PAGE_Recherche_multicritere".
3. Le champ Sélecteur est automatiquement créé. Positionnez ce champ au-dessus du champ Table.

▶ Nous allons maintenant utiliser la valeur sélectionnée dans le champ Sélecteur pour la passer en paramètre à la
requête :
1. Affichez les événements associés au champ Table :

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 5.1. Recherche Multicritère Page 18 of 24

• Sélectionnez le champ Table.

• Affichez le menu contextuel (clic droit) et sélectionnez l'option "Code".

2. Dans l'événement "Initialisation" du champ Table, remplacez la ligne :

//MaSource.ParamEtat = <Valeur du paramètre ParamEtat>

par

MaSource.ParamEtat = SEL_Etat

Dans ce code, SEL_Etat est le nom du champ Sélecteur que nous venons de créer. La valeur de ce champ est
associée au paramètre ParamEtat attendu par la requête.
3. Fermez l'éditeur de code.

▶ Nous allons tester le passage des deux premiers paramètres :

1. Cliquez sur parmi les boutons d'accès rapide.

2. Saisissez le nom "GUENOT" et sélectionnez "En attente".

3. Cliquez sur le bouton "RECHERCHER" : seules les commandes de GUENOT en attente de paiement sont listées.

▶ Dans cet exemple, seules les commandes d'un client dans un état spécifique peuvent être listées. Il peut être également
intéressant de lister toutes les commandes d'un client quel que soit leur état. Nous allons modifier notre page pour
réaliser ce traitement.
Pour gérer ce cas, nous allons :

• Ajouter un état supplémentaire afin d'afficher toutes les commandes,

• Gérer l'état supplémentaire.

▶ Fermez le navigateur.

▶ Pour ajouter une option dans le champ Sélecteur :

1. Sélectionnez le champ Sélecteur précédemment créé.
2. Affichez la fenêtre de description du champ (double-cliquez sur le champ par exemple).
3. Dans l'onglet "Contenu", dans la liste des options, insérez l'option "Toutes les commandes" en haut de la liste :

• Appuyez sur le bouton "+".

• Saisissez "Toutes les commandes".
• Utilisez la flèche vers le haut (à droite) pour remonter l'option.

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 5.1. Recherche Multicritère Page 19 of 24

4. Validez la fenêtre de description du champ.

5. Agrandissez le champ sous l'éditeur pour que toutes les options soient affichées (déplacez le champ Table si
nécessaire).

▶ La nouvelle option "Toutes les commandes" revient à ne pas prendre en compte le paramètre "ParamEtat" de la
requête. Pour ne pas prendre en compte un paramètre de la requête, il suffit d'affecter la valeur NULL à ce paramètre.
Nous allons gérer ce cas pour le paramètre ParamEtat.
1. Sélectionnez le champ Table sous l'éditeur et affichez ses événements (touche F2 ou option "Code" du menu
contextuel du champ).
2. Dans l'événement "Initialisation" du champ Table, remplacez la ligne :

MaSource.ParamEtat = SEL_Etat

par :

SELON SEL_Etat
// Toutes les commandes
CAS 1
MaSource.ParamEtat = Null
AUTRE CAS
MaSource.ParamEtat = SEL_Etat-1
FIN

Dans ce code, si le champ SEL_Etat correspond à 1 (cas de l'option "Toutes les commandes"), le paramètre de la
requête associée a pour valeur "NULL". Dans le cas contraire, le paramètre a pour valeur le numéro de l'option
sélectionnée moins 1 (qui correspond à l'option que nous avons ajoutée).
3. Fermez l'éditeur de code.

▶ Nous allons tester immédiatement notre page.

1. Enregistrez la page en cliquant sur parmi les boutons d'accès rapide.

2. Cliquez sur parmi les boutons d'accès rapide.

3. Saisissez le nom "GUENOT" et sélectionnez "Toutes les commandes".

4. Cliquez sur le bouton "RECHERCHER" : toutes les commandes de GUENOT quel que soit leur état sont listées.

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 5.1. Recherche Multicritère Page 20 of 24

5. Fermez le navigateur.

Troisième paramètre : Mode de règlement

Une commande peut avoir plusieurs modes de règlement : espèces, chèques, ... Les différents modes de règlement
possibles sont stockés dans le fichier de données "ModeRèglement".

Nous allons utiliser un champ Combo basé sur ce fichier de données pour permettre à l'utilisateur de sélectionner le mode
de règlement voulu.

Le champ "Combo" permet d'afficher une liste d'éléments et de sélectionner un élément dans
cette liste.

A la différence d'une liste, une combo n'affiche qu'un élément à la fois : lors d'un clic sur le champ,
la combo se déroule et propose de sélectionner un autre élément. Un seul élément est sélectionné.
Note

Les éléments apparaissant dans une combo peuvent être déterminés lors de la création du champ
sous l'éditeur. Ces éléments :
• sont déterminés par programmation.
• proviennent d'un fichier de données ou d'une requête.

▶ Pour créer un champ Combo :

1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur "Combo".
2. Cliquez dans la fenêtre à l'emplacement où le champ doit être créé (par exemple à côté du sélecteur précédemment
créé).
3. L'assistant de création du champ Combo se lance.
4. Sélectionnez l'option "Afficher des données provenant d'un fichier ou d'une requête" et passez à l'étape suivante.
5. Sélectionnez le fichier de données "ModeRèglement" et passez à l'étape suivante.
6. La rubrique à afficher dans le champ Combo est "Libellé". Sélectionnez "Libellé". Passez à l'étape suivante.
7. Sélectionnez la clé de parcours : "Libellé". Passez à l'étape suivante.
8. Sélectionnez la valeur de retour "IDModeRèglement". Cette valeur de retour est très importante car c'est elle qui
sera passée en paramètre à la requête. Passez à l'étape suivante.
9. Conservez les options par défaut dans les différentes étapes de l'assistant et validez la création du champ Combo.
10. Le champ Combo est automatiquement créé dans la page.

▶ Modifiez le libellé du champ Combo (utilisez la touche Entrée du clavier). Le nouveau libellé est "Mode de règlement".

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 5.1. Recherche Multicritère Page 21 of 24

▶ Nous allons maintenant utiliser la valeur sélectionnée dans le champ Combo en paramètre à la requête :
1. Affichez les événements associés au champ Table : sélectionnez le champ Table et utilisez la touche F2.
2. Dans l'événement "Initialisation" du champ Table, remplacez la ligne :

//MaSource.ParamIDModeRèglement = 1

par :

MaSource.ParamIDModeRèglement = COMBO_ModeRèglement

Dans ce code, COMBO_ModeRèglement est le nom du champ Combo que nous venons de créer. La valeur de retour
de ce champ est associée au paramètre ParamIDModeRèglement attendu par la requête.
3. Fermez l'éditeur de code.

4. Enregistrez la page ( ou Ctrl + S).

▶ Nous allons à nouveau tester le passage des paramètres :

1. Cliquez sur parmi les boutons d'accès rapide.

2. Saisissez le nom "GUENOT".

3. Changez l'état des commandes grâce au sélecteur et modifiez le mode de règlement grâce au champ Combo, puis
cliquez sur le bouton "Rechercher". Le contenu du champ Table est modifié.

4. Fermez le navigateur.

Dernier paramètre : Montant de la commande

Le dernier paramètre de la requête correspond au montant de la commande pris en compte. Nous avons un paramètre qui
correspond au montant minimum et un paramètre qui correspond au montant maximum. Au niveau de l'interface,
l'utilisateur doit pouvoir saisir un intervalle de prix. Nous allons utiliser pour cela un champ Potentiomètre d'intervalle.
Note

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 5.1. Recherche Multicritère Page 22 of 24

Un champ Potentiomètre d'intervalle est un champ graphique, facilement intégrable dans un site
WEBDEV qui permet de sélectionner de manière simple les bornes d'un intervalle (valeur de début
et valeur de fin).

▶ Pour gérer le prix du produit :

1. Sous le volet "Création", dans le groupe "Champs graphiques", déroulez "Potentiomètre" et sélectionnez le
potentiomètre d'intervalle avec les prix.

2. Cliquez dans la page, entre le champ "Mode de règlement" et le bouton "Rechercher". Le potentiomètre d'intervalle
est automatiquement créé.

▶ Le champ que nous venons de créer est un champ avancé, constitué du potentiomètre et de deux champs affichant les
bornes. Toute la programmation pour afficher les bornes est déjà réalisée dans le champ. Nous allons juste initialiser le
champ Potentiomètre pour qu'il propose les bornes correspondant aux données présentes dans le fichier de données
Commande.
1. Sélectionnez le champ Potentiomètre et affichez ses événements (touche F2).
2. Dans l'événement "Initialisation" du champ, insérez le code suivant (avant les lignes de code existantes) :

// La valeur inférieure est le montant le moins cher

HLitPremier(Commande,TotalTTC)
MoiMême..BorneMin = Commande.TotalTTC
MoiMême..ValeurInférieure = MoiMême..BorneMin

// La valeur supérieure est le montant le plus cher

HLitDernier(Commande, TotalTTC)
MoiMême..BorneMax = Commande.TotalTTC
MoiMême..ValeurSupérieure = MoiMême..BorneMax

Examinons ce code :

• La fonction HLitPremier permet de lire le premier enregistrement du fichier de données "Commande" selon la
clé de parcours définie, ici TotalTTC. Cette fonction va donc permettre de lire l'enregistrement correspondant au
montant le plus bas.

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 5.1. Recherche Multicritère Page 23 of 24

• Le montant lu dans l'enregistrement est ensuite associé à la borne minimale du champ Potentiomètre ainsi qu'à
sa valeur inférieure.

• La borne minimale permet d'indiquer la valeur minimum que l'utilisateur pourra sélectionner.
• La valeur inférieure permet d'indiquer la valeur minimum actuellement sélectionnée.

• Pour trouver le montant le plus élevé, le principe est le même. La seule différence est le nom de la fonction
utilisée : HLitDernier. Cette fonction va permettre de lire le dernier enregistrement du fichier de données
Commande selon le montant, c'est-à-dire l'enregistrement correspondant au montant le plus élevé.

3. Fermez la fenêtre de code.

▶ Nous allons maintenant passer les montants sélectionnés en paramètre à la requête :

1. Affichez les événements associés au champ Table : sélectionnez le champ Table et appuyez sur la touche F2.
2. Dans l'événement "Initialisation" du champ Table, remplacez les lignes :

//MaSource.ParamPrixMin = "1500"
//MaSource.ParamPrixMax = "3000"

par :

MaSource.ParamPrixMin = POTI_SansNom2..ValeurInférieure
MaSource.ParamPrixMax = POTI_SansNom2..ValeurSupérieure

Dans ce code, les paramètres correspondant aux prix sont égaux à la valeur inférieure et supérieure du
potentiomètre.
3. Fermez l'éditeur de code.

4. Enregistrez la page ( ou Ctrl + S).

▶ Nous allons tester le passage des paramètres :

1. Cliquez sur parmi les boutons d'accès rapide.

2. Définissez les différents paramètres de la recherche :

• Nom du client,
• Etat,
• Mode de règlement,
• Montant.

3. Cliquez sur le bouton "Rechercher". Le contenu du champ Table est modifié.

4. Fermez le navigateur.

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024
Leçon 5.1. Recherche Multicritère Page 24 of 24

Optimisation de l'affichage de la page

Par défaut, lors du clic sur le bouton "Rechercher", tout le contenu de la page est renvoyé par le serveur.

Pour optimiser l'affichage de la page, il est possible d'activer le mode Ajax sur ce bouton. Dans notre exemple, seul le
contenu du champ Table sera renvoyé par le serveur.

Pour utiliser la technologie Ajax dans un site, WEBDEV offre plusieurs possibilités :
• Ajax en un clic : il suffit de cliquer dans l'éditeur de code pour transformer un événement en
événement Ajax.
• Champs Ajax (champ Table, champ Zone répétée). Les champs Ajax permettent d'afficher des
Note

données chargées dynamiquement depuis le serveur. Plus besoin de tout télécharger d'un
coup !
• Ajax par programmation à l'aide de fonctions WLangage spécifiques : AjaxExécute et
AjaxExécuteAsynchrone.

▶ Pour mettre en place le mode Ajax sur le bouton "Rechercher" :

1. Sélectionnez le bouton "Rechercher" et affichez ses événements (touche F2).
2. Dans l'événement "Clic (serveur)" du bouton, le lien AJAX apparaît barré dans le bandeau du code.

3. Cliquez sur le lien AJAX : le lien "AJAX activé" apparaît, indiquant que l'événement est automatiquement transformé
en un événement Ajax.

4. Fermez l'éditeur de code.

▶ Testez la page :
1. Cliquez sur parmi les boutons d'accès rapide.

2. Définissez les différents paramètres de la recherche :

• Nom du client,
• Etat,
• Mode de règlement,
• Montant.

3. Cliquez sur le bouton "Rechercher". Seul le contenu du champ Table est ré-affiché.

Leçon précédente Sommaire Leçon suivante

mk:@MSITStore:D:\Programmes%20installés\WINDEV25\Aide\Browser\GAFWB.c... 23/08/2024