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 :
- Créez un champ Table : sous le volet "Création", dans le groupe "Données", déroulez "Table" et sélectionnez "Table simple".
- Cliquez dans la page "PAGE_Recherche_multicritere" : l'assistant de création du champ Table se lance.
- 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.
- 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.
Passez à l'étape suivante de l'assistant.
- Conservez les options par défaut dans les différents écrans de l'assistant et validez la création du champ Table.
- Le champ Table est automatiquement créé dans la page.
- 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.
- 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.
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.
- 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".
- 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".
- Cliquez sur la colonne "COL_NomComplet". Remplacez le libellé "Nom" par "Client".
- Cliquez sur la colonne "COL_Libellé". Remplacez le libellé "Libellé" par "Mode de règlement".
- Validez la fenêtre de description du champ Table. Le champ est automatiquement mis à jour avec les changements effectués.
- Diminuez la taille de la colonne "ID" afin que toutes les colonnes apparaissent dans le champ Table.
- Agrandissez la taille des colonnes Client et Mode de règlement du champ Table.
- 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.
Live Data et champs basés sur des requêtesLe 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 :
- Cliquez sur parmi les boutons d'accès rapide.
- Seules les commandes réglées en espèces et dont le prix est compris entre 150 et 300 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.
- Fermez le navigateur pour revenir sous l'éditeur.
Regardons les événements associés au champ Table :
- Sélectionnez le champ Table et utilisez la touche F2.
- L'événement "Initialisation de TABLE_REQ_RechercheCommandes" contient le code suivant :
Initialisation de TABLE_REQ_RechercheCommandes (serveur)
MaSource.ParamIDModeRèglement = "1"
MaSource.ParamPrixMin = "150"
MaSource.ParamPrixMax = "300"
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. - Pour construire notre page, nous allons passer toutes les lignes de code correspondant aux paramètres en commentaire :
- Sélectionnez les 3 lignes de code "MaSource ...".
- Utilisez la combinaison de touches Ctrl + / du pavé numérique.
- Les lignes de code passent en commentaires.
- 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 :
- Affichez si nécessaire le volet "Analyse" : sous le volet "Accueil", dans le groupe "Environnement", déroulez "Volets" et sélectionnez "Volets" puis "Analyse". Les différents fichiers de données décrits dans l'analyse "Site_WEBDEV_Complet" apparaissent dans le volet.
- Cliquez sur l'icône à gauche du fichier de données "Client" : les rubriques du fichier de données sont listées.
- 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".
- 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 :
- Sélectionnez le champ Table et utilisez la touche F2.
- Dans l'événement "Initialisation" du champ Table, remplacez la ligne :
Initialisation de TABLE_REQ_RechercheCommandes (serveur)
par :
Initialisation de TABLE_REQ_RechercheCommandes (serveur)
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. - 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 :
- 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.
- Modifiez le libellé du champ (utilisez la touche Entrée du clavier). Le nouveau libellé est "Rechercher".
- Modifiez le style du champ :
- 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").
- Redimensionnez le champ si nécessaire :
- sélectionnez le champ.
- dans le menu contextuel, sélectionnez l'option "Adapter la taille".
- Affichez le code associé à ce champ : appuyez sur la touche F2.
- Dans l'événement "Clic xxx (serveur)", saisissez le code suivant :
TABLE_REQ_RechercheCommandes.Affiche(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). - Fermez l'éditeur de code.
Nous allons tester le passage du premier paramètre :
- Enregistrez la page en cliquant sur parmi les boutons d'accès rapide.
- Cliquez sur parmi les boutons d'accès rapide.
- 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.
- Fermez la page de test.
Second paramètre : Etat de la commande
Une commande peut avoir 3 états :
- en attente,
- validé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 ?
- 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 :
- 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.
- 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".
- 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 :
- Affichez les événements associés au champ Table :
- Sélectionnez le champ Table.
- Affichez le menu contextuel (clic droit) et sélectionnez l'option "Code".
- Dans l'événement "Initialisation" du champ Table, remplacez la ligne :
Initialisation de TABLE_REQ_RechercheCommandes (serveur)
par :
Initialisation de TABLE_REQ_RechercheCommandes (serveur)
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. - Fermez l'éditeur de code.
Nous allons tester le passage des deux premiers paramètres :
- Cliquez sur parmi les boutons d'accès rapide.
- Saisissez le nom "GUENOT" et sélectionnez "En attente".
- 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 :
- Sélectionnez le champ Sélecteur précédemment créé.
- Affichez la fenêtre de description du champ (double-cliquez sur le champ par exemple).
- 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.
- Validez la fenêtre de description du champ.
- 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.
- Sélectionnez le champ Table sous l'éditeur et affichez ses événements (touche F2 ou option "Code" du menu contextuel du champ).
- Dans l'événement "Initialisation" du champ Table, remplacez la ligne :
Initialisation de TABLE_REQ_RechercheCommandes (serveur)
MaSource.ParamEtat = SEL_Etat
par :
Initialisation de TABLE_REQ_RechercheCommandes (serveur)
SELON SEL_Etat
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). - Fermez l'éditeur de code.
Nous allons tester immédiatement notre page.
- Enregistrez la page en cliquant sur parmi les boutons d'accès rapide.
- Cliquez sur parmi les boutons d'accès rapide.
- Saisissez le nom "GUENOT" et sélectionnez "Toutes les commandes".
- Cliquez sur le bouton "RECHERCHER" : toutes les commandes de GUENOT quel que soit leur état sont listées.
- Fermez le navigateur.
Troisième paramètre : Mode de règlement
Une commande peut avoir plusieurs modes de règlement : espèces, chèques, etc. 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é.
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 :
- Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur "Combo".
- Cliquez dans la fenêtre à l'emplacement où le champ doit être créé (par exemple à côté du sélecteur précédemment créé).
- L'assistant de création du champ Combo se lance.
- Sélectionnez l'option "Afficher des données d'un fichier ou d'une requête existante" et passez à l'étape suivante.
- Sélectionnez le fichier de données "ModeRèglement" et passez à l'étape suivante.
- La rubrique à afficher dans le champ Combo est "Libellé". Sélectionnez "Libellé".
Passez à l'étape suivante.
- Sélectionnez la clé de parcours : "Libellé".
Passez à l'étape suivante.
- 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.
- Conservez les options par défaut dans les différentes étapes de l'assistant et validez la création du champ Combo.
- 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".
Nous allons maintenant utiliser la valeur sélectionnée dans le champ Combo en paramètre à la requête :
- Affichez les événements associés au champ Table : sélectionnez le champ Table et utilisez la touche F2.
- Dans l'événement "Initialisation" du champ Table, remplacez la ligne :
Initialisation de TABLE_REQ_RechercheCommandes (serveur)
par :
Initialisation de TABLE_REQ_RechercheCommandes (serveur)
MaSource.ParamIDModeRèglement = COMBO_Mode_de_Règlement
Dans ce code, COMBO_Mode_de_Rè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. - Fermez l'éditeur de code.
- Enregistrez la page ( ou Ctrl + S).
Nous allons à nouveau tester le passage des paramètres :
- Cliquez sur parmi les boutons d'accès rapide.
- Saisissez le nom "GUENOT".
- 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é.
- 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.
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 :
- Sous le volet "Création", dans le groupe "Champs graphiques", déroulez "Potentiomètre" et sélectionnez le potentiomètre "Fourchette de prix".
- 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.
- Sélectionnez le champ Potentiomètre et affichez ses événements (touche F2).
- Dans l'événement "Initialisation" du champ, insérez le code suivant (avant les lignes de code existantes) :
Initialisation de TABLE_REQ_RechercheCommandes (serveur)
Commande.LitPremier(TotalTTC)
MoiMême.BorneMin = Commande.TotalTTC
MoiMême.ValeurInférieure = MoiMême.BorneMin
Commande.LitDernier(TotalTTC)
MoiMême.BorneMax = Commande.TotalTTC
MoiMême.ValeurSupérieure = MoiMême.BorneMax
Examinons ce code :- La fonction <Fichier de données>.LitPremier 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.
- 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 : <Fichier de données>.LitDernier. 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é.
- Fermez la fenêtre de code.
Nous allons maintenant passer les montants sélectionnés en paramètre à la requête :
- Affichez les événements associés au champ Table : sélectionnez le champ Table et appuyez sur la touche F2.
- Dans l'événement "Initialisation" du champ Table, remplacez les lignes :
Initialisation de TABLE_REQ_RechercheCommandes (serveur)
//MaSource.ParamPrixMin = "1500"
//MaSource.ParamPrixMax = "3000"
par :
Initialisation de TABLE_REQ_RechercheCommandes (serveur)
MaSource.ParamPrixMin = POTI_Budget.ValeurInférieure
MaSource.ParamPrixMax = POTI_Budget.ValeurSupérieure
Dans ce code, les paramètres correspondant aux prix sont égaux à la valeur inférieure et supérieure du potentiomètre. - Fermez l'éditeur de code.
- Enregistrez la page ( ou Ctrl + S).
Nous allons tester le passage des paramètres :
- Cliquez sur parmi les boutons d'accès rapide.
- Définissez les différents paramètres de la recherche :
- Nom du client,
- Etat,
- Mode de règlement,
- Montant.
- Cliquez sur le bouton "RECHERCHER". Le contenu du champ Table est modifié.
- Fermez le navigateur.