Click&DECiDE Business Application Intelligence … · Business Application Intelligence | Manuel Page 2 Contactez-nous: E-mail: [email protected] Tel: +33 (0)4 67 84 48 00

Business Application Intelligence | Manuel

www.clickndecide.com Page 1

Contactez-nous: E-mail: [email protected] Tel: +33 (0)4 67 84 48 00 Siège: Click&DECiDE 130, rue du Baptistou - 34980 St Gély du Fesc, France.

Pour contacter votre fournisseur Click&DECiDE le plus proche, cliquer ici.

scro

Click&DECiDE Business Application Intelligence

Dashboard

(Tableau de bord)

Click&DECiDE Version 64-bit V15.2.1, V16 ou supérieure

Dernière édition 30 Novembre 2016

Th e Ve rsa t i l e B I So lu t i on !

http://www.clickndecide.com/

mailto:[email protected]






Table des matières

1. Prérequis pour les Dashboards Click&DECiDE ................................................................................................. 7

1.1. Un accès à Internet ..................................................................................................................................... 7

1.2. Un navigateur ou équipement parmi cette liste : .......................................................................................... 7

2. Démarrer avec les Dashboards de Click and DECiDE ....................................................................................... 7

2.1. Introduction au concept des Dashboards ..................................................................................................... 7

2.1.1. Utiliser une requête en temps réel sur votre base de données ............................................................... 7

2.1.2. Utiliser un fichier planifié “Google Data Table” sur votre Serveur ........................................................... 7

2.1.3. Utiliser des données stockées dans un Drive Google ............................................................................ 7

2.2. Créer votre premier Dashboard ................................................................................................................... 8

2.2.1. Editer les Propriétés de la page ............................................................................................................. 8

2.2.2. Insérer un objet Graphique Google...................................................................................................... 11

3. Méthode en temps réel ................................................................................................................................... 13

3.1. Créer une requête et copier son lien.......................................................................................................... 13

3.2. Coller le lien dans un objet Graphique Google : ......................................................................................... 13

4. Méthode via un fichier Google Data Table ....................................................................................................... 15

4.1. Exporter la requête vers un format Google Data Table .............................................................................. 15

4.2. Copier le lien vers le fichier Google Data Table ......................................................................................... 17

4.3. Coller le lien requis dans le Dashboard: .................................................................................................... 18

5. Méthode via un Google Drive .......................................................................................................................... 18

5.1. Exporter la requête vers un Google Drive .................................................................................................. 19

5.2. Copier le lien vers le document Google Drive ............................................................................................ 22

5.3. Coller le lien dans l’objet Graphique Google .............................................................................................. 23

5.4. Imprimer un Dashboard ............................................................................................................................ 24

6. Améliorer un Dashboard ................................................................................................................................. 25

6.1. Personnaliser la présentation d’une Table ................................................................................................. 25

6.1.1. Nombre de lignes par page ................................................................................................................. 25

6.1.2. Afficher votre Dashboard en plein écran .............................................................................................. 26

6.1.3. Afficher ou masquer l’icône Plein écran ............................................................................................... 26

6.2. Insérer un Graphique Google .................................................................................................................... 26

6.2.1. Définir la source de données pour le graphe ....................................................................................... 27

6.2.1.1. Pour la méthode Temps réel :.........................................................................................27

6.2.1.2. ¨Pour la méthode avec fichier Google Data Table : .........................................................27

6.2.1.3. Pour la méthode avec Google Drive : .............................................................................27

6.2.2. Mettre à jour un paramètre .................................................................................................................. 29

6.2.3. Mettre à jour un autre objet ................................................................................................................. 30

6.2.3.1. Méthode Temps réel: .....................................................................................................31

6.2.3.2. Méthode avec fichier Google Data Table: .......................................................................31








6.2.3.3. Méthode avec Google Drive: ..........................................................................................32

6.2.4. Définir un lien (URL) à exécuter .......................................................................................................... 32

6.2.4.1. Sélectionner un état et copier son URL ...........................................................................33

6.2.4.2. Coller l’URL et définir les paramètres..............................................................................33

7. Commandes du Menu Principal ...................................................................................................................... 35

7.1. Commande Fichier .................................................................................................................................... 35

7.1.1. Fichier >Nouveau ................................................................................................................................ 35

7.1.2. Fichier > Ouvrir ................................................................................................................................... 35

7.1.3. Fichier > Enregistrer ............................................................................................................................ 35

7.1.4. Fichier > Enregistrer sous ................................................................................................................... 35

7.1.5. Fichier > Supprimer ............................................................................................................................. 35

7.1.6. Fichier > Exécuter ............................................................................................................................... 35

7.1.7. Fichier > Convertir xgc V12 ................................................................................................................. 35

7.2. Commande Editer ..................................................................................................................................... 35

7.2.1. Editer > Couper ................................................................................................................................... 35

7.2.2. Editer > Copier .................................................................................................................................... 35

7.2.3. Editer > Coller ..................................................................................................................................... 36

7.2.4. Editer > Supprimer .............................................................................................................................. 36

7.2.5. Editer > Copier le style ........................................................................................................................ 36

7.2.6. Editer > Coller le style ......................................................................................................................... 36

7.2.7. Editer > Sélectionner tout .................................................................................................................... 36

7.2.8. Editer > URLs… .................................................................................................................................. 36

7.2.9. Editer > Paramètres ............................................................................................................................ 36

7.2.10. Editer > Minuteur .......................................................................................................................... 37

7.2.11. Editer > Trier ................................................................................................................................ 38

7.2.12. Editer > Page Propriétés de la page.............................................................................................. 38

7.3. Commande Format ................................................................................................................................... 39

7.3.1. Format > Alignement ........................................................................................................................... 39

7.3.2. Format > Taille .................................................................................................................................... 39

7.3.3. Format > Centrage .............................................................................................................................. 39

7.4. Commande Insérer ................................................................................................................................... 39

7.4.1. Insérer > Graphique Google ................................................................................................................ 39

7.4.1.1. Insérer > Graphique Google > Frise chronologique .........................................................39

7.4.1.2. Insérer > Graphique Google > Aires ...............................................................................40

7.4.1.3. Insérer > Graphique Google > Barres .............................................................................40

7.4.1.4. Insérer > Graphique Google > Bulles ..............................................................................40

7.4.1.5. Insérer > Graphique Google > Calendrier .......................................................................41

7.4.1.6. Insérer > Goolge Chart > Chandelier japonais ................................................................41

7.4.1.7. Insérer > Graphique Google > Colonnes.........................................................................41

7.4.1.8. Insérer > Graphique Google > Combiné .........................................................................41








7.4.1.9. Insérer > Graphique Google > Anneaux .........................................................................42

7.4.1.10. Insérer > Graphique Google > Jauge ..............................................................................42

7.4.1.11. Insérer > Graphique Google > Géographique-marqueurs ...............................................42

7.4.1.12. Insérer > Graphique Google > Histogramme...................................................................43

7.4.1.13. Insérer > Graphique Google > Courbe ............................................................................43

7.4.1.14. Insérer > Graphique Google > Géographique-régions .....................................................43

7.4.1.15. Insérer > Graphique Google > Diagramme animé ...........................................................43

7.4.1.16. Insérer > Graphique Google > Secteur ...........................................................................44

7.4.1.17. Insérer > Graphique Google > Diagramme de flux ..........................................................44

7.4.1.18. Insérer > Graphique Google > Nuage de points ..............................................................44

7.4.1.19. Insérer > Graphique Google > Courbe en escalier ..........................................................45

7.4.1.20. Insérer > Graphique Google > Table...............................................................................45

7.4.1.21. Insérer > Graphique Google > Ligne de temps ...............................................................46

7.4.1.22. Insérer > Graphique Google > Arbre ...............................................................................46

7.4.2. Insérer un Panneau avec filtre ............................................................................................................. 47

7.4.2.1. Insérer un panneau avec filtre Catégorie ........................................................................47

7.4.2.2. Insérer un panneau avec plusieurs filtres Catégories ......................................................50

7.4.2.3. Insérer un panneau avec filtre par intervalle graphique ...................................................52

7.4.2.4. Insérer a Dashboard with Number Range Filter ..............................................................54

7.4.2.5. Insérer un Panneau avec filtre par chaîne de caractères .................................................55

7.4.3. Insérer un Filtre sur Graphique Google ................................................................................................ 59

7.4.3.1. Insérer un filtre Catégorie ...............................................................................................59

7.4.3.2. Insérer un filtre sur intervalle graphique ..........................................................................63

7.4.3.3. Insérer un filtre sur intervalle numérique .........................................................................64

7.4.3.4. Insérer un filtre sur chaîne de caractères ........................................................................66

7.4.3.5. Propriétés avancées des filtres .......................................................................................69

7.4.4. Insérer >Autres objets ......................................................................................................................... 70

7.4.4.1. Insérer >Autres objets > Etiquette...................................................................................70

7.4.4.2. Insérer >Autres objets > Champ de saisie ......................................................................71

7.4.4.3. Insérer >Autres objets > Bouton .....................................................................................72

7.4.4.4. Insérer >Autres objets > Liste .........................................................................................73

7.4.4.5. Insérer >Autres objets > Document ................................................................................74

7.4.4.6. Insérer >Autres objets > Image .......................................................................................75

7.4.4.7. Insérer >Autres objets > Sélection sur liste triée .............................................................75

7.4.5. Insérer >Autres objets > Tableau-croisé .............................................................................................. 78

7.4.5.1. Ajouter un objet Tableau-croisé ......................................................................................79

7.4.5.2. Exécuter un Tableau-croisé ............................................................................................81








7.4.5.3. Modifier les dimensions et mesures d’un tableau-croisé..................................................82

7.4.5.4. Modifier la présentation du tableau-croisé .......................................................................82

7.4.5.5. Modifier la présentation d’un tableau-croisé ....................................................................85

7.4.5.6. Gérer des paramètres dans un tableau-croisé ................................................................90

7.4.5.7. Filtrer les données dans un Tableau-croisé ....................................................................99

7.5. La commande Aide ................................................................................................................................. 100

8. Propriétés avancées ..................................................................................................................................... 101

8.1. Propriétés avancées de base et communes ............................................................................................ 101

8.1.1. Titre .................................................................................................................................................. 101

8.1.2. Hauteur (Height) ............................................................................................................................... 101

8.1.3. Largeur (Width) ................................................................................................................................. 102

8.1.4. Couleur du texte................................................................................................................................ 102

8.1.5. Couleur de fond ................................................................................................................................ 102

8.1.6. Editeur de couleur ............................................................................................................................. 102

8.1.7. Police ................................................................................................................................................ 102

8.1.7.1. Famille .........................................................................................................................103

8.1.7.2. Taille ............................................................................................................................103

8.1.7.3. Style.............................................................................................................................103

8.1.7.4. Epaisseur .....................................................................................................................103

8.1.8. Bordure ............................................................................................................................................. 104

8.1.8.1. Style.............................................................................................................................104

8.1.8.2. Largeur ........................................................................................................................104

8.1.8.3. Couleur ........................................................................................................................104

8.1.8.4. Arrondi .........................................................................................................................105

8.1.9. Ombre .............................................................................................................................................. 105

8.1.9.1. Horizontale ...................................................................................................................105

8.1.9.2. Verticale .......................................................................................................................106

8.1.9.3. Flou..............................................................................................................................106

8.1.9.4. Taille ............................................................................................................................106

8.1.9.5. Couleur ........................................................................................................................106

8.1.10. Visible ........................................................................................................................................ 107

8.2. Objet ayant des options avancées sur les données ................................................................................. 108

8.2.1. Barre d’outils ..................................................................................................................................... 108

8.2.2. Cache Client ..................................................................................................................................... 108

8.2.3. Script ................................................................................................................................................ 108

8.2.4. Nouveau ........................................................................................................................................... 110

8.2.4.1. Ajouter automatiquement une nouvelle fonction avancée ..............................................111

8.2.4.2. Ajouter manuellement une nouvelle fonction avancée ...................................................112

8.2.5. Aide .................................................................................................................................................. 113








9. Appel d’un Dashboard depuis un autre Dashboard ........................................................................................ 113

10.Retour au Dashboard principal .................................................................................................................... 115

10.1.Retour automatique............................................................................................................................... 115

10.2.Retour manuel ...................................................................................................................................... 116

11.Annexe Technique ...................................................................................................................................... 117

11.1.Raccourcis vers des pages ................................................................................................................... 117

11.2.Paramètres communs ........................................................................................................................... 117

11.3.ShowParameters (Afficher les paramètres) ........................................................................................... 118

11.4.Display (Afficher) ................................................................................................................................... 118

11.5.Download (Télécharger) ........................................................................................................................ 119

11.6.Query/WebQuery (Requête/Requête depuis le Web pour Excel) ........................................................... 119

11.7.Raccourcis du bouton Partager ............................................................................................................. 120








1. Prérequis pour les Dashboards Click&DECiDE

L’utilisation des “Google Charts” dans les Dashboards avec Click&DECiDE nécessite :

1.1. Un accès à Internet

L’accès à Internet est obligatoire parce que les modèles de tous les Graphiques Google sont téléchargés depuis le site web de Google. Le bénéfice est que toute nouvelle version ou nouvel objet est automatiquement disponible. Noter toutefois que vos données ne sont jamais envoyées au site web de Google.

1.2. Un navigateur ou équipement parmi cette liste :

Microsoft Internet Explorer 9.0 ou supérieur, Edge.

Google Chrome (dernière version recommandée).

Mozilla Firefox (dernière version recommandée).

iPad ou iPhone.

Tablette Android ou Smartphone.

2. Démarrer avec les Dashboards de Click and DECiDE

2.1. Introduction au concept des Dashboards

Les Dashboards (Tableaux de bords) peuvent être utilisés selon 3 différentes méthodes:

2.1.1. Utiliser une requête en temps réel sur votre base de données

Cette méthode est la seule en temps réel pour alimenter votre Application Dashboard en utilisant des requêtes de Click&DECiDE Builder directement sur vos bases de données. Cette méthode évite de planifier l’extraction de données périodiquement, et évite d’utiliser des données d’un Drive Google.

2.1.2. Utiliser un fichier planifié “Google Data Table” sur votre Serveur

Cette méthode est plus rapide que la méthode en temps réel parce qu’elle utilise des données déjà préparée et stockées localement sur le disque de votre serveur. Ces fichiers ont comme extension “.gcd” et contiennent vos données, extraites périodiquement de vos bases de données par des tâches planifiées. Cette méthode évite aussi évite d’utiliser des données d’un Drive Google.

2.1.3. Utiliser des données stockées dans un Drive Google

Cette méthode est plus rapide que la méthode en temps réel parce qu’elle utilise des données déjà préparée et stockées dans un Drive Google. Ce Drive Google peut être mis à jour depuis vos bases de données par des tâches planifiées.

Ainsi, selon les règles de votre Société, ou pour des raisons techniques, ou parce que vous avez vraiment besoin d’une réponse en temps réel, vous pouvez choisir la meilleure méthode d’accès pour développer vos applications Dashboard.

Si vous souhaitez comparer le même exemple de Dashboard, utilisant ces 3 méthodes, vous pouvez démarrer le Portail Web une fois que vous avez installé Click&DECiDE et ses exemples et consulter les exemples dans la branche Dashboards du menu BAI Demonstration :








2.2. Créer votre premier Dashboard

Ouvrir le Portail Web Click&DECiDE (http://servername/dvweb/default.htm en V15 et Sup. ou http://servername/dvweb/home.htm pour obtenir seulement la partie droite du cadre en V13)

Cliquer sur le bouton “Créer” pour accéder aux Tableaux de bord Google ou aux Tableaux-croisés :

Cliquer sur la branche “Tableau de bord Google” pour accéder à l’éditeur des menus Dashboard Menu :

Vous obtenez par défaut un nouveau Tableau de bord vierge, dont la taille est par défaut celle définie dans la commande Editer > Propriétés de la page : 675 x 1010 est aussi la taille par défaut pour un iPad ou une tablette Android. Si vous êtes en train d’éditer un Dashboard existant, cliquer sur Fichier > Nouveau pour obtenir de nouveau un Dashboard vierge.

2.2.1. Editer les Propriétés de la page

Cliquer Editer > Propriétés de la page pour définir les attributs suivants :




http://servername/dvweb/default.htm%20en%20V15

http://servername/dvweb/home.htm





Couleur: Permets de définir une couleur de fond.

Image:

Méthode 1: vous pouvez utiliser une URL pour spécifier le fichier image, ou par exemple dans le thème du Portail Web courant, sans parcourir le chemin, mais juste en modifiant le nom de fichier dans cette URL fixe :

/dvweb/ActiveTheme.ashx?p=Images/background.png

cette image est parfois en mode transparent selon the Thème choisi)

Ou

/dvweb/ActiveTheme.ashx?p=Images/add.png

Si vous allez dans le répertoire C:\Program Files\Click and DECiDE\dvweb\App_Themes, vous

verrez tous les thèmes disponibles qui peuvent être utilisés dans le Portail Web. Chaque thème contient un répertoire “Image” :

C:\Program Files\Click and DECiDE\dvweb\App_Themes\Blue\Images

C:\Program Files\Click and DECiDE\dvweb\App_Themes\Click and DECiDE\Images

Etc.

Vous pouvez utiliser n’importe quelle image de ces répertoires, telle que background.png par exemple. Si

vous changez de thème plus tard, la même image existe dans tous les répertoires images de tous les thèmes et sera utilisée à la place de l’actuelle image. Vous pouvez voir quelle image est utilisée dans le chemin de l’image, comme dans l’exemple ci-dessous qui indique que l’image s’appelle « add.png » :

Méthode 2: vous pouvez cliquer sur le bouton « parcourir » pour rechercher un fichier image, par exemple dans le thème actuel du Portail Web ou tout autre endroit, puis sélectionnez l’image :

C:\Program Files\Click and DECiDE\dvweb\App_Themes\Metro\Images\GDataTable.gif

Ou C:\Users\Public\Documents\Pictures\MyLogo.jpg

et validez: dans ce cas l’image sera incluse dans le Dashboard. Vous ne voyez que l’image et le type d’image sur cet écran. L’image ne changera pas si vous changez de thème.








Répéter : si l’image est une petite barre vertical ou horizontale telle que le fichier “blue.jpg” localisé dans le répertoire :

C:\Program Files\Click and DECiDE\dvweb\Scripts\cnd.ebis\img

