Tableaux: Difference between revisions

From Documentation de la solution web de gestion OpenFlyers
Jump to navigation Jump to search
imported>Ltremblet
imported>Ltremblet
Line 31: Line 31:


*La '''navigation''' entre les tableaux se fait alors par '''pages'''.
*La '''navigation''' entre les tableaux se fait alors par '''pages'''.
 
**La zone de navigation est situé au-dessus du tableau et comporte les éléments suivants :
*La zone de navigation est situé au-dessus du tableau et comporte les éléments suivants :
**Au centre : La page courange, son titre, le nombre de pages total, sont indiqués sous la forme : '''N° de la page courange/Nbre de pages + Nom de la page en cours'''.
*Au centre : La page courange, son titre, le nombre de pages total, sont indiqués sous la forme : '''N° de la page courange/Nbre de pages + Nom de la page en cours'''.


*À gauche et à droite : '''flèches''' de navigation, permettant de naviguer vers un tableau imbriqué ou de revenir au tableau principal.
*À gauche et à droite : '''flèches''' de navigation, permettant de naviguer vers un tableau imbriqué ou de revenir au tableau principal.

Revision as of 11:19, 2 September 2014

Présentation

L'objet de cette page est de présenter l'utilisation des tableaux de la version 4 d'OpenFlyers.

Aspect

Général

  • Un tableau présente un ensemble de données réparties sur des lignes aux couleurs alternées.
  • Une colonne de gauche foncée comporte des informations et fonctionnalités dont la présence dépend du tableau concerné :

Table4 1 generic.png

Adaptation à la taille de l'écran

L'aspect du tableau s'adapte à la taille de l'écran sur lequel il s'affiche :

  • Les titres de colonnes et de lignes restent toujours visibles.
  • La largeur et la hauteur du tableau s'adaptent. Si des lignes sont plus longues que la largeur du tableau, ou si le nombre de lignes excède sa hauteur, il est possible de les faire coulisser, afin d'accéder à toutes les données.


Table4 14 responsive.png

Tableau à onglets

Certains tableaux comportent plusieurs sections accessibles par onglets.

OF4 ddt tabs.png

Tableaux à pages

  • Lorsqu'une cellule comporte plusieurs caractéristiques, ces dernières sont placées dans un second tableau, imbriqué dans le tableau initial.
  • La navigation entre les tableaux se fait alors par pages.
    • La zone de navigation est situé au-dessus du tableau et comporte les éléments suivants :
    • Au centre : La page courange, son titre, le nombre de pages total, sont indiqués sous la forme : N° de la page courange/Nbre de pages + Nom de la page en cours.
  • À gauche et à droite : flèches de navigation, permettant de naviguer vers un tableau imbriqué ou de revenir au tableau principal.

Of4 ddt page 1.png

Of4 ddt page 2.png

Déplacement

Il est possible de déplacer les lignes des tableaux d'OF4, de manière à en changer l'ordre.

  • Cliquer sur l'icône la plus à gauche d'une ligne :

OF4 grab.png

  • La relâcher que lorsque la ligne se dispose à la position souhaité.
  • Un témoin sous forme d'une ligne bleu foncé indique l'emplacement de destination.

Table4 8 move.png

Ajout/suppression de ligne

  • Survoler la deuxième icône à gauche d'une ligne :

Table4 9 row options.png

  • Sélectionner l'option souhaitée :
    • Ajouter une ligne au-dessus.
    • Ajouter une ligne en-dessous.
    • Supprimer la ligne.
  • Il est possible de la supprimer une ligne juste créée. Le survol de l'icône propose alors cette seule option :

Table4 10 row options delete.png

Édition des données

Principes généraux

  • Pour éditer des données, cliquer sur la cellule concernée. Elle ne nécessite aucun rechargement de page. La mise à jour est instantanée.
  • La touche tab permet de passer d'une cellule à une autre :
    • tab : champ suivant
    • shift + tab : champ précédent
  • Une ligne en cours d'édition prend un fond plus foncé.

Table4 2 edit modify.png

Champ requis

  • Certaines données sont requises pour que l'enregistrement d'une ligne soit effectué.
  • Les champs restant incomplets ou vides sont signalés par une icône de panneau warning orange :
    • Dans la colonne de titre de la ligne concernée, afin que la ligne en défaut soit toujours identifiable.
    • A la place du champ incomplet, afin de savoir quel est le champ concerné.
    • Dans le cas d'un tableau à onglets, à côté de l'onglet dans lequel la ligne est incomplète, afin de repérer l'onglet contenant le champ concerné.

Table4 11 required line.png Table4 12 required thumbnail.png

Modes d'édition

Dans la cellule

  • Champ de texte : le champ se met en surbrillance.

Table4 3 edit input.png

  • Case à cocher :

Table4 4 edit checkbox.png

Dans une fenêtre modale

Afin d'éditer certains types de contenus, la saisie s'effectue dans une fenêtre modale.

Texte long

Saisir le contenu souhaité dans la zone de texte, puis cliquer sur OK pour valider.

Table4 5 modal textarea.png

Choix unique

Cliquer sur le choix souhaité dans la liste. La fenêtre se ferme automatiquement.

Table4 6 modal combobox.png

Choix multiples

  • Une série de cases à cocher se présente. Cocher toutes les cases souhaitées et cliquer sur OK pour valider.
  • Au-dessus de l'ensemble des choix, une case à cocher globale permet de tout cocher/décocher en même temps.

Table4 7 modal multicheckbox.png

Fonctionnalités particulières

Pointage

Certains tableaux présentent un mode Pointage, qui permet d'enregistrer définitivement des données. Ce mode est inactif par défaut.

Exemples de tableaux : comptabilité, activités.

Inactif

En bas de tableau, un bouton bleu Pointer est présent. On clique dessus pour entrer dans le mode Pointage.

Of4 ddt point 1.png

Actif

  • Le bouton Pointer est remplacé par un texte simple à côté duquel on trouve une icône permettant de sortir du mode Pointer.
  • Un bouton Valider apparaît. Il est alors dans un état inactif : bouton plat gris avec texte en gris, peu de contraste.

Of4 ddt point 2.png

  • La sélection d'une ou plusieurs lignes du DDT rend le bouton Valider actif. Il devient vert et légèrement bombé, comme les autres boutons de validation de l'application.

Of4 ddt point 3.png

  • Dans le tableau, les lignes sélectionnées deviennent légèrement plus foncées.

Ligne non validée/validée

  • Une ligne non validée s'affiche en italique.

Table4 ddt 1 pointage.png

  • Lorsque le pointage est effectué, chaque ligne concernée est considérée comme validée. Son texte s'affiche alors en gras.

Table4 ddt 2 pointage.png

Comptabilité

Les tableaux spécifiques à la comptabilité présentent :

  • Des sous-totaux.
  • Des excédents (en vert).
  • Des déficits (en rouge).

Table4 13 accountancy.png