Tableaux dynamiques éditables

Présentation générale

L’objectif principal de ce comportement est de permettre l’édition, la création et la suppression des lignes de tableaux dynamiques directement depuis la vue sans ouvrir la ligne (sans afficher le formulaire ligne de tableau). Il permet aussi de gérer les événements et les abonnements entre cellules.

Important: la mise en place d’un tableau éditable rend inopérant l’ouverture de la ligne de tableau c’est-à-dire qu’il n’y a plus aucun accès possible au formulaire ligne de tableau.

Fonctionnalités

  • Ajout, édition et suppression de lignes de tableaux dynamiques
  • Support de la plupart des types de champs
  • Gestion des événements et abonnements :
    • Les événements de cellule sont relayés sur le champ tableau dynamique lui-même afin de pouvoir reproduire les calculs qui sont normalement faits par formules sur les champs du formulaire ligne de tableau :
      • onPropertyChanged en Java
      • onFieldChanged en JavaScript (exemple fourni ci-dessous)
  • Manipulation des cellules en Java ou JavaScript :
    • Utilisation de la structure Java CellEvent
  • Les cellules des tableaux éditables prennent en compte les validateurs posés sur les champs du formulaire ligne de tableau (par exemple : nombre de caractères maximum).

Exemple de résultat obtenu

Voici l’affichage d’un tableau dynamique éditable dans le contexte “historique” Portail / Application process avec des colonnes :

  • 1ier tableau : donnée de DU mono valeur, valeur texte à saisir, valeur texte calculée en lecture seule issue de la donnée, valeur texte calculée issue de la donnée et modifiable (équivalent à une valeur par défaut)
  • 2e tableau : liste mono (standard VDoc gérant le multi-langues), valeur texte à saisir

Exemple Tableau Editable Exemple Tableau Editable

Mise en place

Pour mettre en place ce comportement, vous devez :

  • Comme habituellement, concevoir un formulaire ligne de tableau dynamique contenant les “sous-champs” du tableau.
  • Déclarer une classe d’extension Java sur la vue du tableau dynamique.

En option : déclarez du paramétrage dans la zone Attributs du champ tableau dynamique, afin de spécifier la liste des champs en édition et s’ils doivent déclencher des aller-retours serveur.

Attention: Dans un contexte easysite / Workplace, lorsque le tableau est en lecture, les “Twisties” d’ouverture / suppression de ligne sont ajoutés dans la 1ière colonne du tableau causant le décalage de toutes les colonnes du tableau dynamique. Solution de contournement : allez sur le formulaire de process en lecture et pour le champ tableau, décochez l’option “Autoriser la lecture d’éléments”.

Avant-Après Avant-Après

Extension de vue

Déclarez l’extension suivante sur la vue du tableau dynamique souhaité :

com.vdoc.kit.ui.extensions.view.InlineEditingViewExtension

Paramétrage

Plusieurs attributs peuvent être définis dans Studio > Sous-formulaire d’étape > Champ tableau dynamique pour compléter le mécanisme d’édition des cellules du tableau :

  • L’attribut editable-fields permet de définir la liste des colonnes (noms systèmes des champs séparés par des point-virgules) à rendre éditables. Les autres colonnes seront affichées dans la vue en mode lecture. Cet attribut est optionnel. Si non présent dans le paramétrage du champ tableau, toutes les colonnes (sous-champs tableau présents dans le formulaire ligne de tableau) seront par défaut affichés dans la vue en mode édition.
  • L’attribut throw-event-fields permet de définir la liste des colonnes (noms systèmes des champs séparés par des point-virgules) qui déclencheront des allers-retours serveur. Pour qu’aucun champ ne déclenche d’aller-retour serveur, indiquez la valeur none.
  • L’attribut fields-to-exclude permet de définir, dans le cas de la duplication, les champs à exclure (noms systèmes des champs séparés par des point-virgules).
  • L’attribut fields-to-copy permet de définir, dans le cas de la duplication, les champs à copier (noms systèmes des champs séparés par des point-virgules).
  • L’attribut fields-to-map permet de définir, dans le cas de la duplication, les listes de couples de champs à copier (séparés par des ; ). Les champs source et destination sont séparés par le caractère pipe (|). Permet d’alimenter un champ cible à partir d’un champ source ne portant pas le même nom système.
  • L’attribut disable-deletion permet d’inhiber la fonctionnalité de suppression.

Exemples

Uniquement les deux champs Quantité et Les jours de la semaine seront éditables et ils déclenchent tous deux des aller-retours serveur :

editable-fields=Quantite;LesJoursDeLaSemaine

Uniquement les deux champs Quantité et Les jours de la semaine seront éditables, seul le champ Les jours de la semaine déclenchera un aller-retour serveur :

editable-fields=Quantite;LesJoursDeLaSemaine
throw-event-fields=LesJoursDeLaSemaine

Aucun champ éditable ne déclenche d’événement aller-retour serveur :

throw-event-fields=none

Dupliquer certains champs en spécifiant leurs noms systèmes :

fields-to-copy=fieldX;fieldY;fieldZ

Dupliquer tous les champs :

fields-to-copy=*

Exclure certains champs en spécifiant leurs noms systèmes :

fields-to-exclude=fieldA;fieldB

Transformer certains champs en

spécifiant leurs noms systèmes :

fields-to-map=sourceField1|destinationFieldX;sourceField2|destinationFieldY;sourceField3|destinationFieldZ

Inhiber la fonction de suppression sur les tableaux :

disable-deletion=true

Exemple de code JavaScript

Mise à jour de champs d’une ligne en fonction d’autres champs.

Dans cet exemple, un élément Script a été ajouté dans le sous-formulaire d’étape (où se trouve le tableau dynamique).

function onFieldChanged( field )
{
  if ( "LesEvenements".equals(field.getPropertyName()) )
  {
    // vérification de l'existence d'un événement déclenché par une cellule.
    var event = Packages.com.vdoc.kit.ui.extensions.events.CellEvent.getCellEvent();
    if ( event == null )
      return;

    // récupération de la ligne de tableau
    var cellResource = event.getResource();

    // mise à jour d'autres champs en fonction de la cellule modifiée
    if ( "LesJoursDeLaSemaine".equals(event.getProperty().getName()) )
    {
      cellResource.setValue("Description",event.getValue());
    }
    else if ( "Quantite".equals(event.getProperty().getName()) )
    {
      cellResource.setValue("Utilise",event.getValue());
    }
  }
}