L’option Répéter affichera cette image selon les différentes options proposes: Répéter, Répéter horizontalement, Répéter verticalement ou Ne pas répéter. Le chemin peut être écrit ainsi :

/dvweb/Scripts/cnd.ebis/img/blue.jpg

Et ne dépendra pas du thème choisi. Exemple:

Position: Vous pouvez aussi décider de la position de l’image choisie, dépendant de sa taille.

Ajuster au contenu : cette option est définie à Non par défaut. Si vous l’activez (Oui), la taille du cadre de l‘application Dashboard changera automatiquement en déplaçant des objets ou en changeant la taille des

Type de fichier Bouton « Parcourir »

Aperçu image








objets dans le Dashboard actuel. La taille du Dashboard sera réduite ou augmentée pour contenir tous les objets existants. Les valeurs de la hauteur et de la largeur seront modifiées automatiquement.

Hauteur et Largeur : si l’option “Ajuster au contenu” est définie à Non, vous pouvez saisir une taille fixe pour le cadre du Dashboard et éviter des changements de taille automatiques, selon les besoins de votre Application.

2.2.2. Insérer un objet Graphique Google

Cliquer maintenant sur Insérer > Graphique Google > Table

et changer la position et la taille de cet objet selon vos préférences :








Maintenant vous devez éditer les Propriétés de cet objet pour renseigner la zone Source (et en option la zone Requête Source) selon la méthode d’accès que vous avez choisie. Pour cela, cliquer sur le second symbole décrit dans l’image ci-dessus pour ouvrir les Propriétés de l’objet :

Dans les Propriétés de l’objet vous pouvez :

- Changer le nom de l’objet (dans cet exemple Table1 a été obtenu comme nom par défaut)

- Définir le lien Source qui va alimenter cet objet selon la méthode choisie.

- Définir, si besoin, la Requête Source dans la zone qui accepte une commande SQL et des formats et étiquettes pour les colonnes.

- Définir, si besoin, les Colonnes à afficher en utilisant des nombres séparés par des virgules (0 = première colonne, 2=seconde colonne etc.). Cette option apparait seulement pour des Graphes inclus dans un objet « Sous-Dashboard », décrit plus loin dans ce Manuel.

- Définir, si besoin, le ou les Paramètre(s) à mettre à jour lors d’une action sur cet objet.

- Définir, si besoin, quels autres objets doivent être mis à jour lors d’une action sur cet objet.

- Définir, si besoin, quelle URL doit être exécutée lors d’une action sur cet objet, et si cette URL doit être lancée dans la même fenêtre ou une autre fenêtre. (Nouvelle, Parente ou Principale).

Cliquer ici pour supprimer cet objet

Cliquer ici pour éditer les propriétés de cet objet

Cliquer ici pour ouvrir l’éditeur de graphe

Utiliser ce coin pour modifier la taille de cet objet en largeur ou hauteur








- Définir, si besoin, d’autres Paramètres Avancés décrits plus loin dans ce Manuel.

Comme la zone Source est la seule qui ne peut pas rester vide, nous allons décrire dans le prochain chapitre comment alimenter cet objet en utilisant les 3 méthodes expliquées précédemment dans ce manuel.

3. Méthode en temps réel

Cette méthode utilise un lien vers une requête dynamique créée pour alimenter cet objet. Cette requête doit être créée et accessible via un menu du Portail Web, dans une branche ou dans un dossier partagé. Cela vous permet de connaitre le lien nécessaire à exécuter cette requête.

3.1. Créer une requête et copier son lien

La requête doit être créée préalablement et disponible dans un menu, dans une branche ou un dossier partagé. Comme exemple ouvrir le Portail Web et sélectionner dans le menu BAI Demonstration, la branche Dynamic Queries et choisir la requête nommée “Demo Multicriteria with parameters”:

Une fois que l’écran suivant est affiché, sélectionner le paramètre AREA et cliquer sur le bouton Partager pour voir les liens proposés selon les formats de sortie autorisés dans ce Menu pour cette requête. Sélectionner le lien de Table de données Google :

Maintenant, copier ce lien qui doit être similaire à celui-ci:

http://localhost/dvweb/Menus/Query.ashx?__ma=BAI+Demonstration&__mi=2274&AREA_PARAM=&__f=Google+Data+Table

La syntaxe AREA_PARAM= signifie que ce paramètre est ignoré par défaut mais qu’il peut être mis à jour plus tard par un autre objet dans une application Dashboard.

3.2. Coller le lien dans un objet Graphique Google :

