Convertissez votre modèle FileMaker en Web Viewer avec Genie
Dans ce tutoriel, nous transformons la solution de démarrage Content Management de Claris en app Web Viewer avec Genie. Deux demandes suffisent pour lancer la conversion.
La solution de démarrage Content Management de Claris, avec son interface Web Viewer, après la réouverture du fichier.
Nous demandons d’abord à Genie d’examiner le modèle Content Details, puis de préparer une interface Web Viewer reliée aux tables, aux rubriques et aux enregistrements existants. Nous précisons ensuite le résultat, révisons l’app générée et l’installons dans FileMaker.
Le Web Viewer reprend la consultation et la modification du contenu sous forme de fiches avec recherche et d’un panneau de détails. Il lit et met à jour les enregistrements de la solution. Le modèle d’origine reste accessible pour les pièces jointes et la vérification des données. L’interface montrée dans les captures porte le nom Content Library.
Ce tutoriel suit l’Agent intégré à Genie, de l’inspection du modèle à l’installation du Web Viewer et de son script. Un agent externe connecté à Genie par MCP peut aussi servir à développer ce type d’interface.
1. Ouvrez la solution de démarrage Claris
Ouvrez la solution de démarrage Content Management de Claris et sélectionnez le modèle Content Details. Il servira de référence pour les rubriques et vous permettra de vérifier les valeurs enregistrées par le Web Viewer.
Le point de départ : le modèle Content Details de la solution de démarrage Claris.
Ouvrez Genie depuis la barre d’outils de l’Espace de travail de script. Commencez par lui demander d’examiner le modèle, avant de préparer des changements.
Demande à envoyer à Genie
Examine le modèle Content Details de la solution de démarrage Content Management de Claris. Je veux convertir ce modèle en interface Web Viewer, avec des fiches à parcourir et des détails modifiables, en utilisant les rubriques et les enregistrements existants. Indique d’abord les rubriques à utiliser et ce qui devrait rester dans le modèle FileMaker d’origine. Ne modifie rien pour le moment.
Dans cette première version, seules les rubriques Name, Description, Type, Status et Location sont modifiables. PrimaryKey identifie l’enregistrement à sauvegarder. Les pièces jointes restent dans le modèle d’origine et les notes sont en lecture seule.
2. Décrivez ce que l’interface doit permettre
Précisez les actions attendues : rechercher des fiches, ouvrir un élément, en ajouter un, modifier ses détails, enregistrer ou annuler. Demandez aussi des états clairs pendant le chargement, quand la liste est vide et lorsqu’une opération échoue.
Genie doit préparer deux éléments qui fonctionnent ensemble : l’interface Web Viewer et un script FileMaker qui charge les données et enregistre les changements. Le script doit cibler le bon enregistrement et retourner le résultat au bon objet Web Viewer.
Afficher la demande complète de conversion
Convertis le modèle Content Details de la solution de démarrage Content Management de Claris en interface Web Viewer. Utilise les tables, rubriques et enregistrements existants. Conserve les modèles d’origine. Place des fiches avec recherche à gauche et un panneau de détails à droite. Ajoute les commandes Add Content, Edit, Save Changes et Cancel. Lis et modifie les vrais enregistrements FileMaker. Seules les rubriques Name, Description, Type, Status et Location sont modifiables. Utilise PrimaryKey pour identifier l’enregistrement à sauvegarder. Laisse les pièces jointes dans le modèle FileMaker et les notes en lecture seule. Prévois une interface claire, utilisable à environ 1024 × 658, avec des indicateurs de statut et des états de chargement, de liste vide et d’erreur. Nomme le script Genie Content Library Tutorial - Dispatch et l’objet Web Viewer ContentLibraryTutorialWebViewer. Demande-moi si je veux stocker l’app dans le fichier ou utiliser un calcul Web Viewer. Prépare l’app connectée complète dans cette conversation pour révision, avec le script complet et un objet Web Viewer à copier. N’installe rien automatiquement.
Cette demande reprend les noms utilisés dans les étapes ci-dessous. Une nouvelle génération peut donner une interface différente des captures. La démo a aussi nécessité des échanges pour préciser le stockage et conserver le script complet.
3. Choisissez où conserver l’interface
Genie présente la question « Store this app? » dans la conversation. Deux choix sont proposés :
- Yes, store the app in this file : conserver l’interface dans le fichier, avec le parcours FileMaker 26 présenté ici.
- No, use a Web Viewer calculation : conserver l’interface dans le calcul du Web Viewer.
Le choix de stockage se fait dans la conversation, avant l’application des changements.
Si Genie a déjà préparé une version sous forme de calcul, demandez-lui de proposer le choix de stockage avant l’installation. C’est l’échange montré dans cette capture.
Le stockage de l’interface et la sauvegarde des données sont deux opérations distinctes. L’interface est conservée avec le fichier; les données de la solution restent des enregistrements FileMaker ordinaires.
Le stockage de l’app dans le fichier nécessite FileMaker 26. Pour une version antérieure de FileMaker, choisissez le calcul Web Viewer.
4. Révisez l’app et appliquez le stockage
Choisir le stockage prépare une proposition à réviser. Pour l’appliquer :
- Examinez l’app proposée dans la conversation.
- Cliquez sur Apply stored app.
- Confirmez avec Yes dans la boîte de dialogue FileMaker.
- Attendez la confirmation que l’app a été enregistrée et vérifiée.
La proposition se révise et s’applique directement depuis la conversation.
Une fois l’interface stockée, la carte donne accès à Copy Web Viewer Object. Il reste à installer le script et à placer cet objet sur un modèle.
5. Installez le script dans FileMaker
Le script fait le lien entre les boutons du Web Viewer et FileMaker. Il charge la liste, crée un élément, enregistre les modifications et retourne le résultat à l’interface.
- Repérez la carte Script Draft Ready sous l’app. Cliquez sur Preview pour examiner le script complet.
- Cliquez sur Copy for FileMaker. Le script est aussi accessible dans Setup and technical details → Related scripts.
- Ouvrez Scripts → Script Workspace dans FileMaker.
- Sélectionnez la liste des scripts ou un dossier à gauche, puis choisissez Edit → Paste (Ctrl+V sous Windows, Cmd+V sur Mac).
- Vérifiez que Genie Content Library Tutorial - Dispatch apparaît comme un script distinct. Enregistrez-le et fermez l’Espace de travail de script.
Collez dans la liste des scripts ou dans un dossier pour créer un script distinct.
Le script complet apparaît à côté des scripts existants.
Sélectionnez bien la liste à gauche, et non une étape à l’intérieur d’un autre script. Utilisez Edit → Paste pour ce bloc de nouveau script, pas Paste Genie.
Les nombreux blocs If / End If vérifient les requêtes, les recherches, les verrous et les sauvegardes. Les messages d’erreur écrits dans ces étapes décrivent ce qui sera retourné si une opération échoue; ils ne signalent pas un échec de l’installation. Conservez le script complet fourni par Genie.
6. Placez le Web Viewer sur un nouveau modèle
- Créez un modèle Computer → Form basé sur l’occurrence de table Content Management. Nommez-le Content Library - Tutorial.
- Sur ce nouveau modèle vierge, retirez la partie Top Navigation inutilisée pour ne garder que Body. Conservez les modèles d’origine.
- Dans Genie, cliquez sur Copy Web Viewer Object, puis retournez au nouveau modèle en mode Modèle et choisissez Edit → Paste.
- Dans l’Inspecteur, donnez au Web Viewer une taille de 1024 × 658 et une position Left / Top de 0 / 0.
Copiez l’objet Web Viewer depuis la carte de l’app connectée.
L’objet est placé sur un modèle distinct. Son nom permet au script de lui retourner les résultats.
Conservez exactement le nom d’objet ContentLibraryTutorialWebViewer. Si vous utilisez d’autres noms, le script et l’objet doivent rester concordants.
Double-cliquez sur le Web Viewer. Son calcul est déjà rempli. Vérifiez que les trois options suivantes sont cochées :
- Allow interaction with web viewer content
- Automatically encode URL
- Allow JavaScript to perform FileMaker scripts
Le calcul et les autorisations accompagnent l’objet copié.
Cliquez sur OK, passez en mode Utilisation et enregistrez le modèle lorsque FileMaker le demande.
7. Ajoutez, recherchez et modifiez du contenu
En mode Utilisation, le Web Viewer charge les enregistrements FileMaker. La démo utilise deux éléments fictifs : Alpine Studio — Brand Guide et Harvest Collection — Launch Brief. Dans un fichier neuf, créez vos éléments avec Add Content.
- Recherchez Alpine pour filtrer les fiches.
- Sélectionnez la fiche, puis cliquez sur Edit.
- Passez le statut de Draft à Approved et cliquez sur Save Changes.
- Modifiez ensuite une description sans l’enregistrer, puis cliquez sur Cancel pour vérifier que la modification est abandonnée.
- Essayez d’ajouter un élément sans Name : un message de validation devrait apparaître et le nombre d’enregistrements devrait rester le même.
Modifiez les détails, puis choisissez Save Changes pour enregistrer ou Cancel pour annuler.
La démo a aussi été testée avec une description sur plusieurs lignes contenant le mot « café ». Ce type de vérification permet de confirmer que le texte arrive intact dans FileMaker.
Cette version couvre la consultation, la création et la modification des enregistrements. La suppression, la modification des pièces jointes et celle des notes ne font pas partie du parcours.
8. Vérifiez les valeurs dans FileMaker
Après une sauvegarde depuis le Web Viewer, retournez au modèle Content Details et ouvrez le même élément. Comparez les rubriques avec les valeurs que vous venez d’enregistrer.
Le modèle FileMaker d’origine permet de vérifier les valeurs enregistrées depuis le Web Viewer.
Fermez et rouvrez le fichier, puis revenez au Web Viewer. Vérifiez que l’interface se charge, que la liste contient les bons éléments et que les modifications sont toujours présentes. Dans la démo testée, les deux éléments sont revenus et Alpine Studio affichait toujours Approved.
La solution de démarrage, maintenant en Web Viewer
La solution de démarrage Content Management de Claris fournit le modèle et les données. Genie aide à convertir ce modèle en Web Viewer et à le relier aux enregistrements avec un script FileMaker. Cette conversion montre comment partir d’une solution existante, adapter son interface et vérifier que chaque action enregistre les bonnes valeurs.