View source for Tableaux

__TOC__
=Présentation=
L'objet de cette page est de présenter l'utilisation des '''tableaux''' de la [[UserDoc4|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é :
**Titre du tableau.
**[[#D.C3.A9placement|Déplacement de ligne]].
**[[#Ajout.2Fsupression_de_ligne|Ajout/suppression de ligne]].
**Titre de ligne.

[[File: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.


[[File:Table4-14-responsive.png]]

==Tableau à onglets==
Certains tableaux comportent plusieurs sections accessibles par '''onglets'''. 

[[File: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.

[[File:Of4-ddt-page-1.png]]

[[File:Of4-ddt-page-2.png]]

=Ordonnancement=
*Dans certains tableaux, il est possible de changer l''''ordre des lignes''', en intervenant sur leur '''position'''.
*L'ordre défini dans un tableau a des '''conséquences sur l'affichage''' d'une autre page de l'application. Par ex. : l'ordre que définit l'utilisateur dans le ''tableau des ressources'' s'applique dans le ''planning des ressources''.
*Pour changer la '''position''' d'une ligne :
#Cliquer sur le '''pictogramme''' [[File:OF4-grab.png]].
#'''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.
[[File:Table4-8-move.png]]

=Ajout/suppression de ligne=
Dans certains tableaux, il est possible d''''ajouter et/ou de supprimer''' des lignes. Ces actions s'effectuent grâce au '''pictogramme des options de ligne'''.

==Pictogramme des options de ligne==
*Le pictogramme des options de ligne est situé dans la colonne fixe du tableau.
*Il est représenté de cette manière : [[File:Table4-9-row-options.png]].
*Il comporte un groupe d'items s'affichant en fonction du contexte.

==Ajout de ligne==
*'''Survoler''' le pictogramme des options de ligne.
*Une '''bulle de dialogue''' s'ouvre.
*Cliquer sur l''''item''' souhaité :
**'''Ajouter une ligne au-dessus''' : ajoute une ligne au-dessus de la ligne courante.
**'''Ajouter une ligne en-dessous''' : ajoute une ligne en-dessous de la ligne courante.
*Une '''nouvelle ligne''' est créée. Ses champs sont vides. Les [[#Champ_requis|champs requis]] sont signalés.

==Enregistrement d'une ligne==
**L''''enregistrement''' s'effectue lorsque les [[#Champ_requis|champs requis]] sont complétés.
**Si les champs requis ne sont pas complétés, le [[Pictogramme_des_options_de_ligne|pictogramme des options de ligne]] présente au survol un seul item : '''Annuler la création de ligne''', qui permet de supprimer immédiatement la nouvelle ligne incomplète.

==Suppression de ligne==
*'''Survoler''' le pictogramme des options de ligne.
*Une '''bulle de dialogue''' s'ouvre.
*Cliquer sur l''''item''' : '''Supprimer la ligne'''.

==Supprimer une ligne qui vient d'être créée==
*Il est possible de la supprimer une '''ligne juste créée'''. Le survol de l'icône propose alors cette seule option :

[[File: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é'''.
[[File: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é.
[[File:Table4-11-required-line.png]]
[[File:Table4-12-required-thumbnail.png]]

==Modes d'édition==
===Dans la cellule===
*'''Champ de texte :''' le champ se met en surbrillance.
[[File:Table4-3-edit-input.png]]
*'''Case à cocher :'''
[[File:Table4-4-edit-checkbox.png]]

===Dans une fenêtre modale===
Afin d'éditer certains types de contenus, la saisie s'effectue dans une [[ModalWindow4|fenêtre modale]].

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

[[File:Table4-5-modal-textarea.png]]

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

[[File: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.

[[File: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.

[[File: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.

[[File: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.

[[File: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.

[[File: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.

[[File: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).

[[File:Table4-13-accountancy.png]]

*La fonctionnalité de [[#Pointage|pointage]].