Concevoir un userform

Les boîtes de dialogue (ou Userform en anglais) permettent une véritable interaction avec l’utilisateur.  Elles comportent des zones de texte, des listes déroulantes, des cases à cocher… qui guident l’utilisateur dans ses choix. Elles sont donc très présentes en programmation.

Nous allons aujourd’hui découvrir comment concevoir ce type d’userform à travers un petit exercice Word mais le principe de la Userform vaut également pour tous les logiciels Office.

Pour cet exercice, nous repartirons sur la promesse d’embauche de la leçon précédente. Nous allons créer sous Word une boîte de dialogue pour permettre à un utilisateur de saisir tous les renseignements nécessaires pour finaliser le document. Pour cela, les zones à compléter ont été marquées à l’aide de signets.

Pour mémoire, pour visualiser les emplacements des signets dans un document Word, activez FichierOptions, Options avancées, et cochez la case Afficher les signets.

comment afficher un symbole signet dans Word

Les emplacements sont matérialisés par une [ grise. Pour plus de clarté, j’ai indiqué dans l’illustration ci-dessous le nom de chacun de ces signets en violet et à côté de la  [ : imprimez cette page car nous aurons besoin des ces indications pour insérer les différents éléments de notre boîte de dialogue à l’issue de notre macro.

signets

Créer une boîte de dialogue ou Userform

A présent, entrons dans le vif du sujet et passons à la création de la boîte de dialogue.

Tout d’abord, affichez l’éditeur Visual Basic (Alt F11).

Cliquez sur l’icône userform userform à gauche dans la barre d’outils.

Une grille intitulée Userform1 s’affiche ainsi qu’une barre d’outils Contrôles. user2

Les contrôles servent à positionner des des Zones de textes, cases à cocher, listes déroulantes… dans le Userform.
A l’aide de votre souris, survolez chacun de ces contrôles afin de bien les identifier.
Au cours de cette leçon, nous allons manipuler certains de ces contrôles (Intitulé, zone de texte, bouton de commande et, pour le plaisir, Image).

Agrandissez à présent un peu la Userform : positionnez votre curseur sur un angle de la Userform et tirez à l’aide de la souris. Vous pourrez, bien évidemment, à tout moment réajuster la taille de cette boîte.

Ajouter des contrôles Intitulés et Zones de texte

Avant d’ajouter nos contrôles sur notre boîte de dialogue, nous devons tout d’abord lister les informations que nous aurons besoin de récupérer :

L’adresse : elle comprend un champ societe, contact, rue1, éventuellement rue2, cp et ville. Nous créerons donc autant de champs textes que d’indications à fournir, en l’occurrence 6 zones.

La date, nos références, vos références, pièces jointes, objet, signataire, titre du signataire : pour ces champs, nous utiliserons les mêmes noms que ceux utilisés dans les signets, à l’exception de date que nous nommerons ‘datel’ (‘date’ étant un mot réservé en programmation).

Salutation (le contenu des salutations 1 et 2 étant identiques, un seul contrôle suffit). Par contre, il convenait de définir 2 signets, un par position dans le corps de la lettre.

A présent, plaçons les contrôles.

Les intitulés (étiquettes) – Propriété Caption

Cliquez sur l’icône intitule et déplacez votre curseur sur la Userform. Votre curseur  prend la forme +  A. Cliquez sur un emplacement de la grille pour ajouter une étiquette (Label en anglais).captionPour modifier l’intitulé de l’étiquette et afficher Société, dans la boîte de dialogue Propriétés située à gauche de votre écran sous la zone Projets. Si cette fenêtre n’apparaît pas, appuyez sur F4. Repérez le champ Caption (légende) et cliquez 2 fois derrière Label1 pour le sélectionner.

A présent, tapez tout simplement le nom de l’étiquette, à savoir « Société : » et appuyez sur entrée.

Les zones de textes – Propriétés Name

A présent, nous allons insérer notre première zone de texte. Contrairement à l’Intitulé qui fournit des indications destinées à l’utilisateur sur la zone qui suit, une zone de texte est une zone que l’utilisateur peut compléter. Cliquez sur l’icône  ab| et tracez une zone de texte juste à côté de l’étiquette que vous venez de dessiner. Tracez-la suffisamment longue pour qu’elle puisse accueillir un nom de société.

Nous allons à présent nommer cette zone de texte. Pourquoi ? Tout simplement parce que nous en aurons besoin pour récupérer son contenu. Dans la fenêtre de Propriétés, cliquez 3 fois sur le champ (Name), et saisissez le nom « societe ». Validez en appuyant sur entrée. Choisissez de préférence des noms courants, parlants et sans accent ni espace, pour des questions de sécurité.

Pour chaque élément à récupérer, à votre tour créez une étiquette et une zone de texte comme ci-dessous :

boite

Pour celles ou ceux qui le souhaitent, vous pouvez télécharger ici la Userform ci-dessus. Sauvegardez-la sur votre disque dur puis, dans le menu Fichier de l’éditeur Visual Basic, sélectionnez l’option Importer un fichier et pointez vers le fichier. Validez : Userform1 est insérée dans le répertoire Feuilles.

Les autres contrôles et leurs propriétés : boutons de commande, image et UserForm

Il nous reste à présent quelques éléments à dessiner sur notre boîte de dialogue : un bouton « Valider » pour valider le contenu, un bouton « Annuler » pour refermer la boîte de dialogue et enfin, une image (logo), pour la fine bouche.

Les boutons de commande – Propriétés Caption et Name

  • Pour placer un bouton de commande, cliquez sur l’icône  puis cliquez sur un emplacement libre de votre boîte de dialogue.
  • Il va à présent falloir ajouter un texte à ce bouton. C’est là le rôle de la propriété Caption. Dans la fenêtrePropriétés, cliquez 2 fois sur « Caption » et saisissez « Valider ». Appuyez sur entrée pour terminer.
  • Nous allons à présent donner un nom à ce bouton. Double cliquez sur la propriété « Name » et saisissez « Ok ». On le voit : le nom du bouton (« Ok ») peut être différent de son intitulé (« Valider »).
  • De la même manière, créer un bouton ayant les propriétés suivantes :
    • Caption : Annuler
    • Name : Cancel

Facultatif – Insérer une image

A présent, nous allons ajouter notre image. Pour ce faire, je vais utiliser le logo de ce site (vous pouvez faire de même en opérant un clic droit sur l’image en Hautet à gauche de cette page, option « Enregistrer l’image sous »).

  • Cliquez sur l’icône 
  • Dans la fenêtre de Propriétés, double-cliquez sur « Picture » et pointez vers votre image. Validez
  • Si votre image n’apparaît pas intégralement dans votre zone d’image, double-cliquez sur la propriété PictureSizeMode et testez les différentes options une à une.
  • Si vous ne souhaitez pas rajouter de bordure autour de votre image, double-cliquez sur la propriété BorderStyle et sélectionnez la première option « 0-fmBorderStyleNone ».

Tester la boîte de dialogue

  • Pour visualiser la boîte de dialogue, cliquez  puis sur le bouton Bouton  de la barre d’outils ou appuyez sur F5.
  • Pas mal non ? Reste cependant à finaliser un dernier point : notre boîte de dialogue s’intitule « Userform1 » et nous allons remédier à ce petit inconvénient.
  • Pour refermer la boîte de dialogue, cliquez sur la case « x » : les boutons « valider » et « Annuler » ne fonctionnent pas… encore du moins, car nous ne leur avons pas associé de code !
  • Une fois votre boîte refermée, sélectionnez votre Userform en cliquant sur la barre de titre bleue de la boîte de dialogue. Dans la fenêtre de propriétés, champ « Caption », saisissez « Renseignements utilisateur ».
  • Testez à nouveau votre boîte de dialogue… et sauvegardez !

Insérer du code : bouton « annuler »

Le code du bouton Annuler étant extrêmement limité, nous allons commencer par le traiter.

  • Dans votre UserForm, double-cliquez sur le bouton que vous avez intitulé « Annuler »
  • Le texte suivant apparaît :

Que doit-il se passer si l’utilisateur clique sur ce bouton « annuler » ? La boîte de dialogue doit simplement se refermer. L’instruction Visual Basic correspondante est unload nom_de_la_feuille.

  • Placez-vous entre les deux lignes de code et saisissez « Unload Userform1 »
  • Testez à nouveau votre UserForm en cliquant sur F5 et sur le bouton « Annuler ». Cette fois, tout devrait fonctionner…

Insérer du code : bouton « Valider » – Positionner le curseur dans le document Word

Nous entamons là la partie la plus complexe et la plus longue de notre code.

Voici le détail des opérations que nous allons devoir accomplir :

  • Récupérer le contenu de chacune de nos zones de texte.
  • Insérer ce contenu dans notre document grâce à nos signets.
  • Refermer la boîte de dialogue.
  • Positionner notre curseur au début de notre lettre pour que l’utilisateur puisse compléter le corps de la lettre.

Ouf !

Tout d’abord, pour insérer le code, vous l’aurez deviné, il vous faut double-cliquer sur le bouton « valider ».

Vous obtenez les deux lignes de code suivantes :

Fonction Placez votre point d’insertion entre ces deux lignes.

S’agissant de notre première boîte de dialogue, nous allons faire simple et récupérer les données telles que, sans les reformater, en partant du principe que l’utilisateur les ait saisies correctement. Nous veillerons au cours des leçons suivantes à améliorer et optimiser ce code.

Positionner le curseur dans le document Word

Nous avons défini, en page 2, différents signets dans notre document Word. Reprenez ou imprimez cette liste.

Nous allons déplacer notre curseur sur chacun de ses signets et y insérer le contenu de notre boîte de dialogue.

Vous avez sans doute noté que nous n’avons créé qu’un seul signet pour l’adresse alors qu’elle comporte plusieurs lignes : nous traiterons ce cas vers la fin de cette leçon. Let’s go, ce n’est pas très compliqué !

La syntaxe pour atteindre un signet Word est la suivante :

selection.goto([What], [Which], [Count], [Name] as range)

Encore une fois, faisons simple et ne nous embarrassons pas de détails inutiles (nous ne sommes pas des programmeurs chevronnés… pour l’instant !).

La syntaxe minimale dont nous aurons besoin est selection.goto,,, »nom_du_signet ».

Pour notre signet « date », cela donnera donc selection.goto,,, »date ». Insérez cette ligne de code et double-cliquez sur « Userform » dans la fenêtre Projets, puis appuyez sur F5 pour lancer la macro. Déplacez la boîte de dialogue : votre curseur est bien placé derrière « Paris, le « . Appuyez sur le bouton « Cancel » et revenez dans l’éditeur de code et double-cliquez à nouveau sur le bouton « valider ».

Voici le reste des instructions à saisir (faites un copier-coller dans Word si vous le souhaitez) :

Private Sub ok_Click()
Selection.GoTo , , , « date »
Selection.GoTo , , , « vosref »
Selection.GoTo , , , « nosref »
Selection.GoTo , , , « objet »
Selection.GoTo , , , « pj »
Selection.GoTo , , , « salutation1 »
Selection.GoTo , , , « salutation2 »
Selection.GoTo , , , « signataire »
Selection.GoTo , , , « titre »
Selection.GoTo , , , « debut »
End Sub

Pour l’instant, nous n’avons fait que déplacer notre curseur aux différents signets. Nous allons apprendre à présent, àinsérer le contenu de notre boîte de dialogue.

Insérer du code : bouton « valider » – insérer le contenu de la boîte de dialogue

Nous l’avons vu précédemment dans notre petit cahier des charges, après avoir atteint chaque signet, il nous faut insérer le contenu de la boîte de dialogue correspondant.

Par exemple, à l’emplacement du signet « date », nous devons insérer le contenu du contrôle de notre UserForm que nous avons appelé « datel ».

Idem pour le signet « vosref », nous allons insérer le contenu de la zone de texte de notre UserForm que nous avons nommée « vosref » et ainsi de suite.

Pour insérer du texte, la syntaxe est on ne peut plus simple :

selection.InsertAfter nom_du_contrôle

Ce qui nous donne, pour la date, selection.InsertAfter datel
Placez cette ligne de code sous la ligne Selection.GoTo , , , « date » en insérant une ligne supplémentaire.

Principe : on atteint le signet, on insère le texte. On atteint le signet, on insère le texte, etc. Il va donc falloir insérer une instruction selection.InsertAfter après chaque ligne selection.goto.

Notre code sera donc :

Private Sub ok_Click()
Selection.GoTo , , , « date »
Selection.InsertAfter datel
Selection.GoTo , , , « vosref »
Selection.InsertAfter vosref
Selection.GoTo , , , « nosref »
Selection.InsertAfter nosref
Selection.GoTo , , , « objet »
Selection.InsertAfter objet
Selection.GoTo , , , « pj »
Selection.InsertAfter pj
Selection.GoTo , , , « salutation1 »
Selection.InsertAfter salutation
Selection.GoTo , , , « salutation2 »
Selection.InsertAfter salutation
Selection.GoTo , , , « signataire »
Selection.InsertAfter signataire
Selection.GoTo , , , « titre »
Selection.InsertAfter titre
Selection.GoTo , , , « debut »
End Sub

Remarques :

Signets « salutation1 » et « salutation2 » : le contenu de ces deux signets est identique, à savoir le contenu de la zone de texte que nous avons appelée « salutation ».

Signet « debut » : on ne fait que positionner le curseur au début du corps de la lettre, avant de rendre la main à l’utilisateur.

A présent, occupons-nous du cas particulier de l’adresse.

Insérer du code : bouton « valider » – insérer un retour chariot dans Word

Une adresse s’écrit sur plusieurs lignes.
Nous aurions fort bien pu définir autant de signets que de lignes mais il est plus simple -nous verrons plus tard pourquoi- d’insérer des retours chariot à l’aide de code.

Dans le cas qui nous occupe, nous devons récupérer, dans l’ordre, les valeurs des contrôles suivants:

societe – contact – rue1 – rue2 – cp – ville

L’adresse est égale à tous ces contrôles, « additionnés » ou plutôt concaténés (mis bout à bout) et séparés par un retour chariot ou un espace (cp et ville).

Si le « + » est le symbole de l’addition, & s’emploie pour concaténer des chaînes de caractères.

Le changement de ligne (retour chariot) s’écrit quant à lui chr(10) et l’insertion d’un espace se fait à l’aide de 2 guillemets séparés par un espace  » « .

En langage clair, nous pourrions écrire notre adresse comme ceci (rc = retour chariot) :

adresse = societe + rc + contact + rc + rue1 + rc + rue2 + rc + cp + un espace + ville

Si nous remplaçons la ligne ci-dessous par les équivalents visual basic, nous obtenons donc :

adresse = societe & chr(10) & contact & chr(10) & rue1 & chr(10) & rue2 & chr(10) & cp &  »  » & ville

Il ne nous reste plus qu’à atteindre le signet « adresse » et à insérer dans notre code la syntaxe ci-dessus. Ce qui nous donne, au final :

Private Sub ok_Click()
Selection.GoTo , , , « date »
Selection.InsertAfter datel
Selection.Goto , , , « adresse »
Selection.InsertAfter societe & chr(10) & contact & chr(10) & rue1 & chr(10) & rue2 & chr(10) & cp &  »  » & ville
Selection.GoTo , , , « vosref »
Selection.InsertAfter vosref
Selection.GoTo , , , « nosref »
Selection.InsertAfter nosref
Selection.GoTo , , , « objet »
Selection.InsertAfter objet
Selection.GoTo , , , « pj »
Selection.InsertAfter pj
Selection.GoTo , , , « salutation1 »
Selection.InsertAfter salutation
Selection.GoTo , , , « salutation2 »
Selection.InsertAfter salutation
Selection.GoTo , , , « signataire »
Selection.InsertAfter signataire
Selection.GoTo , , , « titre »
Selection.InsertAfter titre
Selection.GoTo , , , « debut »
End Sub

Pour l’heure, il nous reste encore à résoudre 2 problèmes fondamentaux pour que cette macro soit totalement opérationnelle : refermer la boîte de dialogue (elle reste affichée, même après un clic sur le bouton valider) et son lancement (pour l’instant, nous la lançons à travers l’éditeur, ce qui n’est pas l’idéal…).

Rassurez-vous : le plus dur est fait et vous le constaterez, les deux dernières étapes ne vous prendront pas plus de 5 minutes…

Refermer la boîte de dialogue

Vous l’avez constaté : si nous renseignons notre boîte de dialogue et cliquons sur le bouton « Valider », les informations sont bien insérées dans notre document Word… mais la boîte de dialogue reste affichée.

Il faut donc insérer une ultime instruction dans notre code pour résoudre cet épineux problème. Faisons court et simple :unload me (ou unload Userform1) est notre instruction. Le code final est donc :

Private Sub ok_Click()
Selection.GoTo , , , « date »
Selection.InsertAfter datel
Selection.Goto , , , « adresse »
Selection.InsertAfter societe & chr(10) & contact & chr(10) & rue1 & chr(10) & rue2 & chr(10) & cp &  »  » & ville
Selection.GoTo , , , « vosref »
Selection.InsertAfter vosref
Selection.GoTo , , , « nosref »
Selection.InsertAfter nosref
Selection.GoTo , , , « objet »
Selection.InsertAfter objet
Selection.GoTo , , , « pj »
Selection.InsertAfter pj
Selection.GoTo , , , « salutation1 »
Selection.InsertAfter salutation
Selection.GoTo , , , « salutation2 »
Selection.InsertAfter salutation
Selection.GoTo , , , « signataire »
Selection.InsertAfter signataire
Selection.GoTo , , , « titre »
Selection.InsertAfter titre
Selection.GoTo , , , « debut »
Unload me
End Sub

Passer par l’éditeur vb pour lancer la macro n’est pas commode ni à la portée de tous. Il existe forcément une alternative que je vous invite à découvrir.

Lancer la macro à l’ouverture du modèle

Nous souhaitons qu’à chaque création d’un nouveau document basé sur le modèle, la macro se lance automatiquement.

Il nous faut donc rattacher l’apparition de la boîte de dialogue à l’ouverture du modèle :

  • Sélectionnez la fenêtre « Projet »
  • Double-cliquez sur « ThisDocument »
  • Dans la fenêtre de code, dans la liste déroulante « (Général) », sélectionnez « Document ». Par défaut, cela affiche la procédure « Private sub document_New ».
  • La procédure document_new se déclenche lorsque l’utilisateur crée un nouveau document basé sur un modèle. C’est donc bien de cette dernière dont nous avons besoin.
  • Il ne nous reste plus qu’à faire apparaître la boîte de dialogue à l’écran pour que l’utilisateur puisse la remplir. Cette action s’accomplit grâce à l’instruction nom_de_la_userform.show. Dans notre cas de figure, c’est donc la syntaxe suivante qu’il faut insérer entre les deux lignes de code : userform1.show.

Le code final est donc :

Private sub Document_New()
Userform1.show
End Sub

Sauvegardez votre macro, refermez l’éditeur et sauvegardez votre modèle.

Il ne vous reste plus qu’à lancer ce dernier à l’aide de la commande « Fichier – Nouveau… ».

Votre macro est à présent totalement opérationnelle.
Pour avoir une idée des améliorations qu’il serait possible de lui apporter ou une suggestion d’exercice, rendez-vous à la conclusion.

Conclusion

Certes, cette leçon a été particulièrement longue, mais à l’issue de cette dernière, vous devriez être en mesure de créer vos propres boîtes de dialogue personnalisées.

Pas convaincu(e) ? Essayez ! Je vous invite à créer de toutes pièces une petite boîte de dialogue pour le modèle de fax. N’oubliez pas de définir vos signets à l’intérieur du document Word… Voici une suggestion de présentation :

Au cours des prochaines leçons, nous apprendrons à utiliser d’autres contrôles, telles les listes déroulantes, les cases à cocher.

Nous verrons également comment pré-remplir certaines zones : par exemple, le contrôle datej avec la date du jour formatée ou bien encore la zone signataire avec votre nom…

Vous aurez aussi remarqué que nous avions défini un signet sur la mention « Lettre recommandée avec ar » et que nous n’avons pas encore fait référence à ce dernier : nous avions pour cela besoin des formules conditionnelles que nous ne maîtrisons pas… encore…

Notre macro pêche aussi par le fait que l’utilisateur peut saisir n’importe quel texte dans n’importe quelle zone, par exemple, une suite de nombre ou du texte dans la zone « datej »… ce qui n’est pas trop problématique pour l’instant mais que nous apprendrons à résoudre.

Nadège GUILBERT

Conceptrice, animatrice du site www.top-assistante.com

Les commentaires sont fermés.