Tableaux: Difference between revisions

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


===Exemple de fonctionnement===
===Exemple de fonctionnement===
====1er tableau====
*Au chargement de la page, la '''première page''' du tableau apparaît. Elle est numérotée 1/1.  
*Au chargement de la page, la '''première page''' du tableau apparaît. Elle est numérotée 1/1.  
*Les '''flèches de navigation''' sont transparentes car on n'a pas encore navigué dans les autres pages.
*Les '''flèches de navigation''' sont transparentes car on n'a pas encore navigué dans les autres pages.
Line 75: Line 77:
[[File:Table4-17-pagination.png]]
[[File:Table4-17-pagination.png]]


====2e tableau====
*Un clic sur le '''pictogramme d'édition de tableau''' permet d'accéder au tableau imbriqué.  
*Un clic sur le '''pictogramme d'édition de tableau''' permet d'accéder au tableau imbriqué.  
*Le tableau imbriqué s'affiche et constitue la deuxième page. Le '''nombre total de pages''' passe à 2.  
*Le tableau imbriqué s'affiche et constitue la deuxième page. Le '''nombre total de pages''' passe à 2.  
Line 81: Line 84:
[[File:Table4-18-pagination.png]]
[[File:Table4-18-pagination.png]]


====3e tableau====
*Le tableau 2 comporte des cellules imbriquant elles-mêmes un tableau.
*Le tableau 2 comporte des cellules imbriquant elles-mêmes un tableau.
*Un clic sur le '''pictogramme d'édition de tableau''' ouvre un nouveau niveau d'imbrication.
*Un clic sur le '''pictogramme d'édition de tableau''' ouvre un nouveau niveau d'imbrication.

Revision as of 14:34, 11 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 est composé des éléments suivants :

Colonne fixe

Partie droite

La partie droite comporte les colonnes de contenu du tableau.

Vue d'ensemble d'un tableau :

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 :

  • La colonne fixe de gauche reste toujours visible.
  • Les dimensions du tableau s'adaptent. Si des lignes sont plus longues que la largeur du tableau, ou si le nombre de lignes excède la hauteur de celui-ci, il est possible de faire coulisser le contenu avec les barres de défilement afin d'accéder à toutes les données.

Aspect initial

Aspect initial d'un tableau dont les contenus excèdent la largeur et la hauteur de l'écran. Des barres de défilement sont présentes.

Planning4 14 coulissement.png

Largeur en excès

La partie droite du tableau (titres + cellules) coulisse sous la colonne fixe lorsqu'on utilise la barre de défilement horizontal.

Planning4 15 coulissement.png

Hauteur en excès

Les titres de colonnes – colonne fixe + partie droite – restent figés. Les lignes coulissent en-dessous de ceux-ci lorsqu'on utilise la barre de défilement vertical.

Planning4 16 coulissement.png

Tableau à onglets

Certains tableaux comportent plusieurs sections accessibles par onglets.

OF4 ddt tabs.png

Tableaux à pages

Principe général

  • Les cellules de certains tableaux peuvent imbriquer un tableau.
  • Un tableau imbriqué peut contenir des cellules imbriquant elles-mêmes un tableau.
  • Le d'imbrications des tableaux est infini.
  • Le nombre nombre de pages augmente à mesure que l'utilisateur franchit des niveaux d'imbrication. En quelque sorte, l'utilisateur écrit son livre.

Aspect

  • Un tableau à pages est identifié par une zone de navigation située au-dessus de lui. Cette zone comporte :
    • Le titre de la page courante.
    • Le numéro de la page courante.
    • Le nombre de pages.
    • Des flèches de navigation à gauche et à droite, permettant de naviguer d'un tableau à un autre.
  • Les cellules imbriquant un tableau sont identifiées par le pictogramme édition de tableau : Of4 picto ddt edit.png.

Principe général

  • La navigation entre les tableaux se fait alors par pages.
  • La zone de navigation est située au-dessus du tableau et comporte les éléments suivants :
    • Au centre : La page courante, son titre, le nombre total de pages, sont indiqués sous la forme : N° de la page courante/Nbre de pages + Nom de la page courante.
    • À gauche et à droite : flèches de navigation, permettant de naviguer vers un tableau imbriqué ou de revenir au tableau principal.

Exemple de fonctionnement

1er tableau

  • Au chargement de la page, la première page du tableau apparaît. Elle est numérotée 1/1.
  • Les flèches de navigation sont transparentes car on n'a pas encore navigué dans les autres pages.

Table4 17 pagination.png

2e tableau

  • Un clic sur le pictogramme d'édition de tableau permet d'accéder au tableau imbriqué.
  • Le tableau imbriqué s'affiche et constitue la deuxième page. Le nombre total de pages passe à 2.
  • La flèche de gauche devient visible. Le nom du tableau précédent est écrit à côté. Un clic sur cette zone permet de repasser au tableau 1.

Table4 18 pagination.png

3e tableau

  • Le tableau 2 comporte des cellules imbriquant elles-mêmes un tableau.
  • Un clic sur le pictogramme d'édition de tableau ouvre un nouveau niveau d'imbrication.
  • Le troisième tableau s'affiche et le nombre total de pages passe à 3.
  • La flèche de gauche permet de revenir au tableau 2.

Table4 19 pagination.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 :
  1. Cliquer sur le pictogramme OF4 grab.png.
  2. Relâcher que lorsque la ligne se dispose à la position souhaité.
  3. Un témoin sous forme d'une ligne bleu foncé indique l'emplacement de destination.

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 : Table4 9 row options.png.
  • Il comporte un groupe d'items s'affichant dans une info-bulle en fonction des contextes ci-dessous.

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 champs requis sont signalés.

Enregistrement d'une ligne

    • L'enregistrement s'effectue lorsque les champs requis sont complétés.
    • Si les champs requis ne sont pas complétés, le 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.

Table4 10 row options delete.png

Suppression de ligne

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

Édition des données

Mise à jour instantanée

La mise à jour des données d'un tableau ne nécessite aucun rechargement de page. Celle-ci est instantanée.

Principe général

Pour éditer des données, cliquer sur une cellule.

La cellule en cours d'édition change d'état : elle entre en mode focus et prend un contour pointillé.

Table4 16 focus.png

Selon le mode d'édition, d'autres changements d'états se produisent, afin d'optimiser la saisie en fonction du contenu.

La ligne en cours d'édition ou ayant subi des modifications prend un fond plus foncé.

Table4 2 edit modify.png

Navigation entre les cellules

La touche tab permet de passer d'une cellule à une autre :

  • tab : champ suivant
  • shift + tab : champ précédent

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 un pictogramme représentant un panneau d'alerte orange :
    • 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 :

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