Comment créer une application CRUD simple dans Appsmith

Créer des outils internes à partir de zéro fait perdre un temps que vous n’avez pas. Vous avez besoin d’un panneau d’administration rapide ou d’une interface de gestion de données, pas d’un projet de développement de trois mois. Appsmith vous permet de connecter une source de données, d’ajouter des widgets par glisser-déposer et de configurer les opérations de création, lecture, mise à jour et suppression (Create, Read, Update, Delete) en moins d’une heure.

Ce tutoriel présente le workflow standard d’une application CRUD Appsmith : connexion de votre base de données, affichage des données dans un widget Table, gestion de la création et de la mise à jour d’enregistrements via des formulaires, et actualisation des données après les mutations.

Connecter votre source de données

Commencez par créer une nouvelle application dans Appsmith. Dans la barre latérale gauche, cliquez sur le + à côté de Datasources et sélectionnez votre type de base de données—PostgreSQL, MySQL ou une API REST.

Pour les bases de données SQL, saisissez vos identifiants de connexion : hôte, port, nom de la base de données, nom d’utilisateur et mot de passe. Stockez les valeurs sensibles dans la configuration de source de données chiffrée d’Appsmith et les paramètres d’environnement plutôt que de les coder en dur dans les requêtes ou les widgets. Les requêtes sont exécutées côté serveur, donc les identifiants ne sont jamais exposés au navigateur.

Vous trouverez la liste complète des bases de données prises en charge et les options de configuration dans la documentation officielle des sources de données.

Testez la connexion avant de sauvegarder. En cas d’échec, vérifiez les règles de pare-feu, les exigences SSL et l’exactitude des identifiants.

Lire les données avec une requête

Créez votre première requête pour récupérer des enregistrements. Cliquez sur + à côté de Queries/JS, sélectionnez votre source de données et écrivez une instruction SELECT :

SELECT id, name, email, created_at FROM users ORDER BY created_at DESC LIMIT 100;

Nommez cette requête getUsers et exécutez-la pour vérifier la réponse.

Pour les ensembles de données plus volumineux, implémentez la pagination côté serveur. Le widget Table d’Appsmith prend cela en charge nativement—vous transmettrez les paramètres offset et limit à votre requête en fonction de l’état de pagination du tableau.

Afficher les données dans un widget Table

Glissez un widget Table sur le canevas. Dans les propriétés du widget, définissez la propriété Table data sur :

{{getUsers.data}}

Le tableau génère automatiquement des colonnes à partir de la réponse de votre requête. Renommez les colonnes, ajustez les largeurs et masquez les champs comme les ID internes si nécessaire.

Ce modèle d’intégration de base de données Appsmith—liaison de requête au widget—constitue la base de chaque frontend CRUD low-code que vous construirez. Les options de configuration complètes du widget Table sont couvertes dans la documentation du widget Table.

Créer des enregistrements avec un formulaire ou une Modal

Ajoutez un widget Button intitulé « Ajouter nouveau » et définissez son action onClick pour ouvrir une Modal. À l’intérieur de la modal, ajoutez des widgets Input pour chaque champ : nameInput, emailInput.

Créez une requête INSERT nommée createUser :

INSERT INTO users (name, email) VALUES ({{nameInput.text}}, {{emailInput.text}});

Connectez le bouton de soumission de la modal pour exécuter createUser. En cas de succès, déclenchez getUsers.run() pour actualiser le tableau, puis fermez la modal.

Pour la validation, utilisez les propriétés de validation intégrées du widget Input ou écrivez un JSObject qui vérifie les valeurs des champs avant la soumission.

Mettre à jour les enregistrements en utilisant les lignes sélectionnées

Activez la sélection de lignes sur votre widget Table. Lorsqu’un utilisateur clique sur une ligne, Table1.selectedRow expose les données de cet enregistrement.

Créez une requête UPDATE nommée updateUser :

UPDATE users
SET name = {{nameInput.text}}, email = {{emailInput.text}}
WHERE id = {{Table1.selectedRow.id}};

Vous pouvez réutiliser la même modal pour l’édition en pré-remplissant les inputs avec Table1.selectedRow.name comme valeurs par défaut. Basculez entre les modes « création » et « édition » en utilisant une variable JSObject.

Une fois la mise à jour exécutée avec succès, appelez getUsers.run() pour actualiser l’affichage.

Supprimer des enregistrements avec confirmation

Ajoutez une colonne Button à votre tableau pour les actions de suppression. Définissez le type de colonne sur Button et configurez le onClick pour exécuter une requête DELETE :

DELETE FROM users WHERE id = {{Table1.triggeredRow.id}};

Notez la différence : triggeredRow capture la ligne où le bouton a été cliqué, tandis que selectedRow capture la ligne sélectionnée.

Activez Request confirmation before running dans les paramètres de requête pour éviter les suppressions accidentelles. En cas de succès, actualisez les données du tableau.

Le workflow Appsmith Table Form

Le modèle que vous avez construit—widget Table affichant les résultats de requête, Form ou Modal gérant les entrées, requêtes paramétrées pour les mutations et actualisation des données en cas de succès—s’adapte à tout cas d’usage CRUD. Ce workflow Appsmith table form s’applique que vous gériez des utilisateurs, des stocks, des tickets de support ou tout autre type d’enregistrements.

Pour les applications en production, considérez :

• Contrôle d’accès basé sur les rôles : Appsmith prend en charge les permissions granulaires au niveau de l’application, de la page et de la source de données
• Environnements et identifiants : Stockez les mots de passe de base de données et les clés API de manière sécurisée entre les environnements de développement, staging et production
• Packages : Partagez des requêtes et des JSObjects réutilisables entre plusieurs applications en utilisant Appsmith Packages
• Pagination côté serveur : Essentielle pour les tableaux avec des milliers d’enregistrements

Conclusion

Vous disposez maintenant d’une interface CRUD fonctionnelle : données affichées dans un tableau, formulaires pour créer et modifier des enregistrements, fonctionnalité de suppression avec confirmation et actualisation automatique des données après chaque mutation.

À partir de là, étendez l’application avec des filtres de recherche, des pages supplémentaires, ou connectez-vous aux Appsmith Workflows pour l’automatisation backend. Le frontend CRUD low-code que vous avez construit sert de fondation pour des outils internes plus complexes—sans écrire l’interface utilisateur et la couche de données à partir de zéro.

FAQ

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.