Retourner dans l’éditeur des Graphique Google où vous avez inséré un objet Table et cliquer sur l’icône Propriétés puis coller le lien (supprimer le début de l’URL http://localhost ou http://servername):

Garder simplement ce lien :

/dvweb/Menus/Query.ashx?__ma=BAI+Demonstration&__mi=2274&AREA_PARAM=&__f=Google+Data+Table






http://localhost/

http://servername/






Cliquer sur OK – L’objet Table est exécuté pour afficher immédiatement le résultat en mode WYSIWYG(*)

de manière à ce que vous puissiez adapter la taille de l’objet selon le résultat.

(*) What You See Is What You Get (ce que vous voyez est ce que vous obtenez)

Enregistrer et exécuter l’application Dashboard Application avec la commande Fichier > Exécuter (Enregistrer sera proposé automatiquement si cela n’a pas été fait). Sélectionner une destination (Dossier partagé) et entrer un nom pour cette nouvelle application Dashboard :

Cliquer sur OK, l’extension “.xgc” sera rajoutée automatiquement si besoin, puis le Dashboard sera exécuté :








Vous pouvez maintenant modifier la taille, la position et d’autres paramètres tels que le nombre de lignes par page. Voir plus loin dans ce manuel.

4. Méthode via un fichier Google Data Table

Si vous n’avez pas besoin d’une réponse en temps réel pour exécuter un Dashboard, parce que vous analyser uniquement des données plus anciennes que la date du jour, une alternative est d’exporter ces données vers le format de sortie “Google Data Table” disponible depuis Click&DECiDE Builder. Vous obtiendrez un fichier dont l’extension sera “.gcd” qui peut être enregistré localement sur votre serveur, par exemple dans le répertoire suivant : C:\Users\Public\Documents\Click and DECiDE Samples\Web Portal\Dashboards\Datamart

comme pour les exemples installés avec Click&DECiDE. Noter que ces fichiers peuvent être mis à jour par des taches planifiées périodiquement pour obtenir les données à jour pour la période désirée. (Hier, Semaine dernière, Mois dernier etc. selon vos besoins).

Nous allons utiliser le même Dashboard précèdent, enregistré sous un autre nom et modifier le lien « Temps réel » par un lien vers un fichier Google Data Table, lisant un « fichier.gcd » enregistré sur le disque du serveur. Cette méthode est plus rapide que la méthode « Temps réel » et les données peuvent être des données déjà agrégées.

4.1. Exporter la requête vers un format Google Data Table

Démarrer Click&DECiDE Builder et ouvrir le projet “Click and Decide Web Demonstration.wfv” localisé par défaut dans le répertoire C:\Users\Public\Documents\Click and DECiDE Samples\Web Portal.

Ouvrir la même requête que celle utilisée pour la méthode “Temps réel”, soit la requête “Demo Multicriteria”.

Cliquer sur l’icône “Exporter les données” et sélectionner le format de sortie Google Data Table :








Cliquer sur OK et la liste des paramètres va s’afficher:

Ignorer tous les paramètres et cliquer sur OK. Puis spécifier le répertoire de destination, par exemple le dossier partagé “Other Dashboards Sample” et le répertoire :

C:\Users\Public\Documents\Click and DECiDE Samples\Web Portal\Dashboards\Datamart

puis donner un nom pour ce fichier (l’extension “.gcd” sera rajoutée automatiquement en cliquant sur Ouvrir):

Cliquer sur Ouvrir








Cliquer sur OK

Noter que la destination doit être un répertoire visible via le Portail Web, puisque l’on doit en copier le lien d’accès (URL).

4.2. Copier le lien vers le fichier Google Data Table

Dans le Menu « BAI Demonstration », aller dans la branche Dashboard>Other Dashboard Samples>Datamart :

Vous devriez voir tous les fichiers “Google Data Table” ayant l’extension ”.gcd” :

Sélectionner le fichier Demo_multi_criteria.gcd créé à l’instant. Les données qu’il contient vont apparaitre ainsi que le lien en bas pour y accéder :








Copier ce lien (Google Chart Data Source URL).

4.3. Coller le lien requis dans le Dashboard:

Retourner à l’éditeur du Dashboard, ouvrir l’exemple précèdent “Dashboard Temps Réel.xgc” (ou créer un nouveau Dashboard vide et y insérer un objet Table), et l’enregistrer sous un nouveau nom tel que “Dashbaord Google DataTable.xgc”.

Cliquer sur l’icône Propriétés de l’objet Table, puis coller le lien URL (Supprimer d’abord le lien précédent et supprimer le début du nouveau lien http://localhost ou http://servername):

Le lien doit être du style suivant :

/dvweb/menus/query.ashx?__ma=BAI+Demonstration&__mi=2558&__rp=Datamart%2fdemo_multi_criteria.gcd

Cliquer sur OK

Enregistrer et exécuter l’application Dashboard Application avec la commande Fichier > Exécuter (Enregistrer sera proposé automatiquement si cela n’a pas été fait).

Le temps de réponse est meilleur que celui d’un « Temps réel » mais cela peut aussi dépendre des performances de la base de données pour cette méthode « Temps réel ».

5. Méthode via un Google Drive

Si vous n’avez pas besoin d’une réponse en temps réel pour exécuter un Dashboard, parce que vous analyser uniquement des données plus anciennes que la date du jour, et si vous acceptez de stocker vos données dans un dossier Google Drive, cette alternative consiste à exporter le résultat de la requête dans un Google Drive. Vous avez besoin d’un compte “gmail” ou Google par lequel vous pouvez accéder à un « Drive » en utilisant un identifiant et mot de passe.




http://localhost/

http://servername/





Dans ce “Drive” vous pouvez créer un ou plusieurs Dossiers, par exemple :

Dans ce manuel le dossier utilisé sera par exemple le dossier “My CnD Data”. Le paragraphe suivant explique comment alimenter le dossier Google Doc avec les données dont vous avez besoin pour votre application Dashboard.

Noter que ces fichiers peuvent être mis à jour par des taches planifiées périodiquement pour obtenir les données à jour pour la période désirée. (Hier, Semaine dernière, Mois dernier etc. selon vos besoins).

Nous allons utiliser le même Dashboard précèdent, enregistré sous un autre nom et modifier le lien « Google Data Table » par un lien Google Drive, lisant le fichier localisé dans le dossier “My CnD Data” de ce « Drive ». Cette méthode est plus rapide que la méthode « Temps réel » et les données peuvent être des données déjà agrégées.

5.1. Exporter la requête vers un Google Drive

Démarrer Click&DECiDE Builder et ouvrir le projet “Click and Decide Web Demonstration.wfv” localisé par défaut dans le répertoire C:\Users\Public\Documents\Click and DECiDE Samples\Web Portal.

Ouvrir la même requête que celle utilisée pour la méthode “Temps réel” ou “Google Data Table”, soit la requête “Demo Multicriteria”.

Cliquer sur la commande Affichage > Alertes

Insérer un nouveau “Post Run Event“ dans cette requête. Cette action sera exécutée à chaque fois que cette requête sera exportée vers un format de sortie. (« Action à lancer après exécution de la requête »).

Définir cette action “Post Run Event” comme indiqué ci-dessous :








Si aucune condition n’est définie, cela signifie que la condition est toujours « Vraie ».

Type d’Alerte doit être “Export Google Doc”.

Description est facultative.

Utilisateur Google : entrer l’identifiant du compte Google.

Mot de passe Google entrer le mot de passe du compte Google.

Collection: entrer le nom du dossier et du fichier qui doit recevoir les données dans votre Google Drive. (la syntaxe est ='/Nom du dossier/Nom du fichier')

Enregistrer la requête et cliquer sur l’icône Exporter les données :

Sélectionner le format de sortie Excel XLSX :

Cliquer OK et la liste des paramètres va s’afficher:








Ignorer tous les paramètres et cliquer sur OK. Puis spécifier un répertoire de destination et un nom de fichier, par exemple DemoMulticriteria.xlsx :

Cliquer sur Open.

Cliquer sur OK.

Une fois que le fichier Excel a été créé, aller dans votre Google Drive et afficher le contenu du dossier “My CnD Data”: le document Google Doc “DemoMultiCriteria” doit apparaitre dans ce dossier avec sa dernière date de modification.








5.2. Copier le lien vers le document Google Drive

Dans votre drive, sélectionner le dossier requis “My CnD Data” et double-cliquer sur le document “DemoMultiCriteria.xlsx” et l’ouvrir:

Vous pouvez voir le contenu de la requête et qu’un bouton “Partager” (Share) apparait en haut à droite:

Cliquer sur ce bouton Partager:

Cliquer sur “Copier le lien” et modifier si besoin le type de partage et/ou les personnes ayant le droit de modifier ce document.








Cliquer sur Send (Envoyer), puis vérifier le contenu du lien copié qui doit être du style:

https://docs.google.com/spreadsheets/d/1-r_Nc5a3hLB3sXNmjkzDOs9hRAZ80UBjmWLylYovcIA/edit?usp=sharing

5.3. Coller le lien dans l’objet Graphique Google

Retourner à l’éditeur du Dashboard, ouvrir l’exemple précèdent “Dashboard Google Data Table.xgc” (ou créer un nouveau Dashboard vide et y insérer un objet Table), et l’enregistrer sous un nouveau nom tel que “Dashbaord Google Doc.xgc”.

Cliquer sur l’icône Propriétés de l’objet Table, puis coller le lien URL ci-dessus :


In the google URL "/edit?usp=sharing" must be changed to "/gviz/tq"

The final link to be copied in the Source box of the Table Properties should be:

https://docs.google.com/spreadsheets/d/1-r_Nc5a3hLB3sXNmjkzDOs9hRAZ80UBjmWLylYovcIA/gviz/tq

Cliquer sur OK






https://docs.google.com/spreadsheets/d/1-r_Nc5a3hLB3sXNmjkzDOs9hRAZ80UBjmWLylYovcIA/gviz/tq





Enregistrer et exécuter l’application Dashboard Application avec la commande Fichier > Exécuter (Enregistrer sera proposé automatiquement si cela n’a pas été fait).

Le temps de réponse est meilleur que celui d’un « Temps réel » mais cela peut aussi dépendre des performances de la base de données pour cette méthode « Temps réel ».

5.4. Imprimer un Dashboard

Lorsqu’on exécute un Dashboard depuis le Portail Web et non pas depuis l’éditeur de Dashboard, un bouton Imprimer apparait dans la barre de menu :

Imprimer

Ajouter aux favoris








6. Améliorer un Dashboard

6.1. Personnaliser la présentation d’une Table

6.1.1. Nombre de lignes par page

Ouvrir l’éditeur de Dashboard et cliquer sur l’icône du Chart Editor sur la gauche du nom de l’objet Table:

Dans l’écran ci-dessus, sélectionner l’onglet “Customize” (Personnaliser) et cliquer sur “Paging” (Pagination) puis sélectionner une valeur dans la liste proposée, 10 par exemple. (Noter que si vous souhaitez une valeur non proposée dans cette liste, vous pouvez en changer la valeur plus tard à travers le bouton Avancés… dans les Propriétés de l’objet en modifiant la zone pageSize (Taille de la page)).

Cliquer sur OK pour valider. Exécuter à nouveau le Dashboard. Maintenant le nombre maximum de lignes par page est de 10 enregistrements et plusieurs boutons permettent de naviguer dans ces blocs de 10 lignes:








6.1.2. Afficher votre Dashboard en plein écran

L’icône dans le coin supérieur gauche du résultat vous permet d’afficher n’importe quel objet Dashboard en mode plein écran.

Alors d’autres icônes sont proposés tels que :

La croix grise permet de quitter le mode plein écran

La loupe permet de visualiser les données renvoyées par l’URL qui alimente l’objet. Cette icône est uniquement visible en mode plein écran.

6.1.3. Afficher ou masquer l’icône Plein écran

Noter que l’icône en haut à gauche peut être masquée via le bouton Avancés… dans les Propriétés de l’objet. Cliquer sur l’icône puis sur Avancés… et modifier la zone Barre d’outils en choisissant Aucun au lieu de A gauche :

6.2. Insérer un Graphique Google

Ouvrir l’éditeur de Dashboard (Créer depuis le Portail Web puis Fichier -> Ouvrir). Ouvrir le Dashboard que vous avez créé pour la méthode « Temps réel » : le fichier “Dashboard Temps réel.xgc”. Déplacer la table vers la droite et cliquer sur Insérer > Graphique Google > Secteur puis placer cet objet près de l’objet Table et ajuster les tailles des objets en conséquence :

Mode Plein Ecran

Loupe pour afficher les données (utile lorsqu’il s’agit d’un graphe)

Fermer le mode Plein Ecran








6.2.1. Définir la source de données pour le graphe

6.2.1.1. Pour la méthode Temps réel :

Ce graphe de type Secteur (ou Camembert) doit être alimenté par une requête donnant seulement la somme du total pour chaque région (AREA). Il y a deux moyens pour faire cela :

1. Créer une nouvelle requête dans Builder qui renverra chaque région avec le SUM(TOTAL) et ajouter cette requête dans le menu, puis capturer la nouvelle URL correspondant à cette requête et la coller dans la zone Source du graphe.

2. Utiliser l’URL existante de la requête alimentant l’objet Table1dans la zone Source et ajouter dans la zone Requête Source une commande SQL simplifiée, basée sur les colonnes de cette première requête (Première colonne = A, seconde colonne = B, troisième colonne = C etc.) comme dans l’exemple suivant: select A, SUM(F) group by A En effet dans la table, la colonne A est la région et la colonne F est le Total.

6.2.1.2. ¨Pour la méthode avec fichier Google Data Table :

Ce graphe de type Secteur doit être alimenté par un lien correspondant à un fichier Google Data Table ayant comme extension « .gcd » et donnant seulement le SUM(TOTAL) pour chaque région (AREA). Il y a deux moyens pour faire cela :

1. Créer un nouveau fichier.gcd qui renverra chaque région avec le SUM(TOTAL) et ajouter ce fichier dans le répertoire Datamart dans le menu et capturer la nouvelle URL correspondant à ce fichier et la coller dans la zone Source du graphe.

2. Utiliser l’URL existante du fichier DemoMultiCriteria.gcd alimentant l’objet Table1 dans la zone Source du graphe et ajouter dans la zone Requête Source une commande SQL simplifiée, basée sur les colonnes du fichier.gcd (Première colonne = A, seconde colonne = B, troisième colonne = C etc.) comme dans l’exemple suivant: select A, SUM(F) group by A En effet dans la table, la colonne A est la région et la colonne F est le Total.

6.2.1.3. Pour la méthode avec Google Drive :

Ce graphe de type Secteur doit être alimenté par un lien correspondant à un Document Google seulement le SUM(TOTAL) pour chaque région (AREA). Il y a deux moyens pour faire cela :

1. Créer un nouveau Document Google qui renverra chaque région avec le SUM(TOTAL) et ajouter le lien vers ce document fichier dans la zone Source du graphe.

2. Utiliser l’URL existante du document Google Doc DemoMultiCriteria alimentant l’objet Table1 dans la zone Source du graphe et ajouter dans la zone Requête Source une commande SQL simplifiée, basée sur les colonnes du document Google (Première colonne = A, seconde colonne = B, troisième colonne = C etc.) comme dans l’exemple suivant: select A, SUM(F) group by A En effet dans la table, la colonne A est la région et la colonne F est le Total.

Si vous cliquez sur OK, et exécutez le Dashboard, le graphe apparaitra avec le total pour chaque région.








Maintenant, si vous cliquez sur un secteur du graphe, une info-bulle affichera le nom de la region et la valeur de la somme de la colonne Total.

Noter que le format peut être modifié dans la zone Requête Source SQL en rajoutant par exemple format SUM(F) '$ #,##0.00' après la commande SQL. Le SQL complet sera select A, SUM(F) group by A format SUM(F) '$ #,##0.00'

Noter que le format d’une colonne peut être celui de la même colonne dans la requête, dans le fichier.gcd ou dans le document Google si vous n’utilisez pas la zone Requête Source. Mais quand vous utilisez une commande SQL dans la zone Requête Source, le format ne peut plus être automatique et doit être spécifié si besoin.

Mais, jusqu’à présent, toute action sur un secteur du graphe n’a aucun effet dans ce Dashboard. Le paragraphe suivant explique comment mettre à jour un paramètre en cliquant sur un graphe ou sur un objet en général.








6.2.2. Mettre à jour un paramètre

Cette action est la même pour toutes les méthodes “Temps réel”, “Google Data Table” et “Google Drive”

Ouvrir de nouveau les propriétés de l’objet PieChart1 et cliquer sur l’icône à droite de la zone Paramètre :

Cette fenêtre s’affiche :

Cliquer sur la liste à droite de la zone “Nom”, sélectionner le paramètre AREA_PARAM, spécifier son type, et choisir le type de mise à jour : ici il s’agit d’une « sélection » et cliquer OK :

Dans l‘écran ci-dessus :

- Cliquer sur la liste déroulante de la zone Nom pour obtenir la liste des paramètres existants et sélectionner le paramètre requis. Si aucun paramètre n’est affiché cliquer sur Nouveau… et ajouter le nom du paramètre manuellement.

- Vérifier les types proposés par la liste déroulante de la zone Type et modifiez si besoin.

- Définir le Type d’initialisation par la liste déroulante ce cette zone. Ici, “Sélection” signifie que le secteur sélectionné avec la souris, lors de l’exécution du Dashboard, donnera la valeur de la région au paramètre AREA_PARAM.

- Cliquer sur Appliquer pour valider puis sur OK et exécuter le Dashboard.








Cliquer sur n’importe quel secteur du graphe, par exemple NORTH-WEST. Vous pouvez vérifier la valeur attribuée au paramètre AREA_PARAM en faisant cette action sur le fond du Dashboard à un endroit sans objet : Ctrl + Double Click: cela affichera la ou les valeur(s) de tous les paramètres actuels:

Avant de cliquer sur un secteur du graphe, le paramètre AREA_PARAM devrait avoir la valeur IGNORE, Après avoir cliqué sur le secteur NORTH-WEST, le paramètre AREA_PARAM doit avoir la valeur NORTH-WEST.

Cela peut être parfois utile de pouvoir vérifier les valeurs attribuées aux paramètres en construisant son application Dashboard.

Mais, jusqu’à présent, toute action sur un secteur du graphe n’a aucun effet visible dans ce Dashboard sur un autre objet. Le paragraphe suivant explique comment mettre à jour un autre objet en cliquant sur un graphe ou sur un objet en général, par exemple une ligne d’une table.

6.2.3. Mettre à jour un autre objet

Ouvrir de nouveau les propriétés de l’objet PieChart1 et cliquer sur l’icône à droite de la zone Actualiser :

Cette fenêtre s’affiche :








Sélectionner l’objet Table1 dans cette liste, ce qui va le mettre à jour lorsqu’on cliquera sur un secteur du graphe en y affichant les données de la région concernée.

Attention: selon la méthode utilisée pour alimenter les objets Google, cette modification est suffisante pour la méthode “Temps réel” mais pas suffisante pour les autres méthodes Google Data Table ni Google Drive.

6.2.3.1. Méthode Temps réel:

Comme l’URL alimentant l’objet Table contient déjà le nom du paramètre AREA_PARAM, la modification expliquée précédemment est suffisante:

La nouvelle valeur pour le paramètre AREA_PARAM sera actualisée dans l’URL:

L’URL dans la zone Source est, au départ :

/dvweb/Menus/Query.ashx?__ma=BAI+Demonstration&__mi=2274&AREA_PARAM=&__f=Google+Data+Table

Cette URL sera modifiée dynamiquement au moment de l’exécution avec cette valeur si la région WEST est sélectionnée :

/dvweb/Menus/Query.ashx?__ma=BAI+Demonstration&__mi=2274&AREA_PARAM=WEST&__f=Google+Data+Table

Cliquer sur OK pour valider, Exécuter et Enregistrer le Dashboard, puis sélectionner la région WEST sur le graphe : la table se met à jour avec uniquement les données de la région West.

Les formats numériques et dates viennent des formats définis dans la requête utilisée dans l’URL.

Note: une alternative pourrait être d’utiliser aussi la zone Requête Source et d’y saisir une commande SQL simplifiée pour ne sélectionner que les colonnes nécessaires au graphe. (Voir cette méthode décrite ci-dessous pour les Google Data Table ou Google Drive).

6.2.3.2. Méthode avec fichier Google Data Table:

Comme l’URL alimentant l’objet Table ne contient pas le nom du paramètre AREA_PARAM, la modification expliquée précédemment n’est pas suffisante. Vous aurez besoin d’ajouter une commande SQL dans la zone Requête Source pour spécifier un critère utilisant ce paramètre:

select A, B, C, D, E, F where A=[AREA_PARAM] format F '$#,##0.00', E 'MM-dd-yyyy'

Attention : dans un format Date, MM doit être écrit en MAJUSCULES, sinon vous pourriez convertir en « minutes » au lieu de « Mois » cette partie de la date !

Comme on utilise une commande SQL, il est recommandé de donner un format aux colonnes numériques et dates.

Pour le graphe, la zone Source aura la même URL que l’objet Table1 mais la zone Requête Source devra avoir une commande SQL telle que :

select A, sum(F) group by A format sum(F) '$#,##0.00'

Cliquer sur OK pour valider, Exécuter et Enregistrer le Dashboard, puis sélectionner la région CENTRAL dans le graphe.








Noter que vous pouvez cliquer sur le bouton Help près de la zone Requête Source pour obtenir des informations au sujet de la syntaxe SQL supportée, la syntaxe des formats etc. Attention : les syntaxes sont la plupart du temps sensibles aux minuscules/majuscules !

6.2.3.3. Méthode avec Google Drive:

Comme l’URL alimentant l’objet Table ne contient pas le nom du paramètre AREA_PARAM, la modification expliquée précédemment pour la méthode « Temps réel » n’est pas suffisante. Vous aurez besoin d’ajouter une commande SQL dans la zone Requête Source pour spécifier un critère utilisant ce paramètre:

select A, B, C, D, E, F where A=[AREA_PARAM] format F '$#,##0.00', E 'MM-dd-yyyy'

Attention : dans un format Date, MM doit être écrit en MAJUSCULES, sinon vous pourriez convertir en « minutes » au lieu de « Mois » cette partie de la date !.

Comme on utilise une commande SQL, il est recommandé de donner un format aux colonnes numériques et dates. Pour le graphe, la zone Source aura la même URL que l’objet Table1 mais la zone Requête Source devra avoir une commande SQL telle que :

select A, sum(F) group by A format sum(F) '$#,##0.00'

Cliquer sur OK pour valider, Exécuter et Enregistrer le Dashboard, puis sélectionner la région SOUTH dans le graphe constatez que la Table se met à jour qu’avec les données de cette région.

6.2.4. Définir un lien (URL) à exécuter

Vous pouvez aussi décider, si besoin, qu’une action sur un objet dans un Dashboard provoque l’exécution d’une URL (lien vers quelque chose…). Par exemple, dans un objet Table, vous pouvez décider que le clic sur n’importe quelle ligne va exécuter un état en lui passant des paramètres tels que la région, le vendeur ou une date ou l’année de la date etc.

Cliquer ici pour avoir de l’aide sur la syntaxe des commandes SQL et des formats etc.








6.2.4.1. Sélectionner un état et copier son URL

Revenir au Menu BAI Demonstration dans le Portail Web et sélectionner la branche Dynamic Reports puis l’état Demo Multi Criteria. Cliquer sur les 3 paramètres sans saisir de valeurs puis cliquer sur le bouton Partager pour voir les liens proposés: choisir « Lien vers cette page Web » avec l’option « Afficher le résultat » :

Comme on a besoin d’utiliser ce lien depuis une application Dashboard, on ne veut pas voir les questions sur les paramètres. C’est pour cela que le ShowParameters.aspx est remplacé par Display.aspx.avec l’option “Afficher le résultat”.

Copier ce lien et supprimer http://localhost et ne garder que cette partie :

/dvweb/Menus/Display.aspx?__ma=BAI+Demonstration&__mi=2316&AREA_PARAM=&SALNAME_PARAM=&P_DATE=

&__f=PDF&__e=0 (vous pouvez aussi supprimer le &__e=0 non nécessaire ici)

Comme vous le constatez les 3 paramètres sont inclus dans cette URL sans aucune valeur, cela signifie que leurs valeurs par défaut sont « IGNORE ».

L’URL pourrait aussi être celle-ci, si vous ne souhaitez pas voir la barre de navigation (avec Display.ashx). Décocher l’option de droite “Afficher la barre de navigation” pour avoir cet URL (vous pouvez aussi supprimer le &__e=0 non nécessaire ici).

/dvweb/Menus/Display.ashx?__ma=BAI+Demonstration&__mi=2316&AREA_PARAM=&SALNAME_PARAM=&P_DATE=&__f=PDF

6.2.4.2. Coller l’URL et définir les paramètres

Ouvrir l’éditeur de Dashboard (Créer depuis le Portail Web puis Fichier -> Ouvrir). Ouvrir le Dashboard que vous avez créé pour la méthode « Temps réel » : le fichier “Dashboard Temps réel.xgc”.

Cliquer sur l’cône des Propriétés de la Table et collez un des deux URL précédents dans la zone “Exécute l’URL” :




http://localhost/





Changer aussi le mode d’exécution de l’URL en “Exécuter dans une nouvelle fenêtre”.

Cliquer sur OK, enregistrer et exécuter ce Dashboard. Le rapport “Demo Multi Criteria” sera exécuté en format PDF dans une nouvelle fenêtre chaque fois que vous cliquerez sur une ligne de la table. Mais comme aucun paramètre n’est défini lors de ces clics, le rapport contiendra toutes les données. Ii faut donc une modification supplémentaire à ce stade pour faire en sorte que les paramètres tiennent compte de la ligne sélectionnée. Cliquer sur l’icône à droite de la zone Paramètres :

On doit alors alimenter les 3 paramètres utilises par le rapport Demo Multi Criteria.

Dans l’écran affichant les paramètres, sélectionner le paramètre AREA_PARAM dans la liste :

Vérifier le type du paramètre (Chaîne), et définir le type d’initialisation parmi Sélection, Colonne sélectionnée, Dimension sélectionnée, Script, Valeur ou URL. Dans cet exemple nous avons besoin d’utiliser “Colonne sélectionnée” et saisir en dessous la valeur pour cette colonne. La valeur pour la région qui est la première colonne sera donc 1. Cliquer Appliquer pour valider.

Maintenant on doit rajouter un autre paramètre qui doit prendre la valeur du Nom du Vendeur:

Comme ce paramètre existe déjà dans le Dashboard, sélectionner le paramètre SALNAME_PARAM dans la même liste. Vérifier son type (Chaîne) et définir son initialisation aussi comme une colonne sélectionnée mais ici ce sera la colonne 3, puis cliquer sur Appliquer :








Noter que le bouton Nouveau peut être utilisé pour rajouter un paramètre qui n’existerait pas déjà dans la requête ni dans le Dashboard mais qui existerait dans le rapport appelé par cette URL.

Cliquer sur OK, enregistrer et exécuter ce Dashboard. Le rapport “Demo_Multicriteria” sera exécuté en format PDF dans une nouvelle fenêtre chaque fois que vous cliquerez sur une ligne de la table, mais, cette fois ce sera pour la région et même le vendeur sélectionnés.

7. Commandes du Menu Principal

7.1. Commande Fichier

7.1.1. Fichier >Nouveau

Utiliser cette commande pour créer un nouveau Dashboard vide. La présentation par défaut peut être définie en utilisant la commande Editer > Propriétés de la page.

7.1.2. Fichier > Ouvrir

Utiliser cette commande pour ouvrir un Dashboard existant, avec l’extension “.xgc”. Si le Dashboard ouvert actuellement n’est pas sauvé, la commande Enregistrer sous sera proposée.

7.1.3. Fichier > Enregistrer

Utiliser cette commande pour Enregistrer le Dashboard actuellement ouvert. Si le Dashboard ouvert actuellement n’est pas sauvé depuis sa dernière modification, la commande Enregistrer sous sera proposée.

7.1.4. Fichier > Enregistrer sous

Utiliser cette commande pour Enregistrer sous un nom le Dashboard actuel ou un Dashboard déjà enregistré sous un nouveau nom. L’extension “.xgc” sera rajoutée automatiquement si non spécifiée.

7.1.5. Fichier > Supprimer

Utiliser cette commande pour Supprimer le Dashboard actuel ayant l’extension “.xgc”.

7.1.6. Fichier > Exécuter

Utiliser cette commande pour Exécuter le Dashboard actuel. Si celui-ci n’a pas été enregistré depuis sa dernière modification, il vous sera demandé de l’enregistrer, puis il sera exécuté immédiatement.

7.1.7. Fichier > Convertir xgc V12

Noter que cette commande dans ce menu apparait seulement avec les navigateurs Microsoft Edge, Google Chrome ou Mozilla Firefox. Cette commande permet à l’utilisateur de convertir des fichiers Dashboard existants (ayant l’extension .xgc) provenant de Click&DECiDE version 12.x.

Ouvrir le fichier à convertir.

Attention : avant de sauver le fichier, noter que toute fonction telle que GetParameterValue("ParamName") ou tableBarFormat (6,{width:120}) sera remplacée par env.getParameterValue("ParamName") ou env.tableBarFormat (6,{width:120}).

Les noms de Fonction sont sensibles à la casse: env.getParameterValue doit contenir un petit "g".

Enregistrer le fichier à convertir.

7.2. Commande Editer

7.2.1. Editer > Couper

Utiliser cette commande pour Couper un objet dans le Dashboard actuel. L’objet restera en mémoire afin que vous puissiez le coller dans un autre Dashboard, ouvert dans une autre fenêtre du navigateur.

7.2.2. Editer > Copier

Utiliser cette commande pour Copier un objet dans le Dashboard actuel. L’objet restera en mémoire afin que vous puissiez le coller dans un autre Dashboard, ouvert dans une autre fenêtre du navigateur.








7.2.3. Editer > Coller

Utiliser cette commande pour Coller un objet (précédemment copié ou coupé depuis le Dashboard actuel ou depuis un autre Dashboard) dans le Dashboard actuel.

7.2.4. Editer > Supprimer

Utiliser cette commande pour Supprimer un objet dans le Dashboard actuel. Cet objet ne sera pas conserve en mémoire.

7.2.5. Editer > Copier le style

Utiliser cette commande pour Copier le style depuis un objet dans le Dashboard actuel. Certains attributs resteront en mémoire afin que vous puissiez plus tard coller le style sur d’autres objets, dans le même Dashboard ou un autre Dashboard, et ainsi appliquer les mêmes attributs.

7.2.6. Editer > Coller le style

Utiliser cette commande pour Coller le style précédemment copié depuis un objet dans le Dashboard actuel ou un autre Dashboard. Les attributs, conservés en mémoire, seront appliqués à l’objet sélectionné en utilisant la commande Coller le style.

7.2.7. Editer > Sélectionner tout

Utiliser cette commande pour sélectionner tous les objets dans le Dashboard actuel, ensuite utilisez une autre commande telle que Copier, Supprimer etc.

7.2.8. Editer > URLs…

Utiliser cette commande quand vous souhaitez éditer tous les liens URLs utilisés dans un Dashboard et pouvoir faire un Rechercher/Remplacer, évitant de modifier un à un ces URLs et en étant sûr d’en oublier aucun. La boite de dialogue suivante affichera tous les URLs trouvés dans ce Dashboard :

Entrer la chaîne à remplacer, puis la chaîne de remplacement, et enfin cliquer sur Remplacer tout. Cliquer sur Fermer une fois terminé.

7.2.9. Editer > Paramètres

Utiliser cette commande si vous désirez voir, ajouter, supprimer ou modifier des paramètres utilisés lors de l’exécution de ce Dashboard, au moment du démarrage (Paramètre Global). Cela représente la valeur par défaut à utiliser au lancement du Dashboard. Plus tard chaque valeur peut être modifiée selon les actions de l’utilisateur et les règles définies dans l’application.

La fenêtre du haut montre tous les paramètres existants avec leurs valeurs par défaut.

Vous pouvez cliquer sur n’importe quelle ligne pour modifier :

Le type du paramètre (Chaîne, Nombre, Date, Heure, Horodate)

Le type d’initialisation (valeur, script, URL)








La valeur (Entrer IGNORE si vous voulez que cette valeur soit ignorée. Une valeur « vide » ne correspond pas à IGNORE)

Noter que dans l’exemple donné ci-dessous vous pouvez alimenter la zone “Source” de n’importe quel objet. Dans cet exemple le paramètre nommé Source_GCD va utiliser une URL appelant un fichier local de type « .gcd » sur le serveur et utilise la méthode « Google Data Table Access ». si, plus tard, vous souhaitez utiliser la méthode « Google Doc Access », vous avez juste à changer la valeur enregistrée pour le paramètre Source_GDoc.

Astuce : noter que dans l’exemple ci-dessus, au lieu de saisir 2016 pour l’année dernière, vous pouvez utiliser du code Java Script pour calculer le résultat à utiliser de manière dynamique: pour obtenir l’année dernière, la formule sera :

(function(){var d=new Date(); return d.getFullYear()-1;})()

Dans l’écran ci-dessus; cliquer sur Nouveau pour ajouter un nouveau paramètre global et saisir son nom :

Cliquer sur OK et définir le type du paramètre, le type d’initialisation et sa valeur par défaut.

Si vous modifiez un paramètre existant, cliquer sur Appliquer.

Cliquer sur Supprimer pour supprimer un paramètre de cette liste.

Cliquer sur OK pour valider une fois terminé.

7.2.10. Editer > Minuteur

Utiliser cette commande si vous souhaitez rafraichir certains objets dans votre application Dashboard périodiquement :








Dans l’écran ci-dessus saisir un nombre de secondes (intervalle entre chaque actualisation du résultat), puis sélectionner les objets à mettre à jour, ils apparaitront dans la colonne “Triés”.

Noter que vous pouvez déplacer n’importe quel objet dans la colonne “Triés” pour forcer l’ordre de la mise à jour des différents objets selon vos besoins. Cliquer Tous seulement si tous les objets doivent être actualisés. Valider avec OK.

7.2.11. Editer > Trier

Utiliser cette commande si vous souhaitez définir un ordre bien précis de mise à jour des objets, lors de l’exécution du Dashboard. Faire glisser et lâcher chaque élément à une nouvelle place jusqu’à obtention de l’ordre désiré.

7.2.12. Editer > Page Propriétés de la page

Utiliser cette commande si vous souhaitez modifier les propriétés de la page. Cette commande a déjà été décrite au début de ce manuel (Voir paragraphe 2.2.1 Editer les propriétés de la page)








7.3. Commande Format

Dans la commande suivante rappelez-vous que vous pouvez sélectionner deux ou plusieurs objets en utilisant deux méthodes:

a) Presser et garder appuyé la touche Ctrl puis faire un clic sur tous les objets requis

b) Utiliser la souris seule en gardant le bouton gauche appuyé et en déplaçant la souris par-dessus les objets requis.

