Concevoir un userform

Partager sur facebook
Partager sur twitter
Partager sur linkedin
Les boîtes de dialogue (Userform) 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 vaut 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, votre document doit être enregistré dans un format acceptant les macros .docm ou .dotm s’il s’agit d’un modèle.

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 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 :

  1. 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.

  2. 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).

  3. 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. 

  1. 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. 

  2. Repérez le champ Caption (légende) et cliquez 2 fois derrière Label1 pour le sélectionner.

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

les zones de texte - propriété 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. 

  1. 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é.
  2. Nous allons à présent nommer cette zone de texte pour pouvoir 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 suffisamment explicites, sans accent ni espace.

Répétez cette opération pour chaque élément à récupérer et reportez tous les champs Name sur une feuille de papier pour les avoir à dispo pour le code du bouton « Valider ».

boite

 

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).

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être Proprié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« . 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 :

  1. Caption : Annuler
  2. Name : Cancel

facultatif - insérer une image

A présent, nous allons ajouter notre image.

  1. Cliquez sur l’icône .

  2. Dans la fenêtre de Propriétés, double-cliquez sur « Picture » et pointez vers votre image. Validez.

  3. 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 lancer la boîte de dialogue, cliquez sur le bouton  situé dans la barre d’outils supérieure 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 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 le plus simple, nous allons commencer par lui.

Dans votre UserForm, double-cliquez sur le bouton que vous avez intitulé « Annuler ».

Le code suivant apparaît :

Nous placerons notre code entre ces 2 lignes.

L’objectif de notre code est de simplement refermer la boîte de dialogue. 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"

Nous entamons là la partie la plus complexe et la plus longue de notre code.
Nous allons devoir enchaîner plusieurs actions :

– 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 » comme nous l’avions fait pour le bouton « Annuler ».

Cette fois, vous obtenez les 2 lignes de code suivantes :

Seul changement : le nom du bouton.
Comme précédemment, tout notre code sera placé entre ces deux lignes.

Placez votre point d’insertion entre ces deux lignes.

les syntaxes selection.goto et selection.insertafter

L’objectif du code récupérer les données saisies par l’utilisateur. 

Souvenez-vous : dans notre document Word, nous avons défini, en page 2, différents signets. Nous allons déplacer notre curseur sur chacun de ses signets et y insérer le contenu de notre boîte de dialogue.

Nous aurons besoin de 2 instructions pour cette macro :

– la première pour positionner notre curseur à l’emplacement du signet.
– la seconde pour insérer le texte saisi par l’utilisateur.

La syntaxe pour atteindre un signet Word est la suivante :

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

Certains paramètres sont optionnels. Nous nous contenterons donc de selection.goto,,, »nom_du_signet ».

Pour insérer le texte, nous aurons besoin de  :

selection.InsertAfter nom_du_contrôle

où nom_du_contrôle correspond aux champs Name que vous avez reportés sur une feuille de papier.
Sur la 1ère ligne de code, nous placerons le nom du signet et sur la 2ème, le cham Name.
Par exemple, nous avons placé un signet « date » pour la date du courrier et affecté le nom « datel », ce qui donne pour nos deux premières lignes de code :

Selection.GoTo , , , « date »
Selection.InsertAfter datel

Nous répétons cette opération pour chaque champ à récupérer et à insérer, ce qui donne, dans mon cas de figure (nous traiterons plus bas le cas particulier de l’adresse) :

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

Les noms des signets et des contrôles Name sont bien évidemment à adapter à votre cas de figure.

Les signets « salutation1 » et « salutation2 » font référence au même contenu, inséré à 2 emplacement différents.

J’ai positionné le signet « debut » en tout dernier. Il permet juste de placer le curseur en début de document avant qu’on ne rende la main à l’utilisateur.

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

cas particulier de l'adresse

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

mais tout en insérant un saut de ligne entre chaque élément (à la place des « -« ). C’est pour quoi nous allons insérer le code « &chr(10) qui permet de traiter ce point.

Notre syntaxe pour l’adresse sera donc : 

 societe & chr(10) & contact & chr(10) & rue1 
& chr(10) & rue2 & chr(10) & cp & " " & ville

Insérez ce code après la ligne Selection.InsertAfter datel :

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

l'instruction unload me

Nous avons inséré les données de l’utilisateur dans le document mais la boîte de dialogue demeure ouverte !

Il faut donc insérer une ultime instruction dans notre code pour résoudre ce problème : unload me (ou unload Userform1) est notre instruction. 

Insérez cette instruction juste avant la ligne End Sub.

Lancement automatique de la macro

Lancer une macro manuellement est assez contraignant et dans le cas présent, l’idéal serait qu’elle s’active automatiquement lors de l’ouverture du document.

Sélectionnez la fenêtre Projet
Double-cliquez sur ThisDocumentDans la fenêtre de code (zone de droite), 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 ce que nous voulons.

Il ne nous reste plus qu’à faire afficher notre userform à l’écran pour que l’utilisateur puisse la remplir. Cette action s’accomplit grâce à l’instruction nom_de_la_userform.show, ici userform1.show puisque c’est le nom de notre userform.

Le code 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… » pour que votre macro se lance.

Partager sur facebook
Partager sur linkedin