4 - Création du modèle liste contacts FileMaker

Ce modèle va vous permettre :
- la lecture des contacts
- la recherche
- le tri

Vous présenterez sur ce modèle :
- un bouton pour créer un nouveau contact
- une liste de contacts
- un moteur de recherche
- un bouton par contact pour accéder à sa fiche

Création de l'interface

Commencez par appliquer votre thème sur le modèle "Liste contacts".


         En mode modèle, cliquez sur Affichage + Activer le modèle + Liste contacts.

Cliquez sur Modèles + Modifier le thème..., sélectionnez tout en haut "Mon style tactile", puis cliquez sur "OK".

Pour réaliser l'interface de votre liste de contacts, vous allez avoir besoin d'éléments fixes de navigation haute et basse pour y mettre boutons et moteur de recherche, puis d'un élément corps qui se répétera pour présenter les informations de chaque contact avec un bouton pour aller la fiche d'un contact.


         Depuis le modèle "Liste contacts", cliquez sur Modèle + Eléments...

Pour supprimer un élément, sélectionnez-le puis cliquez sur le bouton Supprimer.
Pour en ajouter un, cliquez sur le bouton Créer..., puis sélectionnez "Navigation de haut de page" par exemple.

Cliquez sur le bouton Fin quand il ne reste plus que les éléments "Navigation de haut de page", "Corps" et "Navigation de bas de page".

Redimensionnez chaque élément :


         Cliquez sur la barre latérale du corps, puis indiquez Position - Taille - Hauteur 60 pt.

Cliquez sur la barre latérale de navigation haute, puis indiquez Position - Taille - Hauteur 70 pt.

Cliquez sur la barre latérale de navigation basse, puis indiquez Position - Taille - Hauteur 70 pt.

Réglez la largeur du modèle à 320 pt comme pour la fiche contact.


         Cliquez n'importe où sur le modèle, puis indiquez dans le premier onglet à droite Position - Taille Largeur 320 pt, puis cliquez sur la touche Entrée du clavier.

Appliquez le style "Fond" sur les trois éléments


         Faites un clic-droit sur chaque barre latérale, puis sélectionnez Style élément + Fond.

Vous devriez obtenir la figure suivante

Votre nouveau modèle est prêt pour accueillir vos différents objets.

Mise en place des rubriques

Commencez par la rubrique "txtContact" qui regroupe les informations essentielles que vous souhaitez voir sur votre liste pour chaque contact. Lors de la création de la base de données, vous aviez concaténé la civilité, le nom et le prénom.


         En mode modèle, cliquez sur Insertion + Rubrique...

Sélectionnez la rubrique "txtContact", ne cochez pas "Adjoindre le titre", puis cliquez sur le bouton OK.

Glissez la rubrique au milieu du corps.

Pour vous aider, lors du déplacement de votre rubrique, vous remarquerez des traits bleus qui vous indiqueront que vous êtes bien au milieu et au centre du corps.

Passez au style et au comportement de cette rubrique. En utilisation vous ne pourrez pas modifier directement cette rubrique, aussi, vous allez créer un style "Vue" qui, à l'opposé du style "Saisie", indiquera que la rubrique n'est que visible et non modifiable.


         Cliquez sur la rubrique "txtContact".

Dans l'onglet apparence (le troisième à droite), sélectionnez et indiquez :
 Graphismes - Fond Aucun
 Graphismes - Ligne Aucune
 Graphismes avancés - Espacement - Haut 3 pt - Gauche 7 pt - Droite 7 pt - Bas 2 pt
 Texte - 12 et couleur blanche
 Paragraphe - Alignement Gauche Milieu

Enregistrez sous nouveau style en entrant le nom "Vue", puis enregistrez dans le thème.

Recliquez sur la rubrique "txtContact", puis dans l'onglet données (le quatrième), décochez Comportement - Saisie de rubrique Mode utilisation

Avant de réaliser vos premiers tests, il faut ajouter les boutons pour créer et voir un contact, puis adapter le corps dont l'apparence changera selon le contexte.

Mise en place des boutons

Vous allez reprendre le bouton plus que vous aviez créé sur la fiche contact.


         En mode modèle, cliquez sur Affichage + Activer le modèle "Fiche contact".

Cliquez sur le bouton plus, puis Edition + Copier.

Activez le modèle "Liste contact", puis cliquez là où vous souhaitez coller le bouton, puis cliquez sur Edition + Coller.