7.3.1. Format > Alignement

Utiliser cette commande si vous souhaitez Aligner deux ou plusieurs objets dans un Dashboard.xgc.

Puis cliquer sur Format > Alignement > A gauche pour aligner tous les objets par leurs bords le plus à gauche.

Ou cliquer sur Format > Alignement > Au centre pour aligner tous les objets avec la position centrale horizontalement de la position précédente.

Ou cliquer sur Format > Alignement > A droite pour aligner tous les objets par leurs bords le plus à droite.

Ou cliquer sur Format > Alignement > En haut pour aligner tous les objets par leurs bords le plus en haut.

Ou cliquer sur Format > Alignement > Au milieu pour aligner tous les objets par la position centrale verticalement de la position précédente.

Ou cliquer sur Format > Alignement > En bas pour aligner tous les objets par leurs bords le plus en bas.

7.3.2. Format > Taille

Utiliser cette commande si vous souhaitez modifier la Taille deux ou plusieurs objets dans un Dashboard.xgc.

Puis cliquer sur Format > Taille > Ajuster au plus grand pour ajuster la taille de tous les objets par rapport au plus grand (en hauteur).

ou cliquer sur Format > Taille > Ajuster au plus étroit pour ajuster la taille de tous les objets par rapport au plus étroit (en hauteur).

ou cliquer sur Format > Taille > Ajuster au plus large pour ajuster la taille de tous les objets par rapport au plus large (en largeur).

ou cliquer sur Format > Taille > Ajuster au plus petit pour ajuster la taille de tous les objets par rapport au plus petit (en largeur).

7.3.3. Format > Centrage

Utiliser cette commande si vous souhaitez déplacer un ou plusieurs objets au centre d’un Dashboard.xgc.

Puis cliquer sur Format > Centrage > Horizontal pour déplacer les objets en position centrée horizontalement par rapport à la page du Dashboard actuel.

ou cliquer sur Format > Centrage > Vertical pour déplacer les objets en position centrée verticalement par rapport à la page du Dashboard actuel.

Rappelez-vous que la taille de la page peut être modifiée par la commande Editer > Propriétés de la Page.

7.4. Commande Insérer

7.4.1. Insérer > Graphique Google

Vous pouvez voir, exécuter et éditer plusieurs exemples si vous sélectionnez cette branche du menu BAI Demonstration depuis le Portail Web : Dashboards > Other Dashboard Samples > Dashboard Samples:

7.4.1.1. Insérer > Graphique Google > Frise chronologique

Utiliser cette commande si vous souhaitez insérer un Graphique Google Frise chronologique dans un Dashboard.xgc.








Voir l’exemple Annotation Chart Sample.xgc.

7.4.1.2. Insérer > Graphique Google > Aires

Utiliser cette commande si vous souhaitez insérer un Graphique Google Aires dans un Dashboard.xgc.

Voir l’exemple Area Chart Sample.xgc.

7.4.1.3. Insérer > Graphique Google > Barres

Utiliser cette commande si vous souhaitez insérer un Graphique Google Barres dans un Dashboard.xgc.

Voir l’exemple Bar Chart Sample.xgc.

7.4.1.4. Insérer > Graphique Google > Bulles

Utiliser cette commande si vous souhaitez insérer un Graphique Google à Bulles dans un Dashboard.xgc.

Voir l’exemple Bubble Chart Sample.xgc.








7.4.1.5. Insérer > Graphique Google > Calendrier

Utiliser cette commande si vous souhaitez insérer un Graphique Google Calendrier dans un Dashboard.xgc. Voir l’exemple Calendar Chart Sample.xgc.

7.4.1.6. Insérer > Goolge Chart > Chandelier japonais

Utiliser cette commande si vous souhaitez insérer un Graphique Google Chandeliers japonais dans un Dashboard.xgc. Voir l’exemple Candlestick Chart Sample.xgc.

7.4.1.7. Insérer > Graphique Google > Colonnes

Utiliser cette commande si vous souhaitez insérer un Graphique Google Colonnes dans un Dashboard.xgc.

Voir l’exemple Column Chart Sample.xgc.

7.4.1.8. Insérer > Graphique Google > Combiné

Utiliser cette commande si vous souhaitez insérer un Graphique Google Combiné dans un Dashboard.xgc.

Voir l’exemple Combo Chart Sample.xgc.








7.4.1.9. Insérer > Graphique Google > Anneaux

Utiliser cette commande si vous souhaitez insérer un Graphique Google Anneaux (ou Beignet) dans un Dashboard.xgc.

Voir l’exemple Donut Chart Sample.xgc.

7.4.1.10. Insérer > Graphique Google > Jauge

Utiliser cette commande si vous souhaitez insérer un Graphique Google Jauge dans un Dashboard.xgc.

Voir l’exemple Gauge Chart Sample.xgc.

7.4.1.11. Insérer > Graphique Google > Géographique-marqueurs

Utiliser cette commande si vous souhaitez insérer un Graphique Google Géographique-marqueurs dans un Dashboard.xgc.

Voir l’exemple Geo Chart Sample.xgc.








7.4.1.12. Insérer > Graphique Google > Histogramme

Utiliser cette commande si vous souhaitez insérer un Graphique Google Histogramme dans un Dashboard.xgc.

Voir l’exemple Histogram Chart Sample.xgc.

7.4.1.13. Insérer > Graphique Google > Courbe

Utiliser cette commande si vous souhaitez insérer un Graphique Google Courbe dans un Dashboard.xgc.

Voir l’exemple Line Chart Sample.xgc.

7.4.1.14. Insérer > Graphique Google > Géographique-régions

Utiliser cette commande si vous souhaitez insérer un Graphique Google Géographique-régions dans un Dashboard.xgc.

Voir l’exemple Map Chart AddressCityStateCountry.xgc

Voir aussi l’exemple Map Chart Latitude Longitude Sample.xgc.

7.4.1.15. Insérer > Graphique Google > Diagramme animé

Utiliser cette commande si vous souhaitez insérer un Graphique Google Diagramme animé dans un Dashboard.xgc.

Voir l’exemple Motion Chart Sample.xgc. (Attention : cet objet a besoin d’Adobe Flash Player)








7.4.1.16. Insérer > Graphique Google > Secteur

Utiliser cette commande si vous souhaitez insérer un Graphique Google Secteur (ou Camembert) dans un Dashboard.xgc. Voir l’exemple Pie Chart Sample.xgc.

7.4.1.17. Insérer > Graphique Google > Diagramme de flux

Utiliser cette commande si vous souhaitez insérer un Graphique Google Diagramme de flux dans un Dashboard.xgc. Voir l’exemple Sankey Chart Sample.xgc.

7.4.1.18. Insérer > Graphique Google > Nuage de points

Utiliser cette commande si vous souhaitez insérer un Graphique Google Nuage de points dans un Dashboard.xgc. Voir l’exemple Scatter Chart Sample.xgc.








7.4.1.19. Insérer > Graphique Google > Courbe en escalier

Utiliser cette commande si vous souhaitez insérer un Graphique Google Courbe en escalier dans un Dashboard.xgc. Voir l’exemple Stepped Area Chart Sample.xgc.

7.4.1.20. Insérer > Graphique Google > Table

Utiliser cette commande si vous souhaitez insérer un Graphique Google Table dans un Dashboard.xgc.

Voir l’exemple Table Sample.xgc.

Attention : si cela n’est pas déjà existant ou rajouté, vous devez ajouter, par le bouton Avancés et en utilisant le bouton Nouveau, une nouvelle Propriété nommée allowHtml = true si vous souhaitez voir les effets d’un script dans un objet Table: (cette option est maintenant rajoutée automatiquement dès qu’on insère un objet Table)

Voir dans le paragraphe sur les Scripts comment rajouter une barre horizontale dans les champs numériques d’une table, comment rajouter du texte et des couleurs de fonds dépendant d’une ou plusieurs conditions etc. comme dans l’exemple suivant:








7.4.1.21. Insérer > Graphique Google > Ligne de temps

Utiliser cette commande si vous souhaitez insérer un Graphique Google Ligne de temps dans un Dashboard.xgc. Voir l’exemple Timeline Sample.xgc.

7.4.1.22. Insérer > Graphique Google > Arbre

Utiliser cette commande si vous souhaitez insérer un Graphique Google Arbre dans un Dashboard.xgc.

Voir l’exemple Tree Map Sample.xgc.

Pour alimenter ce type d’objet, Vous avez besoin de faire plusieurs UNIONs avec plusieurs requêtes.

Voir l’exemple TreeMap Chart using real time query on the Database.xgc :








Ce graphe de type Arbre est alimenté par une requête nommée “TreeMap Chart MAIN” localisée dans le projet de Click&DECiDE Builder nommé “_Datamart.wfv” que vous pouvez trouver dans la branche Datamart branch du Menu BAI Demonstration dans le Portail Web :

7.4.2. Insérer un Panneau avec filtre

Cette fonctionnalité vous permet d’insérer un objet Panneau-Dashboard dans votre Dashboard principal. Un objet Panneau-Dashboard est constitué de 3 éléments :

- Un Cadre Dashboard Parent qui contiendra la Source URL récupérant les données, depuis une requête dynamique, ou un fichier.gcd (Google Data Table) ou un Google Doc.

- Au moins un Graphique Google Enfant (Table par défaut mais peut être modifié en graphique) : cet objet sera alimenté par les données du cadre principal du Dashboard par une sélection de colonnes définie. Comme les données sont déjà en mémoire, aucune requête supplémentaire ni URL n’est requise, et c’est ainsi bien plus rapide. Vous pouvez ajouter d’autres Graphiques Google Enfants plus tard.

- Au moins un Filtre Enfant automatique à utiliser pour chercher les données et modifier le résultat dans le(s) objet(s) Graphique(s) Google, sans avoir besoin de définir vous-mêmes cet objet filtre supplémentaire : les données affichées dans certains de ces filtres proviendront aussi des données déjà en mémoire (aucune requête supplémentaire ni URL n’est requise). Vous pouvez ajouter d’autres Filtres plus tard.

Quand vous cliquez sur Insérer > Graphique Google > Panneau avec filtre, la liste des Filtres apparait :

7.4.2.1. Insérer un panneau avec filtre Catégorie

Sélectionner Panneau avec filtre > Filtre par catégorie :








Puis alimenter le cadre du Dashboard principal avec l’URL requise, par exemple l’URL prenant les données du fichier Sales.gcd:

/dvweb/menus/query.ashx?__ma=BAI+Demonstration&__mi=2558&__rp=Datamart%2fSales.gcd

Valider, l’aperçu est affiché dans l’objet Table :

Par défaut la valeur du filtre Catégorie est de zéro dans la zone in the “Colonne de filtre”, signifiant que c’est la première colonne, base 0.

Vous pouvez voir que le titre de ce filtre est la colonne Area, qui est bien la première colonne.

La zone “Lier à” permet de lier ce filtre à l’objet spécifié, ici l’objet “Table3”.

Exécuter et enregistrer ce Dashboard :








Cliquer sur la liste déroulante pour afficher les valeurs existantes pour la colonne Area :

Sélectionner n’importe quelle valeur, (sélection unique seulement), par exemple CENTRAL:

Le filtre CENTRAL apparait à droite de la zone de filtre, sélectionner une autre valeur :

CENTRAL apparait grisé car il est déjà sélectionné :

Sélectionner maintenant SOUTH par exemple : les 2 valeurs sélectionnées sont affichées comme valeurs de filtre :








Supprimer n’importe quelle valeur de filtre simplement en cliquant sur la croix à gauche de la valeur.

7.4.2.2. Insérer un panneau avec plusieurs filtres Catégories

Il est possible d’ajouter plus d’un filtre par Catégorie et de lier un filtre avec un autre filtre, mais les règles sont les suivantes : un filtre par catégorie ajouté peut être lié à un autre filtre (travaille en mode “cascade”) mais jamais en sens inverse.

Exemple : dans l’exemple précédent, le filtre existant était sur la colonne AREA. Pour ajouter un nouveau filtre catégorie, sélectionner d’abord l’objet Table dans ce Dashboard, puis utiliser la commande Insérer > Filtre sur graphique Google > Filtre sur catégories :

Vérifier que le premier filtre dépende bien de la colonne zéro (première colonne étant AREA) dans la Table et que le nouveau filtre dépende de la colonne 2 (c’est-à-dire la troisième colonne Vendor) dans la Table. Déplacer si besoin ce second filtre en haut à droite à côté du premier filtre et le renommer CategoryFilterVendor pour plus de clarté :

Si vous exécutez ce Dashboard les 2 filtres fonctionnent de manière indépendante : vous pouvez sélectionner par exemple 3 régions et 3 vendeurs mais le critère le plus restrictif sera appliqué : dans l’exemple ci-








dessous, si vous sélectionnez les régions ATLANTIC, CENTRAL et SOUTH, tous les vendeurs de ces 3 régions seront affichés dans l’objet Table.

Ensuite, si vous affichez avec le second filtre des vendeurs, tous les vendeurs, même ceux d’autres régions, apparaissent dans la liste car il n’existe aucun lien entre ces 2 filtres :

Mais vous pouvez lier un filtre avec un autre filtre de la manière suivante :

Cliquer sur l’icône des Propriétés du filtre Area et renommer ce filtre CategoryFilterArea pour plus de clarté :

Cliquer sur l’icône Editer à droite de la zone « Lier à » et activer le “CategoryFilterVendor”:

Valider, enregistrer et exécuter: maintenant, si vous sélectionnez une ou plusieurs régions avec le premier filtre AREA, puis utilisez le filtre Vendor, celui-ci n’affichera que les vendeurs existants dans la ou les région(s) choisie(s) :








Vous pouvez décider de faire l’inverse, selon vos besoins :

Supprimer le lien entre le filtre Area et le filtre Vendor.

Ajouter dans le filtre Vendor un lien vers le filtre Area.

Le résultat sera que les régions affichées dépendront maintenant des vendeurs préalablement sélectionnés :

Si vous sélectionnez un vendeur de la région NORTH-WEST (par exemple Bill Raley) et un autre vendeur de la région SOUTH (par exemple Jean Martin) alors seules les régions NORTH-WEST et SOUTH seront affichées par le filtre Area :

Attention : vous ne pouvez pas lier le filtre Area au filtre Vendor ET lier le filtre Vendor au filtre Area en même temps !

7.4.2.3. Insérer un panneau avec filtre par intervalle graphique

Sélectionner Panneau avec filtre > Filtre par intervalle graphique :








Maintenant alimenter le Cadre principal du Dashboard (nommé ici ChartRangeFilter_D1) avec l’URL requise, par exemple l’URL prenant les données dans le fichier sales.gcd :


Ajouter dans la zone « Requête source » la commande SQL pour obtenir les données correctes pour le type de graphique choisi :

select D, sum(E) where year(D)=[P_Year] group by D

La première colonne doit être un champ DATE, la seconde colonne un champ numérique.

L’objet Graphique « LineChart1 » est alimenté par la zone Afficher les colonnes (si cette zone est vide; toutes les colonnes sont utilisées depuis la zone « Requête source » de l’objet ChartRangeFilter_D1). Les numéros de colonne utilisent une base zéro (la première colonne est 0). Ici la première colonne (0) est la colonne D de la requête source et la seconde colonne (1) est la colonne sum(E) :

Ensuite l’objet « ChartRangeFilter1 » spécifie la colonne de filtre qui doit être utilisée pour l’axe des temps. Les numéros de colonne utilisent une base zéro (la première colonne est 0). Ici le filtre sera la colonne (0) correspondant à la date ; colonne D de la requête source :

Valider, enregistrer et exécuter le Dashboard :








Vous pouvez maintenant jouer avec le filtre sur intervalle graphique pour voir plus en détails une période du graphe. Vous pouvez aussi modifier le type de graphe pour un autre type (Barres, Aires etc.)

