PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

  • Présentation du champ Tableau de bord
  • Créer un champ Tableau de bord
  • Caractéristiques du champ Tableau de bord
  • Ajouter un Widget à un champ Tableau de bord
  • Définir ou modifier les options d'affichage d'un Widget
  • Configurer un champ Tableau de bord sous l'éditeur
  • Définir la taille des cellules
  • Définir la taille et la position des Widgets
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Autres
Procédures stockées
Présentation du champ Tableau de bord
Les tableaux de bord logiciels sont des éléments importants d'une application : ils regroupent les éléments clés permettant aux responsables de prendre des décisions.
Le champ Tableau de bord permet de créer facilement des tableaux de bord que l'utilisateur final pourra personnaliser et adapter à ses besoins. L'utilisateur pourra par exemple déplacer les différents éléments du tableau de bord, décider des éléments à visualiser, ...
Les éléments affichés dans le champ Tableau de bord sont des Widgets. Ces Widgets sont déplaçables, masquables et redimensionnables par l'utilisateur final.
Côté technique, un Widget se crée facilement :
  • WINDEVAndroidiPhone/iPad En WINDEV et WINDEV Mobile, c'est une fenêtre interne.
  • Versions 20 et supérieures
    WEBDEV - Code ServeurWEBDEV - Code Navigateur En WEBDEV, c'est une page interne.
    Nouveauté 20
    WEBDEV - Code ServeurWEBDEV - Code Navigateur En WEBDEV, c'est une page interne.
    WEBDEV - Code ServeurWEBDEV - Code Navigateur En WEBDEV, c'est une page interne.
Versions 20 et supérieures
WEBDEV - Code ServeurWindows Cette fonctionnalité est désormais disponible pour les sites WEBDEV.
WEBDEV - Code ServeurLinux Cette fonctionnalité est désormais disponible pour les sites WEBDEV sous Linux.
WEBDEV - Code Navigateur Cette fonctionnalité est désormais disponible en code navigateur.
Nouveauté 20
WEBDEV - Code ServeurWindows Cette fonctionnalité est désormais disponible pour les sites WEBDEV.
WEBDEV - Code ServeurLinux Cette fonctionnalité est désormais disponible pour les sites WEBDEV sous Linux.
WEBDEV - Code Navigateur Cette fonctionnalité est désormais disponible en code navigateur.
WEBDEV - Code ServeurWindows Cette fonctionnalité est désormais disponible pour les sites WEBDEV.
WEBDEV - Code ServeurLinux Cette fonctionnalité est désormais disponible pour les sites WEBDEV sous Linux.
WEBDEV - Code Navigateur Cette fonctionnalité est désormais disponible en code navigateur.
Versions 22 et supérieures
Android Cette fonctionnalité est désormais disponible pour les applications Android.
iPhone/iPad Cette fonctionnalité est désormais disponible pour les applications iPhone/iPad.
Nouveauté 22
Android Cette fonctionnalité est désormais disponible pour les applications Android.
iPhone/iPad Cette fonctionnalité est désormais disponible pour les applications iPhone/iPad.
Android Cette fonctionnalité est désormais disponible pour les applications Android.
iPhone/iPad Cette fonctionnalité est désormais disponible pour les applications iPhone/iPad.
Créer un champ Tableau de bord
Pour créer un champ de type Tableau de bord :
  1. Sous le volet "Création", dans le groupe "Conteneurs", cliquez sur "Tableau de bord".
  2. Cliquez dans la fenêtre ou la page à la position où le champ doit être créé.