Indiquez Position - Gauche 10 pt - Haut 10 pt.

Dupliquez ce bouton pour mettre en place le bouton d'activation de la fiche contact.


         Cliquez sur le bouton plus, puis cliquez sur Edition + Dupliquer.

Déplacez le nouveau bouton dans le corps en dessous et à gauche.

Double-cliquez sur le bouton, puis sélectionnez l'icône qui représente une grosse flèche vers la droite.

Cliquez sur l'action "Nouvel enreg./requête", puis dans la fenêtre qui s'ouvre, recliquez sur "Nouvel enreg./requête", puis appuyez sur la touche Supprimer.

Tapez "activer" et sélectionnez "Activer modèle", puis appuyer sur la touche Entrée.
Cliquez sur modèle d'origine, puis cliquez sur Modèle...
Sélectionnez le modèle "Fiche contact", puis cliquez sur le bouton OK, puis cliquez à nouveau sur OK.

Fermez la fenêtre de configuration du bouton.

Adaptez la position de la rubrique "txtContact" par rapport à ce nouveau bouton.


         En mode modèle, cliquez sur la rubrique "txtContact".

Indiquez Position - Gauche 60 pt - Haut 75 pt
Indiquez Taille - Largeur 240 pt - Hauteur 50 pt

Vous devriez obtenir la figure suivante :

Style du corps alterné et actif

Le corps dispose d'un style principal que vous avez utilisé jusque là pour définir votre couleur de fond noire. Avec l'affichage sous forme de formulaire de la fiche contact, c'est suffisant, mais avec l'affichage sous forme de liste, deux nouveaux styles permettent de distinguer l'enregistrement actif sur lequel on se trouve et proposer un style alterné une ligne sur deux.


         Cliquez sur la barre latérale du corps, puis dans l'onglet apparence cliquez sur "Principal" et sélectionnez "Alterné".

Cliquez sur la couleur blanche du fond, puis sélectionnez l'avant-dernier gris.


         Sélectionnez le style Actif, puis changer la couleur de fond par "666666".

Cliquez sur la flèche rouge pour enregistrez les modifications dans le style actuel, puis enregistrez dans le thème.

Vous allez pouvoir faire vos premiers tests, mais avant, importez quelques contacts dans votre application.

Importation de contacts

Vous pouvez importer des données depuis de nombreux formats comme .xls, .csv, ...— téléchargez un fichier Excel de contacts de démo.


         En mode utilisation depuis le modèle Administration + Contact.

Cliquez sur Fichier + Importer des enregistrements + Fichier...

Indiquez le fichier qui contient vos contacts, puis cliquez sur Ouvrir.

Sélectionnez "Ajouter" entre Source et Cible.

Si vous avez une ligne avec des titres, sélectionnez à gauche "Utiliser comme noms de rubriques", sinon sélectionnez "Données" pour importer toutes les lignes.

Cliquez sur chaque rubrique cible à droite pour faire correspondance avec vos données qui sont affichées complètement à gauche.

Cochez "Activer les options d'entrée automatique", puis cliquez Importer.

Cliquez sur "OK" à la fin de l'importation.

Vous devriez obtenir la liste de vos contacts importés.

Premiers tests

Vous allez vérifier votre liste en passant en mode utilisation et en indiquant que vous souhaitez voir le modèle sous forme de liste.


         Passez en mode utilisation depuis le modèle "Liste contacts", puis cliquez sur Affichage + Afficher sous forme de liste.

Essayez maintenant la navigation pour voir une fiche contact :


         Cliquez sur une des flèches sur votre liste.

Depuis la fiche du contact, cliquez sur le bouton de retour à la liste.

Si tout s'est bien passé, vous devriez pouvoir facilement passer de la liste à la fiche et vice et versa.

Vous avez en main une première version opérationnelle de l'application avec ses principales fonctionnalités : création, modification, suppression, visualisation.
Vous ajouterez la recherche et le tri, mais avant procédez à vos premiers tests concrets sur iPhone.

Test réel sur iPhone