7.4.2.4. Insérer a Dashboard with Number Range Filter

Sélectionner Panneau avec filtre > Filtre par intervalle numérique :

Maintenant alimenter le Cadre principal du Dashboard (nommé ici Dashboard1) avec l’URL requise, par exemple l’URL prenant les données dans le fichier sales.gcd :


Valider, l’aperçu est affiché dans l’objet Table :

Comme vous pouvez le voir la colonne Total est en position 5, donc la zone « Colonne de filtre » dans le Filtre par intervalle numérique doit être 4 (numéros de colonne base zéro) :

Exécuter et enregistrer ce Dashboard :








Vous pouvez maintenant jouer avec le filtre sur intervalle numérique pour n’afficher que les totaux inclus dans l’intervalle ainsi modifié.

Dans l’exemple suivant, le filtre sur intervalle numérique a été défini pour afficher les totaux compris entre 100007 and 201949 :

Ici aussi, vous pouvez remplacer la Table par un Graphique Google si vous adaptez au passage la requête source du cadre principal du Dashboard et les numéros de colonnes pour le graphe choisi. Vous pouvez aussi rajouter un autre filtre par intervalle numérique pour la colonne « Quantité » qui est la sixième colonne et donc aura le chiffre 5 dans la zone « Colonne de filtre » :

Valider, sauver et exécuter:

7.4.2.5. Insérer un Panneau avec filtre par chaîne de caractères

Sélectionner Panneau avec filtre > Filtre par chaîne de caractères :








Maintenant alimenter le Cadre principal du Dashboard (nommé ici StringFilter_D1) avec l’URL requise, par exemple l’URL prenant les données dans le fichier sales.gcd :


et valider. Automatiquement l’aperçu est affiché dans l’objet Table utilisant toutes les colonnes :

Mais vous pouvez modifier uniquement les colonnes nécessaires dans les propriétés de l’objet Table en utilisant la zone « Afficher les colonnes » dans laquelle une info-bulle affiche la syntaxe à utiliser si vous bougez la souris dans cette zone (sans la sélectionner) :

Entrez par exemple 0 pour la première colonne (Area), 2 pour la troisième colonne (Vendor), 3 et 4 pour les colonnes 4 et 5 (Total et Quantity) :








Valider. Ajuster si besoin la taille de l’objet Table et le nombre de lignes par page (10), puis enregistrer et exécuter le Dashboard :

En haut du Dashboard le filtre par chaîne de caractères apparait, prêt pour saisir une valeur. Noter que les caractères ou la chaîne que vous saisissez seront traduits en “commençant par” les arguments correspondants :

Entrer dans la zone de filtre la lettre “C” et seules les régions commençant par un “C” seront affichées (non sensible à la casse)

Vous pouvez là aussi remplacer l’objet Table par un Graphique Google : utiliser l’icône d’édition des graphes . Mais dans la plupart des cas il faudra aussi modifier l’URL du cadre principal pour l’adapter aux données comprises par le graphe choisi et/ou modifier les colonnes à afficher selon le type de graphe sélectionné.

Si on modifie l’URL du cadre principal du Dashboard en rajoutant une Requête Source pour seulement la somme du total par nom d’états et régions : SELECT A, B, sum(E) group by A,B label sum(E) 'Total' format sum(E) '#,##0.00'

et si on modifie les colonnes à afficher dans l’objet Table avec 1,2 on peut ensuite passer du type Table au

type Graphe en colonnes sans obtenir d’erreurs car les champs présentés correspondent bien directement aux colonnes attendues par le graphe en colonnes. Ici la colonne zéro est la région (Area), la colonne 1 est l’état (State), la colonne 2 est la somme du total.

Valider : noter que le filtre chaîne s’appliquant à la première colonne (base 0) il s’agit maintenant de l’état :








puis sélectionner l’onglet Charts et choisir un autre type de graphe comme par exemple le Column Chart :

et enfin passer à l’onglet « Customize » pour personnaliser certains paramètres comme par exemple le Titre et l’absence de légende :

Puis valider et exécuter le Dashboard:








Maintenant vous pouvez utiliser le filtre sur chaîne de caractères pour ne voir que certains états dont les noms commencent par le filtre spécifié. Entrer par exemple la lettre “N” : seuls les états commençant par N seront affichés :

Entrer la chaîne “NE”, maintenant seuls les états commençant par “NE” apparaissent :

7.4.3. Insérer un Filtre sur Graphique Google

Comme décrit dans les paragraphes précédents sur le la commande Insérer > Graphique Google > Panneau avec filtre, vous pouvez insérer un Dashboard incluant directement un filtre spécifique, parmi 4 types de filtres proposés, mais il est aussi possible d’ajouter un ou plusieurs filtre(s) dans un Dashboard déjà existant, chaque filtre devant juste être lié à un objet (Table, Graphe etc.).

La commande Insérer > Filtre sur Graphique Google est grisée si non applicable. Vous devez d’abord sélectionner un objet Graphique Google dans un Dashboard (Table ou Graphe) auquel vous souhaitez appliquer un nouveau filtre ou filtre supplémentaire, avant de pouvoir utiliser la commande Insérer > Filtre sur Graphique Google.

7.4.3.1. Insérer un filtre Catégorie

Tout d’abord sélectionner dans un Dashboard existant l’objet Graphique Google auquel vous souhaitez appliquer un filtre Catégorie puis cliquer la commande Insérer > Filtre sur Graphique Google > Filtre sur catégorie.

Exemple: ouvrir le Dashboard Bar Chart Sample.xgc localise dans le répertoire :

//BAI Demonstration/Dashboards/Other Dashboard Samples/Dashboard Samples

Faire une copie de cet exemple sous le nom de Bar Chart avec filtre catégorie.xgc








Noter que le Graphique en barres est alimenté par l’URL et la requête source suivantes et que le clic sur une barre met à jour l’objet Table en utilisant le paramètre P_Vendor :

Si vous ajoutez un filtre catégorie à ce graphique, vous obtiendrez automatiquement 3 objets : un objet Dashboard (ou Panneau avec filtre) en arrière-plan qui inclura l’objet graphique Bar Chart et un objet de type Filtre par catégorie :

- Sélectionner d’abord l’objet BarChart

- Cliquer maintenant sur la commande Insérer > Filtre sur Graphique Google > Filtre sur catégorie

Le Dashboard apparaitra modifié ainsi :

Cliquer sur l’icône des propriétés du Dashboard1 pour voir l’URL et la requête source :








Cliquer sur l’icône des propriétés du Bar Chart pour voir les modifications:

Dans l’objet Bar Chart l’URL source et la requête source ont été remplacées par la zone « Afficher les colonnes ». Les données proviennent à présent de l’objet Dashboard1. Si aucun numéro de colonne n’est spécifié, toutes les données sont récupérées depuis la zone requête source de l’objet Dashboard1.

Cliquer sur l’icône des propriétés du Filtre par catégorie pour voir comment il a été défini : ce filtre est lié à l’objet BarChart1, par la première colonne (base zéro).

Enregistrer et exécuter le Dashboard : le nouveau filtre apparait et permets de sélectionner un ou plusieurs vendeur(s) dans la liste : les noms des vendeurs sélectionnés apparaissent près du filtre catégorie et vous pouvez supprimer n’importe quelle valeur en cliquant sur la croix sur le bord gauche de chaque nom :








Noter que l’objet Table sous le Graphique en barres n’est pas mis à jour par le filtre catégorie. Il est possible de modifier ceci en rajoutant un “lien” dans le filtre Catégorie vers l’objet Table : cliquer sur l’icône des propriétés du filtre par catégorie et ajouter l’objet Table dans la boîte “Lier à“ :

Note 1 : il se peut que dans l’image ci-dessus l’objet “Table” n’apparaisse pas : la raison est que cet objet n’est pas inclus dans le cadre principal “Dashboard1” qui contient le filtre par catégorie. Vous pouvez sélectionner l’objet Table, puis cliquer sur Editer > Couper, puis sélectionner l’objet “Dashboard1” et ensuite cliquer sur Editer > Coller. Vous devriez ensuite voir l’objet Table dans la boite de dialogue “Lier à” ci-dessus.

Note 2 : dans cet exemple le bouton radio “Year” (Années) a été défini pour mettre à jour automatiquement l’objet Table et le graphique en barres. Mais maintenant ces objets Table et Graphique sont inclus dans l’objet Dashboard1. Vous devez définir à nouveau la liste des objets à mettre à jour dans les propriétés du bouton radio « Year » pour ajouter l’objet Dashboard1 :

Enregistrer et exécuter le Dashboard l’année met bien à jour le graphe et la table par l’intermédiaire du cadre principal du Dashboard1 :








Vous pouvez utiliser le filtre Catégorie pour afficher seulement certains vendeurs et comparer leurs ventes selon l’année sélectionnée.

7.4.3.2. Insérer un filtre sur intervalle graphique

Sélectionner d’abord un objet Graphique Google dans un Dashboard existant pour lequel vous souhaitez appliquer un filtre sur intervalle graphique puis cliquer sur la commande Insérer > Filtre sur intervalle graphique.

Voir l’exemple fourni Dashboard Chart Range Filter.xgc localisé dans le répertoire //BAI

Demonstration/Dashboards/Other Dashboard Samples/Dashboard Samples

Le cadre principal ChartRangeFilter_D1 contient l’URL et la requête SQL suivante :

Le graphique en lignes LineChart1 contient est alimenté par les colonnes suivantes :

Et le filtre sur intervalle graphique ChartRangeFilter1 est lié à la première colonne (base zéro) :

A l’exécution vous pouvez zoomer sur une courte période pour voir par exemple seulement quelques jour sur un mois précis :








7.4.3.3. Insérer un filtre sur intervalle numérique

Sélectionner d’abord un objet Graphique Google dans un Dashboard existant pour lequel vous souhaitez appliquer un filtre sur intervalle numérique puis cliquer sur la commande Insérer > Filtre sur intervalle numérique.

Exemple : ouvrir le fichier Table Sample.xgc localisé dans le répertoire //BAI Demonstration/Dashboards/Other

Dashboard Samples/Dashboard Samples.

Faire une copie de cet exemple sous le nom de Table Sample avec filtre intervalle numérique.xgc

Noter que l’objet Table1 est alimenté par l’URL et la requête source suivantes et que le clic sur une ville (City) met à jour l’objet Table 2 via le paramètre P_City :

Noter que l’objet Table2 est alimenté par l’URL et la requête source suivantes :

Sélectionner l’objet Table1 et cliquer sur la commande Insérer > Filtre sur Graphique Google > Filtre sur intervalle numérique :

Le Dashboard apparait alors modifié ainsi :








Noter que l’objet Table2 est toujours en dehors du cadre Dasboard1, donc non lié au filtre sur intervalle numérique.

Le nouvel objet Dashboard1 contient maintenant l’URL et la requête source précédemment attribuées à l’objet Table1 :

Le nouveau filtre sur intervalle numérique est lié à l’objet Table1 et le colonne de filtre est définie par défaut à 1 mais doit s’appliquer à une valeur numérique, qui est ici la colonne Sum(G) dans la zone Requête source. Cette colonne est en position 5, donc vous devez modifier la colonne de filtre par un 4 (Colonne 5 en base zéro = 4) :

L’objet Table1 a été modifié ainsi :

Comme vous pouvez le voir, l’URL et la Requête Source ont été remplacées par une zone « Afficher les colonnes ». (Si elle reste vide, toutes les données de l’objet Dashboard1 sont utilisées).

Attention : l’objet « Year » mettait préalablement à jour les objets Table1 et Table2. Maintenant vous devez spécifier que c’est l’objet Dashboard1 qui doit être mis à jour à la place de Table1 :








Valider, enregistrer et exécuter le Dashboard : le résultat apparait avec le nouveau filtre sur intervalle numérique en affichant par défaut les valeurs mini et maxi trouvées pour la colonne « Sum Amount » :

Vous pouvez déplacer les curseurs min et max depuis le filtre sur intervalle graphique pour réduire les valeurs recherchées, par exemple compris entre 1 017 218 and 2 014 408:

Noter aussi que ce filtre n’a aucun effet sur l’objet Table2 car il est en dehors du cadre de l’objet Dashboard1.

Mais si vous sélectionnez maintenant une ville dans la Table1, alors l’objet Table2 est mis à jour.

7.4.3.4. Insérer un filtre sur chaîne de caractères

Sélectionner d’abord un objet Graphique Google dans un Dashboard existant pour lequel vous souhaitez appliquer un filtre sur intervalle numérique puis cliquer sur la commande Insérer > Filtre sur chaîne de caractères.

Exemple : ouvrir le fichier Timeline Chart Sample.xgc localisé dans le répertoire : //BAI Demonstration/Dashboards/Other Dashboard Samples/Dashboard Samples.








Faire une copie de cet exemple sous le nom de Timeline Chart Sample avec filtre sur chaîne.xgc

Noter que l’objet Timeline1 est alimenté par l’URL et la requête source suivantes:

Sélectionner l’objet Timeline1 et cliquer sur la commande Insérer > Filtre sur Graphique Google > Filtre sur chaîne de caractères :

Le Dashboard apparait alors modifié ainsi :

Noter que le filtre sur chaîne de caractères est lié au graphe Timeline (Ligne de temps) et a été défini pour la colonne 1 au lieu de zéro qui est la valeur par défaut parce que le besoin était de faire un filtre sur le nom du produit (Product Name) en colonne 2, et pas sur la nom de la catégorie en colonne 1 :

Noter que le cadre principal Dashboard1 est maintenant alimenté par l’URL et la requête source précédemment définis pour le graphe Timeline (Ligne de temps) :








Noter que le graphe Timeline (Ligne de temps) a été modifié automatiquement pour proposer une liste de colonnes à afficher au lieu d’une URL et requête source :

Si aucune colonne n’est spécifiée, toutes les données du cadre principal Dashboard1 sont utilisées. Si des colonnes sont spécifiées, la syntaxe doit être 0,1,2 etc. (Base 0 Première colonne =0)

Déplacer le filtre chaîne “Product” en haut à droite du cadre principal Dashboard1, puis enregistrer et exécuter le Dashboard :

Vous pouvez maintenant saisir un ou plusieurs caractères dans le filtre PRODUCT pour n’afficher que les produits commençant par ce ou ces caractère(s). Par exemple taper un “B” :

Attention : l’objet “Year” doit être modifié pour mettre à jour l’objet Dashboard1 au lieu des objets Table1 et Timeline1 :








Maintenant l’année choisie affectera aussi le résultat, avec le même filtre sur chaîne de caractères.

Si on sélectionne une autre année, par exemple 2015, avec le même filtre, on aura un produit supplémentaire :

7.4.3.5. Propriétés avancées des filtres

Pour chaque type de filtre, vous avez un bouton “Avancés” donnant accès à plus de propriétés. Cliquer sur le bouton Aide pour plus d’informations sur le site développeurs de Google.

Exemple pour le Filtre par catégorie :

Cliquer sur le bouton Aide pour plus d’informations sur le site développeurs de Google.








Exemple pour le Filtre sur intervalle graphique :

Cliquer sur le bouton Aide pour plus d’informations sur le site développeurs de Google.

Exemple pour le Filtre sur intervalle numérique :

Exemple pour le Filtre sur chaîne de caractères :

Cliquer sur le bouton Aide pour plus d’informations sur le site développeurs de Google .

7.4.4. Insérer >Autres objets

Noter que tous les “Autres objets” que vous pouvez insérer dans une application Dashboard Google ne sont pas des objets provenant de Google mais des objets développés par Click&DECiDE.

7.4.4.1. Insérer >Autres objets > Etiquette

Utiliser cette commande si vous souhaitez insérer une Etiquette dans un Dashboard.xgc.








Cliquer sur l’icône Propriétés pour modifier le texte statique ou le titre à afficher.

7.4.4.2. Insérer >Autres objets > Champ de saisie

Utiliser cette commande si vous souhaitez insérer un Champ de saisie dans un Dashboard.xgc.

Sélectionner le type du champ de saisie parmi : Texte (zone de saisie dans laquelle vous pouvez saisir une valeur dynamique en exécutant le Dashboard), Cases à cocher, Bouton Radio, champ Date, champ Horodate, champ Heure, champ Mois et champ Semaine.








Sélectionner le type du champ de saisie dans la zone « Type ».

Définir, si besoin, le ou les Paramètre(s) qui doivent être mis à jour (voir paragraphe “6.2.2 Définir les Paramètres à mettre à jour”)

Voir l’exemple Other Controls Sample.xgc in the BAI Demonstration Menu in the Web Portal: Dashboards > Other Dashboard Samples > Dashboard Samples:

7.4.4.3. Insérer >Autres objets > Bouton

Utiliser cette commande si vous souhaitez insérer un Bouton dans un Dashboard.xgc.

Cliquer sur l’icône Propriétés pour modifier le Texte à afficher dans ce bouton.








Définir, si besoin, le(s) Paramètre(s) à actualiser (voir “6.2.2 Définir les Paramètres à actualiser”) Définir, si besoin, le(s) objet(s) qui doivent être mis à jour (voir “6.2.3 Définir les Objets à mettre à jour”) Définir, si besoin, l’URL à exécuter et le mode d’exécution de cette URL (voir “6.2.4 Définir l’URL à exécuter”)

7.4.4.4. Insérer >Autres objets > Liste

Utiliser cette commande si vous souhaitez insérer une zone Liste dans un Dashboard.xgc.

Cliquer sur l’icône Propriétés pour modifier la Source qui va alimenter cette Liste:

Sélectionner le Type de sélection parmi la liste proposée : Multiple ou Simple.

Renseigner la zone Source. Cela peut être l’URL d’une requête comme décrit pour la Méthode d’accès en temps réel, ou l’URL d’un fichier .GCD comme décrit pour la Méthode d’accès par fichier Google Data Table, ou une URL de type Google Doc comme décrit pour la Méthode d’accès par un Google Drive. Vous avez aussi un moyen plus facile d’alimenter la zone Source lorsque le nombre de valeur est faible, avec 2 alternatives :

Vous pouvez saisir directement les valeurs à utiliser séparées par un point-virgule, si les valeurs à afficher sont les mêmes. Par exemple si vous voulez afficher une liste d’années et si l’année peut être utilisée directement comme critère, vous pouvez saisir par exemple : 2013;2014;2015;2016;2017 dans la zone Source.

