Tableaux de sous-processus é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 de sous-processus ainsi que le changement d’étape directement depuis la vue. Il permet aussi de gérer les événements et les abonnements entre cellules.

Fonctionnalités

  • Ajout, édition et suppression de lignes de tableaux de sous-processus
  • Changement d’étape directement depuis la vue
  • 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 de sous-processus lui-même onPropertyChanged en Java et onFieldChanged en JavaScript
  • Manipulation des cellules en Java ou JavaScript :
    • Utilisation de la structure Java CellEvent
    • Utilisation de la structure Java WorkflowActionEvent

Utilisation

Pour mettre en place ce comportement, il suffit de :

  • Déclarer une classe d’extension JAVA sur la vue associée au tableau de sous-processus.
  • Déclarer une classe d’extension JAVA sur le formulaire contenant le tableau de sous-processus.
  • Ajouter un sous-formulaire comportant les champs à éditer au sein du tableau.

En posant du paramétrage dans la zone Attributs du champ tableau de sous-processus, il est possible de spécifier la liste des champs en édition et s’ils doivent déclencher des aller-retours serveur.

Extension de vue

Poser l’extension suivante sur la vue du tableau de sous-processus souhaité :

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

Extension de document

Poser l’extension suivante sur le formulaire contenant le tableau de sous-processus :

com.vdoc.kit.ui.extensions.document.InlineEditingDocumentExtension

Sous-formulaire d’édition de champs

  • Créer un sous-formulaire dans le sous-processus (exemple : MAIN_DOCUMENT_Edit).
  • Ajouter les champs à rendre éditables dans le contexte du tableau de sous-processus.
  • Ajouter dans les attributs du tableau de sous-processus l’attribut : form-name=MAIN_DOCUMENT_Edit (cf. section suivante).

Paramétrage

Deux attributs peuvent être utilisés sur le champ tableau de sous-processus pour compléter le mécanisme d’édition des lignes.

L’attribut form-name (obligatoire) permet de définir le sous-formulaire à utiliser dans le contexte du tableau de sous-processus.

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. Tous les autres champs seront affichés en mode lecture. Cet attribut est toutefois optionnel. Si non présent dans le paramétrage, tous les champs de la vue seront par défaut 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, utiliser la valeur none.

Affichage

La classe de style CSS “lastCell” est posée automatiquement sur la dernière cellule de chaque ligne du tableau affiché. Cette classe peut donc être personnalisée si besoin, via modification de la skin.

Exemple de paramétrage

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

form-name=MAIN_DOCUMENT_Edit
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.

form-name=MAIN_DOCUMENT_Edit
editable-fields=Quantite;LesJoursDeLaSemaine
throw-event-fields=LesJoursDeLaSemaine

Aucun champ éditable ne déclenche d’événement.

form-name=MAIN_DOCUMENT_Edit
throw-event-fields=none

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 de sous-processus).

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());
    }
  }
}

Exemple de code JavaScript lié au changement d’étape

Vérification d’une valeur de champ au clic d’un bouton d’action de workflow.

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

function onBeforeSubmit( actionKey )
{
  var event = Packages.com.vdoc.kit.ui.extensions.events.WorkflowActionEvent.getWorkflowActionEvent();
  if ( event != null )
  {
    var value = event.getResource().getValue("Texte");
    if ( value == null || "".equals(value) )
    {
      event.getResource

Controller().inform("Texte", "Hey! You should type something here...");
      alert(event.getAction().getLabel() + " action clicked.");
      return false;
    }
  }
  return true;
}