Pour afficher les caractéristiques du champ, sélectionnez l'option "Description" dans le menu contextuel du champ.
Versions 20 et supérieures
Remarque : Les dimensions du champ créé sont optimisées pour occuper l'espace disponible à la position indiquée. Si la taille du champ ne vous convient pas, utilisez la combinaison de touches Ctrl + Z : le champ retrouvera sa taille par défaut.
Nouveauté 20
Remarque : Les dimensions du champ créé sont optimisées pour occuper l'espace disponible à la position indiquée. Si la taille du champ ne vous convient pas, utilisez la combinaison de touches Ctrl + Z : le champ retrouvera sa taille par défaut.
Remarque : Les dimensions du champ créé sont optimisées pour occuper l'espace disponible à la position indiquée. Si la taille du champ ne vous convient pas, utilisez la combinaison de touches Ctrl + Z : le champ retrouvera sa taille par défaut.
Caractéristiques du champ Tableau de bord
Les caractéristiques spécifiques d'un champ Tableau de bord sont décrites dans les onglets "Détail" et "Contenu" de la fenêtre de description du champ (option "Description" du menu contextuel).
Onglet "Détail" : Dimensions et présentation du champ Tableau de bord
L'onglet "Détail" permet de spécifier :
  • si la largeur des Widgets est variable. Dans ce cas, il est possible de définir le nombre de colonnes présentes dans le champ Tableau de bord et la hauteur des cellules.
  • si le nombre de Widgets est variable. Dans ce cas, il est possible de définir la taille des cellules (largeur et hauteur en pixels).
  • si la largeur et le nombre de Widgets sont fixes. Dans ce cas, il est possible de définir le nombre de colonnes et la taille des cellules. Les boutons "Adapter" permettent d'adapter le nombre des colonnes selon la taille des cellules ou inversement.
  • les marges entre les différents Widgets affichés dans le champ Tableau de bord.
Versions 20 et supérieures
WEBDEV - Code ServeurWEBDEV - Code Navigateur Onglet "Détail" : Position du menu contextuel
Le menu contextuel du champ Tableau de bord permet à l'internaute de :
  • Passer en mode édition. Le mode édition permet à l'internaute de changer l'ordre des widgets, de modifier leur taille, ... La configuration des options proposées peut être réalisée avec la fonction TDBMode.
  • Restaurer la configuration initiale.
Le menu contextuel du champ Tableau de bord est ouvert à partir d'un bouton positionné sur le champ Tableau de bord. Il est possible de :
  • spécifier le bouton à utiliser. Par défaut, un bouton est créé lors de la création du champ Tableau de bord. Il est possible d'utiliser un autre bouton présent dans la page. Ce bouton doit être associé à l'action "Ouvrir le menu du Tableau de bord" (Onglet "Général" de la fenêtre de description du bouton). Si le bouton "Aucun" est sélectionné, le menu contextuel ne sera pas proposé.
    Remarque : Pour ne pas proposer le menu contextuel par programmation, il est possible de le rendre invisible avec la propriété ..Visible.
  • indiquer la position du bouton qui ouvrira le menu contextuel. Ce bouton peut être positionné en haut à gauche, en haut à droite, en bas à gauche, en bas à droite du champ Tableau de bord.
Nouveauté 20
WEBDEV - Code ServeurWEBDEV - Code Navigateur Onglet "Détail" : Position du menu contextuel
Le menu contextuel du champ Tableau de bord permet à l'internaute de :
  • Passer en mode édition. Le mode édition permet à l'internaute de changer l'ordre des widgets, de modifier leur taille, ... La configuration des options proposées peut être réalisée avec la fonction TDBMode.
  • Restaurer la configuration initiale.
Le menu contextuel du champ Tableau de bord est ouvert à partir d'un bouton positionné sur le champ Tableau de bord. Il est possible de :
  • spécifier le bouton à utiliser. Par défaut, un bouton est créé lors de la création du champ Tableau de bord. Il est possible d'utiliser un autre bouton présent dans la page. Ce bouton doit être associé à l'action "Ouvrir le menu du Tableau de bord" (Onglet "Général" de la fenêtre de description du bouton). Si le bouton "Aucun" est sélectionné, le menu contextuel ne sera pas proposé.
    Remarque : Pour ne pas proposer le menu contextuel par programmation, il est possible de le rendre invisible avec la propriété ..Visible.
  • indiquer la position du bouton qui ouvrira le menu contextuel. Ce bouton peut être positionné en haut à gauche, en haut à droite, en bas à gauche, en bas à droite du champ Tableau de bord.
WEBDEV - Code ServeurWEBDEV - Code Navigateur Onglet "Détail" : Position du menu contextuel
Le menu contextuel du champ Tableau de bord permet à l'internaute de :
  • Passer en mode édition. Le mode édition permet à l'internaute de changer l'ordre des widgets, de modifier leur taille, ... La configuration des options proposées peut être réalisée avec la fonction TDBMode.
  • Restaurer la configuration initiale.
