Création d’un bouton pour ajouter et supprimer une section

Dans une conception de formulaire interactive, il est fréquent qu'une ou plusieurs sections du formulaire ne soient pas affichées tant que l'utilisateur ne sélectionne pas l'option permettant de les inclure. Dans Designer, vous pouvez ajouter un bouton avec un script qui ajoute ou supprime de manière dynamique une section (sous-formulaire) donnée dans le formulaire lorsque l’utilisateur clique sur le bouton.

Ainsi, dans l'exemple de bon de commande interactif, l'utilisateur peut cliquer sur le bouton d'ajout de commentaires pour afficher la section de commentaires (sous-formulaire de commentaires). Ce bouton permet d'ajouter des commentaires ou de les supprimer, selon l'état actif du sous-formulaire. Chaque fois que l'utilisateur clique sur le bouton, le script vérifie si le sous-formulaire de commentaires est affiché, puis met à jour la légende du bouton en conséquence.

Le bouton déclenche un script qui utilise instanceManager , l’objet Modèle d’objet de formulaire XML qui gère la création, la suppression et le déplacement des occurrences d’objets de formulaire. Lorsque l’utilisateur final supprime le sous-formulaire Comment, l’objet instanceManager supprime le sous-formulaire du modèle d’objet de document (DOM) des données de formulaires, ainsi que du DOM de données.

Notez que instanceManager utilise quatre méthodes : addInstance , removeInstance , moveInstance et setInstances . Par convention, un objet instanceManager prend le nom du sous-formulaire, précédé d’un trait de soulignement ( _nomdusous-formulaire ). La syntaxe pour instanceManager est _nomdusous-formulaire.nomdelaméthode() .

Dans l’exemple de formulaire interactif de bon de commande, l’auteur a rédigé le script JavaScript ci-après dans l’éditeur de script en utilisant la méthode setInstances afin d’ajouter et de supprimer le sous-formulaire de commentaires et de changer la légende du bouton. Observez que l’instruction comments.count == 0 property renvoie le nombre d’instances de sous-formulaire appelées. 

// Invoke the Instance Manager to add and remove the comments subform. 
 
if (_comments.count == 0) {// The count property specifies the current number      
                                            // of instances instantiated. 
    _comments.setInstances(1);                                                // Add the comments subform. 
    this.resolveNode("caption.value.#text").value = "Clear Comments";                                                                                                            // Change the button's caption. 
} 
 
else { 
    _comments.setInstances(0);                                                // Remove the comments subform. 
    this.resolveNode("caption.value.#text").value = "Add Comments";                                                                                                            // Change the button's caption. 
}
Vous pouvez également utiliser la boîte de dialogue Créateur d’actions dans le menu Outils pour créer des fonctions interactives communes dans des formulaires dotés d’une disposition souple, sans avoir à écrire de scripts.

Création de boutons d'ajout et de suppression

L'ajout de boutons à un formulaire interactif permet aux utilisateurs finaux de lancer des actions, telles que l'ajout et la suppression d'instances de sous-formulaires définissant des sections (par exemple, des rangées d'éléments dans un formulaire de commande).

Vous pouvez aussi ajouter une info-bulle au bouton de suppression pour afficher la mention « Supprimer l’article » lorsque l’utilisateur place le curseur sur le bouton. L'utilisation de boutons de suppression distincts permet aux utilisateurs de supprimer des rangées précises du formulaire.

Ainsi, l’exemple de bon de commande interactif comporte un bouton d’ajout d’élément et un bouton de suppression représenté par un X pour chaque sous-formulaire de détail. Lorsque l'utilisateur clique sur le bouton d'ajout d'éléments, un script ajoute une rangée d'articles. Lorsque l'utilisateur clique sur l'un des boutons de suppression, un script supprime la rangée d'articles associée.

Vous pouvez également utiliser la boîte de dialogue Créateur d’actions (accessible par le menu Outils) pour créer des fonctions interactives communes dans des formulaires dotés d’une disposition souple, sans avoir à rédiger de scripts. Voir Création d’actions dans les formulaires .

Bouton d'ajout d'élément

Le script JavaScript ci-après, associé à l’événement click du bouton d’ajout d’article, permet à l’utilisateur d’ajouter une ligne d’article à l’exemple de formulaire interactif de bon de commande. Le script effectue de nouveau les calculs dans le formulaire pour que le champ Total prenne en compte la nouvelle rangée.

Etant donné que les utilisateurs ajoutent uniquement des rangées d'articles avec le bouton d'ajout d'élément, le script n'a pas besoin de vérifier le nombre minimal d'occurrences. 

// Invoke the Instance Manager to add one instance of the detail subform. 
_detail.addInstance(1); 
 
//Invoke the recalculate method to include the field values from the added subform in calculations. 
xfa.form.recalculate(1);

Bouton de suppression

Le script JavaScript ci-après, associé à l’événement click du bouton de suppression, permet à l’utilisateur de supprimer une instance du sous-formulaire de détail dans l’exemple de formulaire interactif de bon de commande. Le script effectue de nouveau les calculs dans le formulaire pour que le champ Total prenne en compte la suppression de la rangée. 

// Invoke the Instance Manager to remove the current instance of the detail subform. 
_detail.removeInstance(this.parent.index); 
 
// Invoke the recalculate method to update the form calculations. 
xfa.form.recalculate(1);

La valeur d'occurrence minimale de départ du sous-formulaire detail étant égale à 2, le script doit réduire cette valeur pour permettre à la personne remplissant le formulaire de supprimer les deux rangées d'articles qui apparaissent automatiquement lorsque le formulaire est généré. Ce script est ajouté à l’événement initialize du sous-formulaire de détail. 

// Reset the minimum occurrence value of the detail subform. 
this.occur.min = "0";

Comme le formulaire permet à l’utilisateur de supprimer toutes les instances du sous-formulaire de détail, le script de l’événement calculate du champ Total ( numTotal ) doit vérifier qu’il existe au moins une instance du champ numAmount dans le sous-formulaire de détail. En effet, si le calcul ne trouve aucune occurrence du champ numAmount , une erreur se produit. Ce script est ajouté à l’événement Calculate du champ numTotal . 

// Verify at least one instance of the numAmount field exists. 
if (exists(detail[0].numAmount) == 1) then 
    Sum(detail[*].numAmount) 
endif