Pour réaliser ce test, vous devez installer l'application gratuite FileMaker Go depuis l'App Store d'Apple — l'application n'est présentée que si vous consultez l'App Store depuis votre iPhone et que votre iPhone soit compatible avec les versions encore proposées (17, 18 et 19 à l'heure où nous écrivons ces lignes).

Pour transférer votre application Contacts.fmp12, il suffit de connecter votre iPhone à votre ordinateur , puis de glisser le fichier dans le répertoire FileMaker Go 19 dans les fichiers de votre iPhone. Une autre solution pratique est d'envoyer votre fichier en pièce jointe d'un email, puis de l'ouvrir depuis votre iPhone.

Selon la version de votre iPhone — ou iPad, dont vous vous servirez pour tester votre application, voici les premiers commentaires :
- FileMaker Go affiche une barre d'outils en haut et en bas avec des boutons, qui prennent de la place
- l'interface est calée à gauche
- le modèle fiche ne s'adapte pas à la hauteur

Réglages de l'interface

Commencez par régler le modèle fiche :


         Revenez à votre version ordinateur sur FileMaker Pro.

En mode modèle, sélectionnez toutes les rubriques, puis dans le premier onglet Position, déverrouillez le cadenas de gauche du "Dimensionnement automatique".

Cliquez sur le bouton poubelle, puis déverrouillez le cadenas de gauche et verrouillez le cadenas de droite.

En repassant en mode utilisation, vous remarquerez, qu'en modifiant la dimension de la fenêtre "Contacts", que la poubelle file à droite et que les rubriques sont bien centrées.
Reste la hauteur qui ne s'adapte pas.


         En mode modèle, cliquez sur la rubrique "Remarques", puis verrouillez le cadenas du bas.

Vous devriez obtenir la figure suivante :

Vous constaterez en repassant en mode utilisation et en redimensionnant la fenêtre "Contacts", que la fiche s'adapte harmonieusement en laissant les boutons accessibles.

Poursuivez avec le modèle liste :


         En mode modèle depuis "Liste contacts", sélectionnez le bouton flèche et la rubrique "txtContact", puis déverrouillez le cadenas de gauche dans "Dimensionnement automatique"

Il ne vous reste plus qu'à masquer la barre d'outils à l'ouverture de l'application en créant votre premier script FileMaker.

Mise en place d'un script d'ouverture

Vous nommerez votre premier script : "Ouverture", puis vous indiquerez à l'application de déclencher ce script à chaque première ouverture.
Les étapes du script seront assez simples :
- activer le modèle liste
- masquer la barre d'outils


         Cliquez sur Scripts + Espace de travail de scripts...

Cliquez sur le bouton plus pour créer un nouveau script, modifiez ce nom en "Ouverture", puis appuyez sur la touche Entrée du clavier.

Pour commencer à prendre de bonnes habitudes et aérer la lecture, tapez deux fois sur la touche Entrée pour créer des lignes vierges. 

Tapez "activer" et sélectionnez "Activer modèle", puis appuyez sur la touche Entrée.
Cliquez sur modèle d'origine, puis cliquez sur Modèle...
Sélectionnez le modèle "Liste contacts", puis cliquez sur le bouton OK.

Appuyez sur la touche Entrée pour passer à la ligne suivante.

Tapez "masq" et sélectionnez "Afficher/masq. barres d'outils", puis appuyez sur la touche Entrée.
Cliquez sur "Inverser", puis sélectionnez "Masquer".

Décochez l'affichage du script "Ouverture" à gauche.

Cliquez sur Scripts + Enregistrer le script.

Fermez la fenêtre "Espace de travail de script".

Paramétrez maintenant le déclenchement à l'ouverture de ce script :


         Cliquez sur Fichier + Options de fichier...

Sélectionnez l'onglet "Déclencheurs de script".

Cochez l'événement "SurOuverturePremier...", puis dans la fenêtre qui s'ouvre, sélectionnez le script "Ouverture", puis cliquez sur le bouton "OK".

Cliquez à nouveau sur le bouton "OK.

Avant de retransférer votre fichier "Contacts.fmp12" sur votre iPhone, prenez soin de repasser en mode utilisation pour sauvegarder vos dernières modifications.

Vous deviez maintenant avoir une interface qui réagit correctement quelque soit votre appareil — iPhone, iPad et même ordinateur.

Mise en place du moteur de recherche

Le moteur de recherche sera composé :
- d'une rubrique pour saisir la recherche
- d'un bouton pour lancer la recherche
- d'un bouton pour vider la recherche

Commencez par la rubrique "recherche" :


         En mode modèle depuis le modèle "Liste contacts".

Cliquez sur Insertion + Rubrique..., puis sélectionnez la rubrique "recherche".

Indiquez la Position - Gauche 90 pt - Haut 140 pt, puis Taille - Largeur 140 pt - Hauteur 50 pt.

Déverrouillez le cadenas de gauche dans le "Dimensionnement automatique".

Dans l'onglet apparence, Sélectionnez Fond "Aucun".

Cliquez sur le petit rectangle en dessous de Ligne pour désactiver les bordures, puis cliquez sur la bordure haute, puis la bordure basse.

Indiquez Espacement - Haut 0 - Gauche 0 - Droite 0 - Bas - 0.

Changez la couleur en blanc dans Texte.

Indiquez Alignement centre et milieu.

Enregistrez dans un nouveau style que vous nommerez "Recherche", puis enregistrez-le dans le thème.

Adaptez votre rubrique "recherche" pour que le terme recherché soit toujours le même quelque soit l'enregistrement où l'on se trouve.


         Cliquez sur Fichier + Gérer + Base de données...

Sélectionnez la rubrique "recherche", puis cliquez sur le bouton "Options" en bas à droite.

Dans "Autres options", cliquez sur "Utiliser le stockage global", puis cliquez plusieurs fois sur "OK" pour confirmer et fermez toutes les fenêtres.

Ajoutez les boutons sur les côtés :


         Dupliquez le bouton flêche, puis déplacez-le à x: 40 pt et y: 140 pt.

Dans apparence, indiquez Ligne "Continue", puis désactivez la bordure droite.

Indiquez Rayon d'angle : 20, puis appuyez sur la touche Entrée du clavier, puis désactivez les angles de droite — haut et bas.

Enregistrez dans un nouveau style que vous nommerez "Arrondi gauche", puis enregistrez-le dans le thème.

Changez l'icône du bouton et occupez vous de l'action pour vider la rubrique de recherche.


         Double-cliquez sur le bouton, puis sélectionnez l'icône en forme de petite croix épaisse.

Cliquez sur l'action "Activer modèle", puis dans la fenêtre qui s'ouvre, recliquez sur "Activer modèle", puis appuyez sur la touche Supprimer.

Tapez "définir" et sélectionnez "Définir rubrique", puis appuyer sur la touche Entrée.

Cliquez sur la petite roue crantée, puis cochez rubrique cible, puis sélectionnez la rubrique "recherche", puis cliquez sur le bouton "OK".

Si besoin, recliquez sur la petite roue crantée, puis cliquez sur le bouton "Définir" du Résultat de calcul.

Saisissez deux guillemets "", puis cliquez sur le bouton OK, puis cliquez à nouveau sur OK.

Fermez la fenêtre de configuration du bouton.

Ajoutez maintenant le bouton de recherche.


         Dupliquez le bouton croix que l'on vient de faire, puis déplacez-le à x: 250 pt et y: 140 pt.

Dans apparence :
- désactivez la bordure gauche, puis réactivez la bordure droite
- activez les angles de droite — haut et bas, puis désactivez les angles de gauche — haut et bas

Enregistrez dans un nouveau style que vous nommerez "Arrondi droit", puis enregistrez-le dans le thème.

Changez l'icône du bouton et occupez vous de l'action pour lancer la recherche.


         Double-cliquez sur le bouton, puis sélectionnez l'icône en forme de loupe.

Cliquez "Action unique", puis sélectionnez "Exécuter script", puis dans la fenêtre qui s'ouvre, cliquez sur le bouton plus en bas à gauche pour créer un nouveau script.

Entrez le nom de script "Rechercher contacts", puis cliquez sur le bouton "OK".

Le script va réaliser la recherche selon le contenu de la rubrique "recherche" :


         Dans la fenêtre "Modifier le script", tapez deux fois sur la touche Entrée pour créer des lignes vierges. 

Tapez "gestion" et sélectionnez "Gestion des erreurs", puis appuyez sur la touche Entrée.

Appuyez sur la touche Entrée pour passer à la ligne suivante.

Tapez "si" et sélectionnez "Si", puis appuyez sur la touche Entrée.
Tapez "est" et sélectionnez "EstVide", puis appuyez sur la touche Entrée.
Tapez "contact" et sélectionnez "Contact", puis appuyez sur la touche Entrée.
Tapez "rech" et sélectionnez "recherche", puis appuyez sur la touche Entrée.

Appuyez sur la touche Entrée pour valider la condition, puis à nouveau pour passer à la ligne suivante.

Si la rubrique "recherche" est vide, vous souhaitez afficher tous les contacts.


         Tapez "tous" et sélectionnez 'Afficher tous les enreg.", puis appuyez sur la touche Entrée.

Sinon, vous souhaitez lancer la recherche.


         Appuyez sur la touche Entrée pour passer à la ligne suivante.

Tapez "sinon" et sélectionnez "Sinon", puis appuyez sur la touche Entrée.

Appuyez sur la touche Entrée pour passer à la ligne suivante.

Tapez "exé" — attention l'accent est important et sélectionnez "Exécuter une recherche rapide", puis appuyez sur la touche Entrée.

Cliquez sur la petite roue crantée, puis tapez à nouveau "rech", puis sélectionnez la rubrique "recherche", puis cliquez sur le bouton "OK".

Si aucun contact n'est trouvé.


         Appuyez sur la touche Entrée pour passer à la ligne suivante.

Tapez "si" et sélectionnez "Si", puis appuyez sur la touche Entrée.
Tapez "obt" et sélectionnez "Obtenir", puis appuyez sur la touche Entrée.
Tapez "dern" et sélectionnez "DernièreErreur", puis appuyez sur la touche Entrée.
Tapez à la suite " <> 0", puis appuyez sur la touche Entrée.

Vous souhaitez afficher une liste vide.


         Appuyez sur la touche Entrée pour passer à la ligne suivante.

Tapez "tous" et sélectionnez 'Afficher tous les enreg.", puis appuyez sur la touche Entrée.

Appuyez sur la touche Entrée pour passer à la ligne suivante.

Tapez "igno" et sélectionnez "Afficher enreg. ignorés uniq.", puis appuyez sur la touche Entrée.

Si tout s'est bien passé, votre script devrait ressembler à ceci :


         Cliquez sur le bouton "OK".

Fermez la fenêtre de configuration du bouton.

Empêchez maintenant le retour à la ligne lorsque vous cliquez sur la touche Entrée après avoir saisi dans la recherche.


         Cliquez sur la rubrique "recherche", puis dans l'onglet données, dans "Comportement", cochez "Retour" et "Entrée" pour "Passer à l'objet suivant avec".

Allez au bout du raisonnement en lançant automatiquement la recherche après avoir appuyé sur la touche Entrée du clavier.
Pour cela, vous allez créer un nouveau script qui se lancera par un déclencheur sur la rubrique "recherche".


         Faites un clic-droit sur la rubrique "recherche", puis sélectionnez "Définir les déclencheurs de script...".

Dans la fenêtre qui s'ouvre, cochez "SurValidationObjet", puis sélectionnez le script "Rechercher contacts", puis cliquez sur "OK", puis à nouveau sur "OK".

Vous devriez obtenir la figure suivante :

P.S. : si vous ne voyez pas la petite loupe verte, qui sert à vérifier dans quelle(s) rubrique(s), la recherche rapide va agir, cliquez sur Affichage + Afficher, puis cochez "Recherche rapide".

Mise en place du tri

Le tri des contacts se fera par ordre alphabétique sur le nom, puis le prénom. Vous souhaitez qu'il soit effectué par défaut à l'affichage du modèle liste.
Vous allez utiliser à nouveau la technique du déclencheur de script, cette fois directement sur le modèle.


         En mode modèle sur "Liste contacts", cliquez sur Modèles + Format de modèle...

Cliquez sur l'onglet "Déclencheurs de script", puis cochez "SurChargementEnregistrement...".


         Dans la fenêtre qui s'ouvre, cliquez sur le bouton plus en bas à gauche pour créer un nouveau script.

Nommez le script : "Trier contacts", puis cliquez sur "OK".

Tapez "trier", puis sélectionnez "Trier enregistrements".

Dans "[ Avec boîte de dialogue: Oui ]", cliquez sur le Oui pour obtenir Non.

Cliquez sur la petite roue crantée, puis ajouter les rubriques "Nom", puis "Prenom" à l'ordre de tri.

Cliquez sur "OK" pour fermer successivement les fenêtres.

En passant en mode utilisation, vous remarquerez que vos contacts sont bien triés par nom et prénom.

Votre application est maintenant fonctionnelle, il ne vous reste plus qu'à la mettre en production.

Dernière étape : mise en production