Vous pouvez aussi des valeurs en utilisant 2 arguments : le premier sera la valeur à utiliser dans le critère par le biais d’un paramètre, le second sera la valeur à afficher dans l’objet « Liste » dans l’Application Dashboard.








Exemple: 1|Elément1;2|Elément 2;3|Elément3 La zone “Liste” affichera verticalement les valeurs Elément1, Elément2 et Elément3

Le paramètre mis à jour par la valeur sélectionnée dans cette liste recevra 1 si Elément1 a été sélectionné, 2 si Elément2 a été sélectionné etc. et recevra 1;3 si Elément1 et Elément3 ont été sélectionnés (si valeur Multiple est activé).

Définir la zone Requête Source, si besoin, et seulement si la zone Source est alimentée par une URL. (Voir Méthode d’accès en temps réel ou Méthode d’accès par fichier Google Data Table ou Méthode d’accès par un Google Drive).


7.4.4.5. Insérer >Autres objets > Document

Utiliser cette commande si vous souhaitez insérer un Document dans un Dashboard.xgc.

Cet objet a été conçu pour être capable d’insérer un résultat au format PDF ou un Cube (version 13 seulement) dans une application Google Dashboard. Noter que, pour un Cube, le format de sortie dynamique HTML peut seulement être exécuté depuis le navigateur Internet Explorer mais pas depuis Chrome ni Firefox, qui donnerait une image statique du Cube.

Cliquer sur l’icône Propriétés pour modifier la Source qui doit alimenter ce document :

Dans l’exemple ci-dessus la Source est une URL appelant le rapport « Demo MultiCriteria » avec un format de sortie PDF.

Il est aussi possible d’appeler un Cube, (version 13 seulement) mais avec résultat seulement en HTML sous le navigateur Internet Explorer.

Voir l’exemple suivant Dashboard Application (Dashboard GC Main.xgc) : sélectionner un Vendeur dans la table en haut à droite et cliquer sur le bouton “Call Document and Graph Screen” pour voir le Dashboard ainsi appelé (Dashboard GC sub.xgc) qui affiche un rapport au format PDF :








7.4.4.6. Insérer >Autres objets > Image

Utiliser cette commande si vous souhaitez insérer une Image dans un Dashboard.xgc.

Cliquer sur l’icône Propriétés pour modifier la Source qui alimentera cette image :

The browse.png, par exemple, est localisé dans le répertoire par défaut :

C:\Program Files\Click and DECiDE\dvweb\App_Themes\Metro\Images (pour le thème Metro)

D’autres images existent, sans dépendre du thème choisi, dans :

C:\Program Files\Click and DECiDE\dvweb\Scripts\cnd.ebis\img

Vous pouvez sélectionner toute autre destination pour vos propres images.


7.4.4.7. Insérer >Autres objets > Sélection sur liste triée

Utiliser cette commande si vous souhaitez insérer une Sélection sur liste triée dans un Dashboard.xgc.

Cet objet est assez similaire à un objet « Liste » mais offre plus de possibilités :

- La liste peut être Extensible : un bouton apparait : ici le titre « … » a été remplacé par ce texte par le bouton « Avancés », zone Texte :

Et affiche la liste quand vous cliquez sur le bouton en mode exécution :








L’utilisateur peut changer l’ordre des éléments proposés au moment de l’exécution du Dashboard.

- La liste peut être Non Extensible et apparait directement comme une liste, et pas comme un bouton :

- L’utilisateur peut changer l’ordre des éléments proposés au moment de l’exécution du Dashboard:

Voir l’exemple List Sorted Selection Sample.xgc, dans lequel, en utilisant un, deux ou trois objets, plus un objet Table, vous pouvez créer et personnaliser vos propres tableaux-croisés.

Cliquer sur l’icône Propriétés pour changer la Source qui va alimenter cet objet Sélection sur liste triée :

Entrer un Nom pour cet objet.

Définir le Type parmi Extensible ou Non Extensible.








Définir la Source : dans cet exemple List Sorted Selection Sample.xgc, nous avons construit un tableau-croisé avec 3 objets Sélection sur liste triée : un pour les dimensions en Lignes, un pour les dimensions en Colonnes et un pour les Mesures. La zone Source est alimentée avec une liste de champs ayant un premier argument cache et un second argument étant la partie visible du nom du champ.

Le contenu est ainsi pour l’objet Rows(s) (éléments à afficher en lignes) :

C|Area;G|State;H|StateName;F|City;E|Customer;B|Salesman;L|Family;K|CategoryName;J|Product

Si vous ajoutez dans la liste en ligne visible les noms de champs Area et City, alors le SQL alimentant l’objet Table remplacera Area et City par SELECT C, F, utilisant les paramètres (un paramètre pour les champs étant en ligne, un paramètre pour les champs étant en colonne et un paramètre pour les champs étant dans la zone des mesures.

Le contenu est ainsi pour l’objet Column(s) (éléments à afficher en colonnes) :

C|Area;G|State;H|StateName;F|City;E|Customer;B|Salesman;L|Family;K|CategoryName;J|Product

Le contenu est ainsi pour l’objet Measure(s) (éléments numériques à afficher en mesures) :

Sum(P)|Sum Amount;sum(M)|Sum Quantity;Avg(P)|Avg Amount;Avg(M)|Avg Quantity;Min(P)|Min Amount;Min(M)|Min Quantity;Max(Amount)|Max Amount;Max(Quantity)|Max Quantity

La zone Source pour l’objet Table contient l’URL suivante : (Méthode d’accès sur Google Data Table):

/dvweb/menus/query.ashx?__ma=BAI+Demonstration&__mi=2558&__rp=Datamart%2fList+Sorted+Sample.gcd

et la zone Requête Source contient ce SQL :

SELECT {CnD:"P_Column"}, {CnD:"P_Measure"} Where year(D)=[P_Year] Group by {CnD:"P_Column"} Pivot {CnD:"P_Pivot"} Format {CnD:"P_Measure", sep:" '#,##0', "} '#,##0'

Les paramètres P_Column, P_Measure et P_Pivot vont remplacer les noms des colonnes sélectionnées par leurs lettres respectives, comme dans cet exemple :

Si l’objet Row(s) contient les champs Area et Salesman :

et si l’objet Column(s) contient le champ Family :

et si l’objet Measure(s) contient les champs Sum(Amount) and Sum(Quantity):








alors le SQL alimentant l’objet Table sera traduit en :

SELECT C,B,SUM(P),SUM(M) Where year(D)=[P_Year] Group by C,B Pivot L Format {SUM(P),SUM(M), sep:" '#,##0', "} '#,##0'

Vous pouvez vérifier les valeurs des Paramètres en utilisant la touche Ctrl + un double clic sur le fond du Dashboard lors de l’exécution :

Puis, cliquer sur le bouton Update qui va mettre à jour l’objet Table :

Et voir le résultat :

7.4.5. Insérer >Autres objets > Tableau-croisé

Utiliser cette commande si vous souhaitez insérer un Tableau-croisé dans un Dashboard.xgc. Ce nouvel objet depuis la version 15 (64-bit) remplace l’objet Cube basé sur les Web Components 2003 de Microsoft,








limité au navigateur Internet Explorer et limité à la compatibilité avec Windows 64-bit et aussi bientôt plus supportés par Microsoft. Un tableau-croisé fonctionne aussi sous les navigateurs Google Chrome ou Mozilla Firefox.

7.4.5.1. Ajouter un objet Tableau-croisé

Cliquer d’abord sur l’icône Propriétés et coller dans la zone Source le lien URL dont vous avez besoin, par exemple l’URL utilisant les données du fichier Sales.gcd :


Valider avec OK. Cliquer maintenant sur l’icône d’édition du tableau-croisé :

Par exemple, les données provenant du lien vers le fichier sales.gcd depuis le répertoire Datamart, on peut afficher le tableau-croisé suivant : Area en lignes, Vendor en colonnes et Total comme mesure.

Nouveau depuis la version 15.2.1: quand vous ajoutez une mesure, vous pouvez aussi définir, si besoin, un

champ de comparaison en utilisant l’icône :




http://localhost/dvweb/menus/query.ashx?__ma=BAI+Demonstration&__mi=2558&__rp=Datamart%2fSales.gcd





Donner un nom à ce champ de comparaison, et spécifier une fonction parmi celles proposées :

Valider. Vous obtiendrez un autre champ supplémentaire affichant la différence, la différence entière ou le pourcentage selon la valeur de la colonne de la dimension précédente pour la même mesure :

Aucune valeur n’est affichée dans la colonne « Diff.% » pour la première année (2014 dans cet exemple), parce qu’il n’y a pas d’année précédente pour cette dimension. Mais “Diff.%” peut être calculé pour les années 2015 et 2016.

Nouveau depuis la version 15.2.1: vous pouvez maintenant ajouter plusieurs mesures. Si vous ajoutez une seconde mesure, vous pouvez utiliser la fonction Somme(X) / Somme(Y) pour obtenir le résultat de Somme(Mesure1) / Somme(Mesure2). Cette fonction Somme(X) / Somme(Y) sera automatiquement appliquée aux 2 premiers champs des mesures, puis au second couple de champs, s’ils existent, etc.

Attention : En utilisant la fonction Somme(X) / Somme(Y), vous ne pouvez pas ajouter, en même temps, un champ de comparaison.

Comment supprimer un champ de comparaison ? Cliquer sur l’icône , supprimer le nom et cliquer n’importe où. Exemple utilisant 2 champs dans les mesures (Champs Total et Quantité) :








Elargir le tableau-croisé pour voir un maximum de colonnes horizontalement.

Utiliser l’icône pour basculer le Total et la Quantité horizontalement ou verticalement :

Cliquer sur OK pour valider votre configuration et enregistrer votre Dashboard.

7.4.5.2. Exécuter un Tableau-croisé

Cliquer sur Fichier > Exécuter (et Enregistrer ce tableau-croisé) pour voir le résultat comme un utilisateur final via le Portail Web. Exemple avec Total par Vendeur et par Région (Area) :

Utiliser la barre de défilement horizontale si besoin pour voir la colonne Totals à droite.

Utiliser la barre de défilement verticale si besoin pour voir la colonne Totals en bas.

Utiliser l’icône Barre d’outils si vous souhaitez passer en mode Plein écran. En mode plein écran vous

pouvez aussi utiliser l’icône « Loupe » et l’icône Outils Tableau-croisé . Cet icône n’est affiché que si l’option “Editable” était cochée dans l’éditeur du tableau-croisé.








7.4.5.3. Modifier les dimensions et mesures d’un tableau-croisé

Utiliser l’icône Outils du tableau-croisé si vous souhaitez modifier dynamiquement la présentation du tableau-croisé. La mesure « Quantity » peut par exemple être rajoutée :

Dans l’exemple ci-dessus on a déplacé la dimension Vendor sous la dimension Area dans la zone des dimensions en lignes, et rajouté la dimension “Date Year” dans la zone des dimensions en colonnes, et rajouté la mesure Quantity dans la zone des mesures.

7.4.5.4. Modifier la présentation du tableau-croisé

Sélectionner dans la liste des types de tableau-croisé la présentation désirée selon ces propositions :

Table avec Histogrammes :

Ce type de tableau-croisé va rajouter des barres en Histogramme dans chaque cellule numérique (sauf pour les totaux) selon les valeurs affichées :

Gradient coloré global

Ce type de tableau-croisé va rajouter un gradient coloré global dans chaque cellule numérique de la mesure actuelle selon les valeurs affichées. Un autre gradient de couleur est appliqué pour les totaux par lignes et par colonnes qui sont de plus affichés en gras.








Gradient coloré en lignes

Ce type de tableau-croisé va rajouter un gradient coloré global dans chaque cellule en lignes numérique de la mesure actuelle selon les valeurs affichées horizontalement. Un autre gradient de couleur est appliqué pour les totaux par lignes et par colonnes qui sont de plus affichés en gras.

Gradient coloré en colonnes

Ce type de tableau-croisé va rajouter un gradient coloré global dans chaque cellule en colonnes numérique de la mesure actuelle selon les valeurs affichées verticalement. Un autre gradient de couleur est appliqué pour les totaux par lignes et par colonnes qui sont de plus affichés en gras.








Graphe de type Courbes

Ce type de tableau-croisé va modifier la vue du tableau-croisé en appliquant une vue graphique de type Graphe en courbes. Note: Ce graphique (et les 2 suivants décrits plus loin) ne peuvent pas être modifiés si vous utilisez cette option en tant qu’utilisateur final mais peuvent être modifiés si vous êtes l’Auteur de ce tableau-croisé. Dans ce cas double-cliquer sur l’aperçu du graphe pour accéder à l’éditeur des graphes :

Graphe de type Barres

Ce type de tableau-croisé va modifier la vue du tableau-croisé en appliquant une vue graphique de type Graphe en barres.








Graphe de type Aires

Ce type de tableau-croisé va modifier la vue du tableau-croisé en appliquant une vue graphique de type Graphe en Aires.

7.4.5.5. Modifier la présentation d’un tableau-croisé

Sélectionner dans la liste des types de Mesures la présentation selon la liste proposée :








Somme (type de mesure par défault) : affichera les valeurs avec 2 décimales et le séparateur des milliers.

Somme entière : affichera les valeurs sans décimales mais avec le séparateur des milliers.

Comptage : affichera le nombre d’occurrences de la valeur dans chaque cellule.








Comptage Distinct: affichera le nombre d’occurrences distinctes des valeurs dans chaque cellule. Si on remplace le champ Total dans les mesures avec le champ “State” (Etat), on aura le nombre distinct d’états où chaque vendeur a vendu quelque chose pour chaque année.

Liste Distincte : affichera le nombre distinct d’occurrences de la valeur dans les cellules. Le même exemple précédent affichera le nom distinct des d’états au lieu du nombre distinct de valeurs trouvées :

Moyenne: affichera la moyenne des valeurs dans chaque cellule. Dans l’exemple précédent, en utilisant de nouveau le champ Total comme mesure, on aura :

Somme(X) / Somme(Y): cette fonction nécessite 2 champs dans la zone Mesures. Le résultat sera la division entre la Somme du premier champ (Total) et la somme du second champ (Quantity):








Si plus d’un couple de champs numériques sont ajoutés, cette fonction sera appliquée au second couple de valeurs et aux suivants etc.

Somme en pourcentage du Total: affichera la valeur en pourcentage dans chaque cellule comparée à la somme du Total général (incluant toutes les lignes et toutes les colonnes) :

Somme en pourcentage de la ligne : affichera la valeur en pourcentage dans chaque cellule comparée à la somme du Total par ligne (incluant toutes les lignes) :








Somme en pourcentage de la colonne : affichera la valeur en pourcentage dans chaque cellule comparée à la somme du Total par colonne (incluant toutes les colonnes) :

Comptage pourcentage du Total : affichera la valeur en pourcentage dans chaque cellule comparée à la somme du Comptage général (incluant toutes les lignes et toutes les colonnes) :

Comptage pourcentage de la ligne : affichera la valeur en pourcentage dans chaque cellule comparée à la somme du Comptage par ligne (incluant toutes les lignes) :








Comptage pourcentage de la colonne : affichera la valeur en pourcentage dans chaque cellule comparée à la somme du Comptage par colonne (incluant toutes les colonnes) :

7.4.5.6. Gérer des paramètres dans un tableau-croisé

Vous pouvez définir des paramètres dont les valeurs seront actualisées en cliquant d’importe où dans le résultat du tableau-croisé. Pour cela, ajouter d’abord les paramètres nécessaires par la commande Editer > Paramètres :

Par exemple, dans ce tableau-croisé alimenté par le fichier de données “sales.gcd”, on va rajouter 3 paramètres, ceux utilisés par le rapport “Demo_Multicriteria” dans le fichier projet Click and DECiDE Web Demonstration.wfv :

AREA_PARAM pour la dimension Area (Région)

SALNAME_PARAM pour la dimension Vendor (Vendeur)

P_DATE pour la dimension Date Year (Année)








Ensuite, cliquer sur l’icône des Propriétés de l’objet Tableau-Croisé :

Cliquer maintenant sur l’icône à la droite de la zone “Paramètre” et ajouter le premier paramètre AREA_PARAM :

Cliquer sur la liste déroulante de la zone Nom et sélectionner le paramètre AREA_PARAM.

Vérifier le type Type (Chaîne par défaut)

Cliquer sur le type d’initialisation et sélectionner Dimension Sélectionnée:

Entrer la valeur d’initialisation : C’est le nom de la colonne correspondant au paramètre :








Valider en cliquant sur “Appliquer” et rajouter aussi les 2 autres paramètres SALNAME_PARAM et P_DATE:

Noter que le nom de la dimension dans la zone Valeur est lié à chaque paramètre (sensible à la casse).

Enregistrer er exécuter le Tableau-croisé et vérifier les valeurs données par ces 3 paramètres selon les clics de souris.

Pour éviter d’avoir trop de données dans les exemples suivants, appliquer un filtre pour n’avoir que les régions « Atlantic » et « Central » : pour cela double-cliquer sur la dimension Area et, dans la fenêtre obtenue, conserver ces deux régions :

Les résultats sont alors limités aux régions sélectionnées, modifier le type de valeurs avec « Somme entière » :








Dans l’écran ci-dessus, si vous ne sélectionnez rien, tous les paramètres doivent être définis à IGNORE. Faire un Ctrl+Double clic pour voir la valeur des paramètres :

Maintenant, cliquer sur la cellule contenant la valeur CENTRAL dans la colonne Area dans le résultat du tableau-croisé. Toutes les données dans le cadre rouge seront appliquées aux paramètres, donc la région CENTRAL et tous ses vendeurs affichés, pour les 3 années :








Vérifier de nouveau les valeurs des paramètres : le AREA_PARAM contient CENTRAL, les 3 vendeurs sont dans le SALNAME_PARAM mais le P_DATE est ignoré puisque toutes les années sont concernées (Ignore par défaut).

Maintenant; cliquer sur la cellule de Karen Walker dans le résultat du tableau-croisé. Toutes les données dans le cadre rouge seront appliquées aux paramètres, donc la région Atlantic, et uniquement le vendeur Karen Walker, pour les 3 années :

Vérifier de nouveau les valeurs des paramètres : le AREA_PARAM contient ATLANTIC, le vendeur Karen Walker est appliqué à SALNAME_PARAM mais le P_DATE est ignoré puisque toutes les années sont concernées (Ignore par défaut).

Maintenant; cliquer sur la cellule contenant “56” sur la ligne du vendeur Tim Rosenberg dans le résultat du tableau-croisé. Toutes les données dans le cadre rouge seront appliquées aux paramètres, donc la région ATLANTIC, et uniquement le vendeur Tim Rosenberg, et seulement pour l’année 2015 (voir image ci-dessous) :








Vérifier de nouveau les valeurs des paramètres : le AREA_PARAM contient ATLANTIC, le vendeur Tim Rosenberg appliqué à SALNAME_PARAM mais le P_DATE a cette fois la valeur pour l’année 2015.

Maintenant; cliquer sur la cellule contenant la valeur “485” dans la colonne verticale des Totaux dans le résultat du tableau-croisé. Toutes les données dans le cadre rouge seront appliquées aux paramètres, donc la région CENTRAL, et uniquement le vendeur John Brown, pour les 3 années :

Vérifier de nouveau les valeurs des paramètres : le AREA_PARAM contient CENTRAL, le vendeur John Brown est appliqué à SALNAME_PARAM mais le P_DATE est ignoré (aucune année précise n’a été sélectionné).

Appeler de manière dynamique un état depuis un tableau-croisé :

Maintenant, on peut rajouter un lien URL dans ce tableau-croisé qui exécutera le rapport “Demo_Multicriteria”. Dans le Portail Web le bouton “Partager” propose par défaut l’URL suivante si vous sélectionnez les 3 paramètres Area, Salesman et Date pour cet état, sans préciser de valeurs :

/dvweb/Menus/ShowParameters.aspx?__ma=BAI+Demonstration&__mi=2316&AREA_PARAM=&SALNAME_PARAM=&P_DATE=&__f=PDF&__e=0

On peut modifier cette URL comme ci-dessous pour ne pas afficher les paramètres mais directement exécuter le rapport depuis ce tableau-croisé. Pour cela sélectionner les options suivantes via le bouton Partager > Lien vers cette page Web:








/dvweb/Menus/Display.ashx?__ma=BAI+Demonstration&__mi=2316&AREA_PARAM=&SALNAME_PARAM=&P_DATE=&__f=PDF&__e=0 (noter que le &__e=0 final n’est pas nécessaire ici).

Cliquer sur l’icône Propriétés du tableau-croisé et coller cette URL dans la zone “Exécute l’URL” :

Définir le mode d’exécution de l’URL « dans une nouvelle fenêtre ». Valider et exécuter le tableau-croisé :

Si vous cliquez par exemple sur la valeur 1.117.396 pour Diane Meyer (Région ATLANTIC et Année 2016) le rapport “Demo Multi Criteria” est immédiatement exécuté et affichera le résultat correspondant aux paramètres suivants :

Le rapport sera similaire à celui-ci :








Alternative: au lieu de saisir les noms des dimensions dans la zone valeur, vous pouvez écrire en caractères minuscules les mots “row” (pour ligne) ou “col” (pour colonne). Dans ce cas la valeur donnée aux paramètres sera une concaténation de chaînes des dimensions affichées dans la ligne ou la colonne concernée.

L’option “row” va renvoyer la concaténation des dimensions en ligne, chaque dimension étant séparée par un tiret.

L’option “col” va renvoyer la concaténation des dimensions en colonne, chaque dimension étant séparée par un tiret.

Bien sûr ceci est utile seulement si on a au moins 2 dimensions en lignes ou 2 dimensions en colonnes.

Cette alternative vous permet de voir la valeur complète de toutes les dimensions en lignes ou en colonne au lieu d’une valeur unique de la cellule sélectionnée dans un tableau-croisé.

Exemple: remplacer “Area” avec “row” et “Vendor” avec “row” dans cette fenêtre :

Valider et supprimer le “Exécute l’URL” car les nouvelles valeurs données par le paramètre “row” ne peut pas être utilisé dans le rapport précédent “Demo_Multicriteria”, mais aurait pu fonctionner avec un rapport dont les paramètres attendent comme valeur cette chaîne concaténée, avec un tiret comme séparateur.

Exécuter de nouveau le tableau-croisé et vérifier les valeurs données à chaque paramètre selon l’endroit où vous cliquez:








Sélection d’un total dans une cellule :

Dans l’exemple ci-dessus, si on clique sur la valeur “240.590” et si on vérifie ensuite la valeur des paramètres, on aura “ATLANTIC-Tim Rosenberg” pour le AREA_PARAM, “ATLANTIC-Tim Rosenberg” pour le SALNAME_PARAM, et “2016” pour le P_DATE.

Sélection d’un Vendeur dans une cellule :

Dans l’exemple ci-dessus, si on clique sur la valeur “Tim Rosenberg” et si on vérifie ensuite la valeur des paramètres, on aura “ATLANTIC-Tim Rosenberg” pour le AREA_PARAM, “ATLANTIC-Tim Rosenberg” pour le SALNAME_PARAM, et “IGNORE” pour le P_DATE.

Sélectioon d’une region dans une cellule :

Dans l’exemple ci-dessus, si on clique sur la valeur “ATLANTIC” et si on vérifie ensuite la valeur des paramètres, on aura “ATLANTIC-Diane Meyer;ATLANTIC-Karen Walker;ATLANTIC-Tim Rosenberg” pour le AREA_PARAM, chaque valeur étant séparée par un point-virgule. On aura aussi “ATLANTIC-Diane Meyer;ATLANTIC-Karen Walker;ATLANTIC-Tim Rosenberg” pour le SALNAME_PARAM, et “IGNORE” pour le P_DATE.








7.4.5.7. Filtrer les données dans un Tableau-croisé

Quand vous exécutez un tableau-croisé, vous pouvez appliquer des filtres pour ne pas afficher toutes les

données. Pour cela cliquez simplement sur l’cône Outils du tableau-croisé, puis double-cliquez sur la dimension désirée. Une fenêtre apparait avec les valeurs pour cette dimension.

Vous pouvez alors désélectionner certaines valeurs, ou effacer toutes les valeurs puis en sélectionner certaines ou encore resélectionner toutes les valeurs.

Pour valider, quitter simplement cette fenêtre en cliquant ailleurs sur le fond du tableau-croisé.

Exemple :

Désélectionner les valeurs nécessaires ou cliquer sur “None” pour tout désélectionner ou sur “Select All” pour tout sélectionner…

Cliquer simplement sur la fenêtre du tableau-croisé pour appliquer le filtre modifié:








Noter que la sélection du filtre n’est pas sauvée quand vous quittez le tableau-croisé. C’est juste un moyen temporaire pour rechercher et comparer des données pertinentes quand vous analyses le résultat.

7.5. La commande Aide

Cette commande appelle et ouvre le manuel actuel qui est en ligne (version anglaise). La version française peut être demandée à votre fournisseur ou obtenue sur le site web en français de Click&DECiDE. La date d’édition est affichée en première page, car il peut y avoir des mises à jour périodiquement.

Le nom du fichier appelé par ce bouton pour les versions 13 ou 15 : ClicknDECiDE_BAI_Google_Chart_User_Guide_V2013.pdf

http://www.clickndecide.com/sites/default/files/assets/files/resources/clickndecide_bai_google_chart_user_guide_v2013.pdf

Depuis Mai 2016 et depuis la version 16 et supérieure, ce fichier aide devient : ClicknDECiDE_BAI_Google_Chart_User_Guide_64_1.pdf

http://www.clickndecide.com/sites/default/files/assets/files/resources/clickndecide_bai_google_chart_user_gui

de_64_1.pdf

Si vous utilisez actuellement une version 2015, telle que V15.1.0 ou V15.2.1, vous pouvez utiliser le lien ci-dessus pour ouvrir ce fichier, plus adapté à cette version 2015.






http://www.clickndecide.com/sites/default/files/assets/files/resources/clickndecide_bai_google_chart_user_guide_64_1.pdf

http://www.clickndecide.com/sites/default/files/assets/files/resources/clickndecide_bai_google_chart_user_guide_64_1.pdf





8. Propriétés avancées

La plupart des objets qui peuvent être insérés dans une application Google Dashboard proposent un bouton “Avancés” qui sera décrit ici seulement une fois pour les parties communes à tous les objets :

8.1. Propriétés avancées de base et communes

La plupart des objets qui peuvent être insérés afficheront les Propriétés avancées communes suivantes :

Cliquer sur l’icône Propriétés d’un objet, exemple le Bouton :

Cliquer sur le bouton Avancés :

Ou, pour un graphique Google standard, la dialogue commune « Avancés » peut afficher ceci :

La plupart des boutons Avancés affichent des options standard comme celles affichées dans les exemples ci-dessus, mais parfois la liste des options proposées peut contenir plus d’options spécifiques à l’objet.

8.1.1. Titre

C’est le Titre pour n’importe quel objet qui peut être un texte libre.

8.1.2. Hauteur (Height)

C’est la taille en hauteur en pixels (Automatiquement mis à jour si vous modifiez la hauteur avec la souris).








8.1.3. Largeur (Width)

C’est la taille en largeur en pixels (Automatiquement mis à jour si vous modifiez la largeur avec la souris).

8.1.4. Couleur du texte

C’est la couleur du Texte que vous pouvez personnaliser. Cliquer sur l’icône de droite pour accéder à l’éditeur des couleurs. La couleur choisie et son code couleur apparaitront dans la zone Couleur du texte. Supprimer ce code pour supprimer la couleur.

8.1.5. Couleur de fond

C’est la couleur de fond que vous pouvez personnaliser. Cliquer sur l’icône de droite pour accéder à l’éditeur des couleurs. . La couleur choisie et son code couleur apparaitront dans la zone Couleur du texte. Supprimer ce code pour supprimer la couleur.

8.1.6. Editeur de couleur

Sélectionner la couleur désirée avec la souris et valider avec OK. Vous pouvez retrouver le mode transparent (Sans couleur) en utilisant la case avec la croix rouge en bas à droite.

8.1.7. Police

Utiliser cette option Police pour modifier certains attributs tels que :








8.1.7.1. Famille

Sélectionner une Famille de police dans la liste proposée, ou saisir manuellement une famille qui n’apparait pas dans cette liste :

8.1.7.2. Taille

Sélectionner une Taille de police dans la liste proposée, ou saisir manuellement une taille qui n’apparait pas dans cette liste :

8.1.7.3. Style

Sélectionner un style de police dans la liste proposée :

8.1.7.4. Epaisseur

Sélectionner une épaisseur de caractères dans la liste proposée :








Cliquer sur OK, Le résumé des attributs de police apparaitra ainsi :

Puis cliquer encore sur OK, et vérifier le résultat :

8.1.8. Bordure

Utiliser cette option Bordure pour modifier certains attributs de bordure comme :

8.1.8.1. Style

Sélectionner un style de bordure dans la liste propose :

8.1.8.2. Largeur

Entrer une largeur de bordure comme un nombre, une unité optionnelle en « pixels » (px) sera ajoutée automatiquement après validation :

8.1.8.3. Couleur

Sélectionner une couleur de bordure en cliquant sur l’icône de droite pour accéder à l’Editeur de couleur. La couleur choisie et son code couleur apparaitront dans l’éditeur des couleurs. Supprimer ce code pour enlever cette couleur.








8.1.8.4. Arrondi

Sélectionner une valeur d’arrondi dans la liste proposée ou entrer une valeur qui n’apparait pas dans cette liste. Cette valeur peut être un nombre entier (px) ou un pourcentage (%).

Cliquer sur OK deux fois pour vérifier le résultat :

Le résumé des attributs de Bordure apparaitront ainsi une fois validés :

8.1.9. Ombre

Utiliser cette option Ombre pour modifier certains attributs d’ombre comme :

8.1.9.1. Horizontale

Utiliser cette option horizontale pour ajouter un effet d’ombre horizontalement. Entrer un nombre de pixels pour la position de cette ombre horizontale. Des valeurs négatives sont autorisées. Une valeur est requise pour définir une ombre.








8.1.9.2. Verticale

Utiliser cette option Verticale pour ajouter un effet d’ombre verticalement. Entrer un nombre de pixels pour la position de cette ombre verticale. Des valeurs négatives sont autorisées. Une valeur est requise pour définir une ombre.

8.1.9.3. Flou

Utiliser cette option de Flou pour modifier la taille du flou. Entrer un nombre de pixels pour cet effet de flou. Valeur optionnelle pour une ombre.

8.1.9.4. Taille

Utiliser cette option de taille pour modifier la propagation de l’ombre. Entrer un nombre de pixels pour cette taille. Valeur optionnelle pour une ombre.

8.1.9.5. Couleur

Utiliser cette option de couleur pour modifier la couleur de l’ombre. Optionnel pour une ombre.

Cliquer deux fois sur OK et vérifier le résultat :








Le résumé des attributs de l’ombre apparaissent ainsi une fois validés :

8.1.10. Visible

Utiliser cette option Visible pour masquer ou afficher n’importe quel objet dans le Tableau de bord. La valeur par défaut est « Vraie » (true…).

Cliquer sur le bouton affichant true… pour modifier cette valeur. Vous pouvez saisir false (Faux) pour toujours masquer cet objet.

Parfois on peut vouloir cacher ou rendre visible un objet selon certaines conditions. Un exemple existe dans le fichier Dashboard GC sub.xgc localisé dans le répertoire suivant :

//BAI Demonstration/Dashboards/Other Dashboard Samples/Dashboard Samples

Cet exemple montre 2 graphes au même endroit, et 2 boutons permettent de les rendre visibles ou invisibles.

Dans le bouton Bar Chart, le paramètre P_Chart est mis à jour ainsi :

{P_Chart={"value":"Bar"}}

L’action va mettre à jour le graphe nommé “customer_bar_chart”.

Dans le bouton Pie Chart, le paramètre P_Chart est mis à jour ainsi :

{P_Chart={"value":"Pie"}}

L’action va mettre à jour le graphe nommé “customer_pie_chart”.

Dans le graphe customer_pie_chart, L’option « Visible » que vous pouvez voir grâce au bouton « Avancés » contient cette commande :

env.getParameterValue("P_Chart")=="Pie"








Dans le graphe customer_bar_chart, l’option « Visible » que vous pouvez voir grâce au bouton « Avancés » contient cette commande :

env.getParameterValue("P_Chart")=="Bar"

Lors de l’exécution de l’application Dashboard, le paramètre P_Chart a la valeur par défaut suivante, définie dans la commande Editer> Paramètre:

{P_Chart={"value":"Bar"}}

Ainsi, le graphe “Bar Chart” est affiché par défaut puisque la condition dans la zone “Visible » est définie à :

env.getParameterValue("P_Chart")=="Bar"

Quand l’utilisateur clique sur le bouton Pie Chart, le paramètre P_Chart prend la valeur {P_Chart={"value":"Pie"}} et le Pie Chart est mis à jour.

Ainsi, le graophe “Pie Chart” est ainsi affiché puisque la condition dans la zone “Visible » est définie à :

env.getParameterValue("P_Chart")=="Pie".

8.2. Objet ayant des options avancées sur les données

Tous les objets qui peuvent recevoir des données contiennent jusqu’à 5 options spéciales non disponibles pour les objets qui ne sont pas mis à jour par des données : cela concerne surtout les objets Graphiques Google mais aussi d’autres objets tels que Question ou Liste :

8.2.1. Barre d’outils

Cette option permet d’afficher ou masque l’icône Barre d’outils , par défaut visible dans le coin supérieur gauche d’un objet Table ou Graphique Google. Cette icône permet à l’utilisateur d’obtenir un mode Plein Ecran. La position de cette icône peut être définie à Gauche, Droite ou Aucune (Masquée).

8.2.2. Cache Client

Cette option permet de définir un Cache de connexion, la valeur par défaut étant de 20 minutes, et rend plus rapide le temps de réponse lors de l’exécution d’une application Dashboard. Si vous sélectionnez par exemple la région WEST et l’année 2016 et obtenez le résultat en 15 secondes la première fois, puis, plus tard en sélectionnant de nouveau les mêmes valeurs, le temps de réponse sera immédiat. Vous pouvez modifier cette valeur si besoin, ou mettre zéro si aucun cache n’est souhaité.

8.2.3. Script

Cette option permet de définir un script spécifique pour améliorer votre Application Dashboard. Voici ci-dessous quelques scripts les plus utilisés, utiles à connaitre : (langage Java Script pour les connaisseurs)








Syntaxe du Script (sensible à la casse) Explication

Fonctions

env.getParameterValue("ParamName")

Renvoie la valeur du paramètre

Table avec des barres horizontales dans les lignes (la table doit avoir la propriété allowHtml = true)

env.tableBarFormat(x, {width:y})

Affiche une barre horizontale dans toutes les lignes d’une table pour la colonne concernée (position x et taille y (en pixels).

Table avec couleur opaque pour valeurs et arrière-plan (la table doit avoir la propriété allowHtml = true)

env.tableColorFormat(x, {range: {from:null, to:500000,

color:"red", bgcolor:"#cee5ce"}});

Affiche le résultat et l’arrière-plan avec des couleurs opaques dans toutes les lignes d’une table pour la colonne concernée (position x), selon une condition.

env.tableColorFormat(x, {range:[{from:null, to:20000,

color:"red", bgcolor:"cee5ce"}, {from:20000, to:40000,

color:"#007f3f"} , {from:40000, to:null,

color:"blue"}]});

Affiche le résultat et l’arrière-plan avec des couleurs opaques dans toutes les lignes d’une table pour la colonne concernée (position x), selon plusieurs conditions.

Table avec couleur dégradée pour valeurs et arrière-plan (la table doit avoir la propriété allowHtml = true)

env.tableColorFormat(x, {gradientrange:{from:800000,

to:null, color:"blue", fromBgColor:"yellow",

toBgColor:"green"}});

Affiche le résultat et l’arrière-plan avec des couleurs dégradées dans toutes les lignes d’une table pour la colonne concernée (position x), selon une condition.

env.tableColorFormat(x, {gradientrange:[{from:800000,

to:null, color:"red", fromBgColor:"yellow",

toBgColor:"red"}, etc..]});

Affiche le résultat et l’arrière-plan avec des couleurs dégradées dans toutes les lignes d’une table pour la colonne concernée (position x), selon plusieurs conditions.

Conditions Visible/Masqué

env.getParameterValue("P_Chart")=="Pie"

La valeur du paramètre est égale à "Pie": Si c’est vrai, alors l’objet est visible.

env.getParameterValue("P_Chart")!="Bar"

La valeur du paramètre n’est pas égale à "Bar": Si c’est vrai, alors l’objet est visible.

Date et Heure new Date().toISOString() Renvoie l’horodate courante (function(){var d=new Date(); return

d.getFullYear();})() Renvoie l’année courante

(function(){var d=new Date(); return d.getFullYear()-

1;})() Renvoie l’année dernière

var CY = (function(){var d=new Date(); return

d.getFullYear();})();new Date(CY,0,1).toISOString()

Renvoie le 1er janvier de l’année courante

Formats personnalisés Rappel : dans un objet Table (Première colonne =0, Seconde colonne = 1, Troisième colonne = 2…etc.)

env.tableNumberFormat(5, {groupingSymbol: " ", decimalSymbol: ",", fractionDigits: 2 }); env.tableNumberFormat(6, {groupingSymbol: " ", decimalSymbol: ",", fractionDigits: 1 });

Renvoie le format spécifié pour la colonne spécifiée dans le résultat de la table.








env.tableNumberFormat(7, {groupingSymbol: " ", decimalSymbol: ",", fractionDigits: 0 });

Rappel : dans un objet Graphe (Première colonne =0, Seconde colonne = 1, Troisième colonne = 2…etc.)

env.formatData('NumberFormat', 1, {groupingSymbol: " ", decimalSymbol: ",", fractionDigits: 0 });

Renvoie le format spécifié pour la colonne spécifiée dans l’info-bulle en cliquant à un endroit du graphe (barre, secteur etc.)

8.2.4. Nouveau

Ce bouton permet d’ajouter des options spécifiques supportées par certains objets. Vous pouvez aussi supprimer des options non utilisées en cliquant sur la petite croix noire. La liste des options peut ainsi être personnalisée, selon vos besoins.

Attention à la saisie en minuscule ou en MALUSCULES pour ces fonctions !

Voir paragraphe suivant au sujet du bouton Aide qui peut vous donner des informations sur les fonctions disponibles que vous pouvez utiliser, selon le type du graphe Google courant.

Exemple: vous insérez une Table avec le navigateur Chrome puis cliquez sur l’icône Propriétés , puis le bouton Avancés : vous obtenez les fonctions avancées par défaut ainsi :

Comme vous pouvez le constater rien n’apparait concernant le nombre de lignes par page pour la grille de la Table, mais vous pouvez ajouter une nouvelle fonction pour gérer ce nombre de lignes par page, manuellement ou automatiquement.








8.2.4.1. Ajouter automatiquement une nouvelle fonction avancée

Quitter l’écran précédent et cliquer sur l’icône Editeur de graphe . Pour une Table vous aurez cet écran si vous cliquez ensuite sur l’onglet Customize (Personnalisé) :

Cliquer maintenant sur la case à cocher Paging (Pagination) et sélectionner une valeur dans la liste déroulante, par exemple 10.

Noter que d’autres options sont proposées et activées par défaut.

Valider et retourner au bouton Avancés dans les Propriétés de la Table :








Comme vous pouvez le constater de nouvelles fonctions ont été rajoutées automatiquement dans la zone de dialogue « Avancés ».

Vous pouvez maintenant personnaliser le zone pageSize avec un nombre non proposé dans la liste comme

par exemple 5, 12 ou 15 selon la taille de votre objet Table.

Toute fonction personnalisée peut être supprimée en utilisant la petite croix noire .

8.2.4.2. Ajouter manuellement une nouvelle fonction avancée

En prenant le même exemple précédent tel que l’objet Table Google, si vous cliquez sur le bouton Aide, vous pouvez voir plus de fonctions que vous pourriez ajouter à un objet Table, telles que par exemple le « alternatingRowStyle » (style alterné.pour les lignes).

Pour ajouter manuellement cette fonction, cliquer sur le bouton Nouveau et saisir le nom de la function en respectant les majuscules et minuscules (sensible à la casse) :

Valider avec OK. La nouvelle fonction est ajoutée dans la boite de dialogue “Avancés”, entrer la valeur requise selon ce qui est proposé dans l’Aide en ligne : true (Vrai) est la valeur par défaut :

Cliquer sur OK et enregistrer puis exécuter le Dashboard :








Une légère alternance de couleur apparait une ligne sur deux à gauche.

8.2.5. Aide

Cette commande permet d’appeler l’Aide en ligne “Google Developers Help” pour chaque Graphique Google référencé sur leur site. Ici vous pouvez découvrir de nouvelles fonctions que vous pourriez ajouter à vos applications Dashboard. Consulter le chapitre précédent au sujet de la commande Nouveau pour voir comment ajouter une telle fonction.

9. Appel d’un Dashboard depuis un autre Dashboard

Comme vous pouvez le voir dans l’exemple “Dashboard Application” depuis le menu BAI Demonstration, livré comme exemple, le premier Dashboard principal propose un bouton qui peut appeler un autre Dashboard secondaire, en lui passant les valeurs de plusieurs paramètres :

Ce “Dashboard Application” correspond au fichier “Dashboard GC Main.xgc” localise dans le répertoire C:\Users\Public\Documents\Click and DECiDE Samples\Web

Portal\Dashboards\Dashboard Samples, et peut être visible depuis le Portail Web dans la branche

suivante :

Le Dashboard principal (fichier “Dashboard GC Main.xgc”) appelle le Dashboard secondaire (fichier

“Dashboard GC Sub.xgc”, en utilisant un bouton “Call Document and Graph Screen”:








Ce bouton exécute une URL appelant le Dashboard secondaire quand l’utilisateur clique dessus. Pour savoir comment est fait le Dashboard secondaire, afficher le fichier “Dashboard GC Sub.xgc” dans le Portail Web,

puis mettre la souris sur ce fichier, faire un clic droit et sélectionner la commande Copier raccourci ou Copier le lien :

Puis coller ce lien dans la zone “Exécute l’URL” du bouton :

http://servername/dvweb/Menus/Display.aspx?__ma=BAI+Demonstration&__mi=2558&__rp=Dashboard+Samples%2fDashboard+GC+Sub.xgc

puis ajouter les paramètres requis comme suit : &NomDuParamètre= pour chaque paramètre requis:

Dans l’exemple donné, le bouton “Call Document and Graph Screen” exécute cette URL:

/dvweb/Menus/Display.ashx?__ma=BAI+Demonstration&__mi=2558&__rp=Dashboard+Samples%2fDashboard+GC+Sub.xgc&PRODREF_PARAM=&FAMILY_PARAM=&YEAR_PARAM=&SALNAME_PARAM=&CUST_PARAM=&CUSTNAME_PARAM=

Commentaires:

La partie Display.ashx est utilisée pour afficher le résultat sans montrer les paramètres et sans montrer la

barre de navigation.

Tous les paramètres utilisés dans le Dashboard secondaire sont définis dans cette URL et vont prendre des valeurs selon les actions de l’utilisateur depuis le Dashboard principal juste avant de cliquer sur le bouton “Call Document and Graph Screen”.

Quand aucune valeur n’est passée par l’URL ci-dessus, cela signifie IGNORE par défaut.

Si, par exemple, l’utilisateur sélectionne l’année 2016 et le vendeur Joe Kramer, il peut vérifier avec les touches Ctrl + double clic k sur le fond du Dashboard quelles sont les valeurs de chaque paramètre :










Et lorsque l’utilisateur cliquera sur le bouton “Call Document and Graph Screen”, cette URL sera actualisée ainsi :

/dvweb/Menus/Display.ashx?__ma=BAI+Demonstration&__mi=2558&__rp=Dashboard+Samples%2fDashboard+GC+Sub.xgc&PRODREF_PARAM=IGNORE&FAMILY_PARAM=IGNORE&YEAR_PARAM=2016&SALNAME_PARAM=Joe%20Kramer&CUST_PARAM=IGNORE&CUSTNAME_PARAM=IGNORE

Le Dashboard secondaire sera ouvert et affichera dans la même fenêtre le résultat pour le vendeur Joe Kramer et pour l’année 2016:

10. Retour au Dashboard principal

La plupart du temps, quand vous appelez un Dashboard secondaire depuis un Dashboard principal, comme décrit dans le chapitre précédent, vous aurez besoin de revenir au Dashboard principal, avec les mêmes valeurs de paramètres et parfois avec de nouvelles valeurs, modifiées par le Dashboard secondaire.

Il y a 2 moyens de revenir au Dashboard principal (ou précédent):

10.1. Retour automatique

Vous pouvez utiliser un bouton (ou n’importe quel autre objet qui soit capable d’exécuter une URL) et utiliser la commande =document.referrer, et ajouter, si besoin, le(s) nom(s) des paramètres qui doivent revenir

avec des valeurs actualisées. Dans l’exemple donné, le Dashboard secondaire “Dashboard GC Sub.xgc”

contient ce bouton “Back” :








La zone Exécute l’URL contient l’URL suivante :

=document.referrer+"&PRODREF_PARAM=&FAMILY_PARAM=&YEAR_PARAM=&SALNAME_PARAM=&CUST_PARAM=&CUSTNAME_PARAM="

Mais quand l’utilisateur revient depuis le Dashboard secondaire vers le Dashboard principal, cette URL contiendra les plus récentes valeurs de chaque paramètre, éventuellement modifiées par les actions de l’utilisateur.

Exemple: si l’utilisateur a sélectionné dans le Dashboard principal l’année 2016 et le vendeur Joe Kramer, puis a appelé le Dashboard secondaire et sélectionné le client “The Polar Bicycle” dans la liste de l’objet Table, les valeurs des paramètres seront alors :

Et l’URL de retour sera ainsi :

=document.referrer+"&PRODREF_PARAM=&FAMILY_PARAM=&YEAR_PARAM=2016&SALNAME_PARAM=Joe%20Kramer&CUST_PARAM=1010&CUSTNAME_PARAM=The%20Polar%20Bicycle"

En cliquant sur le bouton “Back” dans le Dashboard secondaire, le Dashboard principal (ou précédent) sera affiché.

10.2. Retour manuel

Au lieu d’utiliser la commande =document.referrer, vous pouvez aussi saisir l’URL nécessaire dont le

contenu a été copié et modifié avec les paramètres nécessaires :

Afficher le fichier Parent Dashboard.xgc dans le Portail Web (dans notre exemple ce sera le

ficher Dashboard GC Main.xgc file)

Faire un clic droit sur ce fichier Dashboard et sélectionner Copier le raccourci ou Copier le lien.

Coller ce lien dans la zone “Exécute l’URL” du bouton “Back” et ajouter, si besoin, les paramètres nécessaires.

Avec notre exemple, cette URL devrait être la suivante :

http://localhost/dvweb/Menus/Display.aspx?__ma=BAI+Demonstration&__mi=2558&__rp=Dashboard+Samples%2fDashboard+GC+Main.xgc

et peut être modifiée, en ajoutant les paramètres ainsi :

/dvweb/Menus/Display.aspx?__ma=BAI+Demonstration&__mi=2558&__rp=Dashboard+Samples%2fDashboard+GC+Main.xgc&PRODREF_PARAM=&FAMILY_PARAM=&YEAR_PARAM=&SALNAME_PARAM=&CUST_PARAM=&CUSTNAME_PARAM=










11. Annexe Technique

Voici quelques informations au sujet des raccourcis, liens et fonctions etc. qui peuvent être utiles :

11.1. Raccourcis vers des pages

Attention: tous les raccourcis ont changés depuis la version 2013

Click&DECiDE Version 2013 ou supérieur

Raccourcis vers des pages

Ancien raccourcis

Remplacer avec

/dvweb/Display.aspx

/dvweb/Menus/ShowParameters.aspx

/dvweb/Menus/Display.aspx

/dvweb/Menus/Display.ashx

/dvweb/Menus/Download.ashx

/dvweb/WebQuery.ashx /dvweb/Menus/Query.ashx

Pour des raisons de compatibilité, les anciens raccourcis sont toujours supportés mais il est recommandé de les modifier avec la nouvelle syntaxe.

11.2. Paramètres communs

Click&DECiDE Version 2013 ou supérieure

Paramètres communs

Raccourcis Description Ancien nom Type Unité/Valeur/Exemple

__ca= Valeur pour le

Cache (1) Entier Minutes

__f= Nom du format de

sortie __format Chaîne

PDF, HTML, Excel+XLS, ASCII,

Excel+XLSX,Google+Data+Table etc

__ma= Alias de Menu __mnu_alias= Chaîne __ma=BAI+Demonstration

__mi= Elément de Menu __mnu_itemid= Entier __mi=2316

__rp= Chemin relatif __relative_path= Chaîne __rp=Area+Chart+Sample.xgc

__t= Type __type= Chaîne vision

__it= Type d’élément __item_type= Entier (1 : requête; 2 : état; 3: tableau-croisé; 4 : cube)

__in= Nom d’élément __item_name= Chaîne

(1) Concerne seulement les Applications Dashboard (Query.ashx)








11.3. ShowParameters (Afficher les paramètres)

Show Parameters (Afficher les paramètres)

Fonction Description Paramètres

supportés Action Remarques

ShowParameters.aspx

/dvweb/Menus/ShowParameters.aspx?

Affiche les liste

des paramètres

pour l’élément

sélectionné

__sav=0 Montre le

fichier

__sav=1 Télécharge le

fichier

__e=0

Affiche les

paramètres

avant

l’exécution

Ancien nom : _exec=

__e=1

Exécute dans

afficher les paramètres

Ancien nom : _exec=

Note: si __e=1 et si un

résultat existe déjà pour la

même chaîne de requête, le

résultat sera directement affiché. Vous devez cliquer à

nouveau sur Exécuter ou

Exporter pour relancer le

rapport ou la requête.

/dvweb/Menus/ShowParameters.aspx?__ma=BAI+Demonstration&__mi=2316

11.4. Display (Afficher)

Display (Afficher)

Fonction Description Commentaire

Display.aspx

/dvweb/Menus/Display.aspx?

Affiche le résultat d’un élément

exécutable d’un Menu avec la barre

de navigation (Sous une tablette ou

un smartphone, aucune barre de navigation n’est affichée).

Note: dans le cas d’un élément exécutable, si le

résultat existe déjà, il sera directement affiché,

sinon il sera exécuté sans possibilité d’annuler.

Pour exécuter directement un élément avec la possibilité d’annuler, vous devez utiliser le

ShowParameters.aspx avec le &__e=1

/dvweb/Menus/Display.aspx?__ma=BAI+Demonstration&__mi=2558&__rp=Area+Chart+Sample.xgc

Display.ashx

/dvweb/Menus/Display.ashx?

Affiche le résultat d’un élément

exécutable d’un Menu sans la barre

de navigation, utile pour des états enchaînés ( mode « drill-down/drill-

up ») ou des tableaux de bords

enchaînés.

Note: dans le cas d’un élément exécutable, si le résultat existe déjà, il sera directement affiché,

sinon il sera exécuté sans possibilité d’annuler.

/dvweb/Menus/Display.ashx?__ma=BAI+Demonstration&__mi=2558&__rp=Dashboard+GC+Main.xgc




http://localhost/dvweb/dvweb/Menus/ShowParameters.aspx?__ma=BAI+Demonstration&__mi=2316

http://localhost/dvweb/dvweb/Menus/Display.aspx?__ma=BAI+Demonstration&__mi=2558&__rp=Area+Chart+Sample.xgc





11.5. Download (Télécharger)

Download (Télécharger)

Fonctionnalités Description Commentaire

Download.ashx

/dvweb/Menus/Download.ashx? Télécharge un élément d’un Menu ou

son résultat.

Note: dans le cas d’un élément

exécutable, si le résultat existe déjà, il

sera directement affiché, sinon il sera

exécuté sans possibilité d’annuler. Pour

exécuter directement un élément avec la

possibilité d’annuler, vous devez utiliser

le ShowParameters.aspx avec le

&__e=1&__sav=1

/dvweb/Menus/Download.ashx?__ma=BAI+Demonstration&__mi=2538&YEAR_PARAM=&SALNAME_PARAM=&PRODREF_PARAM=&__f=PDF

11.6. Query/WebQuery (Requête/Requête depuis le Web pour Excel)

Query /WebQuery (Requête/Requête depuis le Web pour Excel)

Fonction Commentaire

Query.ashx

/dvweb/Menus/Query.ashx?

Renvoie les données

brutes du résultat d’un

élément d’un Menu.

S’exécute toujours sans possibilité d’annuler. Utiliser le

&__ca=NN (minutes) pour active le cache du navigateur et

améliorer les performances.

/dvweb/Menus/Query.ashx?__ma=BAI+Demonstration&__mi=2528&P_Year=&__f=Google+Data+Table

/dvweb/Menus/Query.ashx?__ma=BAI+Demonstration&__mi=2528&P_Year=["P_Year","P_Year"]&__f=WebQuery

WebQuery.ashx

/dvweb/WebQuery.ashx? Renvoie les données brutes du résultat d’un

élément d’un Menu.

Version courte du Query.ashx utilisée pour les requêtes depuis

de Web. N’a pas besoin de la fonction &__f=WebQuery.

/dvweb/WebQuery.ashx?__ma=BAI+Demonstration&__mi=2528&P_Year=["P_Year","P_Year"]

Noter que pour des UJRL WebQuery (Requêtes depuis le Web dans Excel) dépassant les 255 caractères, vous devez

utiliser le TinyURL sur le site www.tinyurl.com qui permet d’obtenir une URL courte à partir d’une URL trop longue et

de pouvoir ainsi la coller dans Excel.




http://www.tinyurl.com/





11.7. Raccourcis du bouton Partager

Copier les raccourcis du bouton Partager

Paramètres

Coché Valeur Résultat

Non défaut L’URL ne contiendra pas ce paramètre et la valeur par défaut sera utilisée pour la requête

Oui

Vide L’URL contiendra &PARAM= ou &PARAM=["PARAM","PARAM"] pour les Requêtes depuis

le Web vers Excel

défaut L’URL ne contiendra pas ce paramètre et la valeur par défaut sera utilisée pour la requête

Autre L’URL contiendra &PARAM=VALEUR

© 2010 Click&DECiDE SAS. All rights reserved Click&DECiDE, Net Report. DataSet Report, DataSet Vision, and other DataSet products and services as well as their respective logos are trademarks or registered trademarks of Click&DECiDE SAS. All other company names, products and services used herein are trademarks or registered trademarks of their respective owners. The information published herein is subject to change without notice. This publication is for informational purposes only, without representation or warranty of any kind, and Click&DECiDE SAS shall not be liable for errors or omissions with respect to this publication. The only warranties for Click&DECiDE products and services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting any additional warranty.