Le menu contextuel du champ Tableau de bord est ouvert à partir d'un bouton positionné sur le champ Tableau de bord. Il est possible de :
  • spécifier le bouton à utiliser. Par défaut, un bouton est créé lors de la création du champ Tableau de bord. Il est possible d'utiliser un autre bouton présent dans la page. Ce bouton doit être associé à l'action "Ouvrir le menu du Tableau de bord" (Onglet "Général" de la fenêtre de description du bouton). Si le bouton "Aucun" est sélectionné, le menu contextuel ne sera pas proposé.
    Remarque : Pour ne pas proposer le menu contextuel par programmation, il est possible de le rendre invisible avec la propriété ..Visible.
  • indiquer la position du bouton qui ouvrira le menu contextuel. Ce bouton peut être positionné en haut à gauche, en haut à droite, en bas à gauche, en bas à droite du champ Tableau de bord.
Onglet "Détail" : Modification par l'utilisateur
Dans le champ Tableau de bord, il est possible de :
  • Compacter les Widgets : Cette option permet de réorganiser automatiquement les Widgets dans le champ Tableau de bord lors de la suppression d'un Widget par l'utilisateur final.
  • Mémoriser la configuration des Widgets : Cette option permet de sauvegarder automatiquement à la fermeture de la fenêtre (ou de la page) la configuration du champ Tableau de bord réalisée par l'utilisateur. Cette configuration sera automatiquement ré-affichée lors de la prochaine ouverture de la fenêtre (ou de la page).
    WINDEVWINDEV MobileAndroidiPhone/iPad Remarque : L'utilisateur peut configurer son Tableau de bord grâce au menu contextuel des FAA (Fonctionnalités Automatiques de vos Applications). Pour plus de détails, consultez FAA du champ Tableau de bord.
  • WINDEV Mode édition permanent : Cette option permet de proposer le champ Tableau bord en mode édition directement lors de son affichage. L'utilisateur pourra directement déplacer, redimensionner ou masquer les widgets.
Onglet "Contenu" : Définition des Widgets présents dans le champ Tableau de bord
L'onglet "Contenu" permet de définir les Widgets présents dans le champ Tableau de bord.
Il est également possible de définir ces Widgets ou d'en ajouter par programmation en utilisant la fonction TDBAjouteWidget.
Un Widget correspond à :
  • WINDEVAndroidiPhone/iPad une fenêtre interne.
  • Versions 20 et supérieures
    WEBDEV - Code ServeurWEBDEV - Code Navigateur une page interne.
    Nouveauté 20
    WEBDEV - Code ServeurWEBDEV - Code Navigateur une page interne.
    WEBDEV - Code ServeurWEBDEV - Code Navigateur une page interne.
L'onglet "Contenu" permet de :

Ajouter un Widget à un champ Tableau de bord

Pour ajouter un Widget dans un champ Tableau de bord :
  1. Dans l'onglet "Contenu" de la description du champ, cliquez sur le bouton "Ajouter".
  2. Dans la fenêtre qui s'ouvre :
    • WINDEVAndroidiPhone/iPad sélectionnez la ou les fenêtres internes à ajouter comme Widget et validez.
    • Versions 20 et supérieures
      WEBDEV - Code ServeurWEBDEV - Code Navigateur sélectionnez la ou les pages internes à ajouter comme Widget et validez.
      Nouveauté 20
      WEBDEV - Code ServeurWEBDEV - Code Navigateur sélectionnez la ou les pages internes à ajouter comme Widget et validez.
      WEBDEV - Code ServeurWEBDEV - Code Navigateur sélectionnez la ou les pages internes à ajouter comme Widget et validez.
    Remarque : Seules les fenêtres ou les pages internes sans paramètres peuvent être ajoutées sous l'éditeur dans le champ Tableau de bord. Pour ajouter une fenêtre ou une page interne avec paramètres, les ajouts doivent être réalisés par programmation via la fonction TDBAjouteWidget.
  3. Les fenêtres ou les pages internes apparaissent dans la liste des Widgets affichés dans le champ Tableau de bord. Pour chaque Widget, il est possible de définir les options d'affichage. Ces options correspondent à l'affichage initial du Widget.
Remarques :
  • L'ordre des Widgets dans la liste n'a pas d'influence sur la position du Widget dans le champ Tableau de bord. Cette position peut être définie dans la description du Widget.
  • Le numéro associé au Widget permet de le manipuler par programmation.
  • Pour modifier la couleur de fond de votre widget, utilisez une cellule dans votre fenêtre ou page interne. Cette cellule contiendra les champs de la fenêtre ou page interne. La couleur de fond de la cellule permettra de colorer le widget.

Définir ou modifier les options d'affichage d'un Widget

Pour définir ou modifier les options d'affichage initial d'un Widget :
  1. Sélectionnez le Widget à paramétrer dans l'onglet "Contenu" de la fenêtre de description du champ Tableau de bord.
  2. Dans la partie droite de l'écran, spécifiez :
    • la fenêtre ou la page interne associée si nécessaire.
    • si le Widget doit être visible par défaut. Si le Widget est invisible, un pictogramme apparaît à côté du nom du Widget dans la liste. l'utilisateur pourra le rendre visible via le menu contextuel.
    • la position et la taille initiales du Widget. Cette position et cette taille sont exprimées en cellules. Le nombre de ces cellules a été défini dans l'onglet "Détail" de la fenêtre de description du champ. Si la position ou la taille est modifiée pour un Widget, la position des Widgets suivants est automatiquement mise à jour.
      Remarque : La taille maximale du Widget correspond à la taille maximale de la fenêtre interne associée au Widget. Par exemple, si le Widget doit avoir pour taille maximale 2 cases de 150 pixels en largeur et une case de 150 pixels en hauteur, la taille maximale de la fenêtre interne correspondante doit être 300 pixels x 150 pixels.
    • le libellé du Widget. Ce libellé est important : il apparaîtra dans le menu contextuel (FAA) pour permettre à l'utilisateur d'afficher le Widget.
Remarque : Il est également possible de définir la position et la taille des Widgets directement sous l'éditeur.
Configurer un champ Tableau de bord sous l'éditeur

Définir la taille des cellules

Pour définir la taille et la position des Widgets directement sous l'éditeur :
  1. Sélectionnez le champ Tableau de bord.
  2. Un cadre apparaît au tour des différentes cellules présentes dans le champ Tableau de bord.
  3. La première cellule propose des poignées de redimensionnement.
    • Positionnez le curseur de la souris sur un des côtés du Widget. Le curseur de la souris se transforme en flèche.
    • Appuyez sur le bouton de la souris et déplacez la souris en maintenant le bouton enfoncé jusqu'à la taille voulue.
    • La nouvelle taille s'applique à toutes les cellules du champ Tableau de bord.

Définir la taille et la position des Widgets

Pour définir la taille et la position des Widgets directement sous l'éditeur :
  1. Sélectionnez le champ Tableau de bord.
  2. Passez en mode édition en utilisant une des méthodes suivantes :
    • Cliquez sur le champ Tableau de bord.
    • Sélectionnez l'option "Editer la taille et la position des Widgets" du menu contextuel du champ.
  3. Un cadre jaune apparaît autour du champ. Vous pouvez :
    • Redimensionnez les Widgets présents dans le champ Tableau de bord :
      • Positionnez le curseur de la souris sur un des côtés du Widget. Le curseur de la souris se transforme en flèche.
      • Appuyez sur le bouton de la souris et déplacez la souris en maintenant le bouton enfoncé jusqu'à la taille voulue.
    • Déplacer les Widgets présents dans le champ Tableau de bord :
      • Cliquez sur le Widget.
      • Déplacez le Widget en maintenant le bouton de la souris enfoncé.
  4. Pour sortir du mode édition, utilisez une des méthodes suivantes :
    • Utilisez la touche Echap du clavier.
    • Sélectionnez l'option "Terminer l'édition" du menu contextuel du champ.
    • Cliquez sur la fenêtre ou la page.
Liste des exemples associés :
WD Tableau de bord Exemples didactiques (WINDEV) : WD Tableau de bord
[ + ] L'exemple "WD Tableau de bord" est un exemple didactique sur l'utilisation du champ Tableau de bord.
Cet exemple présente comment :
- manipuler le champ en mode "édition",
- sauver/charger une configuration,
- configurer le champ (configuration initiale, ajout / suppression de widgets, ...),
- rafraîchir un widget,
- etc.
WW_TableauDeBord Exemples didactiques (WEBDEV) : WW_TableauDeBord
[ + ] L'exemple "WW_TableauDeBord" est un exemple didactique sur l'utilisation du champ Tableau de bord.
Cet exemple présente comment :
- manipuler le champ en mode "édition",
- sauver/charger une configuration,
- configurer le champ (configuration initiale, ajout / suppression de widgets, ...),
- rafraîchir un widget.
WM CRM Exemples multiplateforme (WINDEV Mobile) : WM CRM
[ + ] WM CRM est un projet multi-plateformes Android et iOS.
Il présente comment on peut réaliser une application de CRM destinée aux tablettes Android et iPad.
Version minimum requise
  • Version 19
Documentation également disponible pour…
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire