Imaginez-vous pouvoir créer un superbe tableau sur votre site web, affichant des données extraites de votre feuille de calcul Google Sheets, et permettant aux visiteurs de rechercher et de trier facilement ces données, le tout sans leur donner accès à votre feuille de calcul. Eh bien, c’est possible grâce à Google Apps Script, Bootstrap et le plugin jQuery DataTables !
Les technologies nécessaires
Pour réaliser cela, vous aurez besoin de :
- Google Apps Script
- Bootstrap
- Le plugin jQuery DataTables
Heureusement, toutes ces technologies sont gratuites à utiliser. Nous utiliserons Bootstrap pour mettre en forme notre application web, et le plugin DataTables pour ajouter des fonctionnalités de recherche, de tri et de filtrage au tableau HTML.
Étapes pour créer une application web pour extraire et afficher des données de Google Sheets
Voici les étapes à suivre pour créer votre propre application web :
Étape 1 : Préparer votre feuille de calcul Google Sheets
Commencez par créer une table simple dans votre feuille de calcul Google Sheets. Assurez-vous de ne pas utiliser de cellules fusionnées dans la plage de données que vous souhaitez afficher dans votre application web.
Étape 2 : Créer un nouveau projet Google Apps Script
Utilisez Google Apps Script pour extraire les données de votre feuille de calcul Google Sheets vers un tableau HTML. Vous avez deux options pour utiliser Google Apps Script : les « Scripts associés » ou les « Scripts autonomes ». Dans cet exemple, nous utiliserons les « Scripts autonomes » pour que le script ne soit pas lié à la feuille de calcul. Vous devrez donc créer un projet séparé pour votre script. Voici comment procéder :
- Accédez à Google Drive.
- Cliquez sur le bouton « Nouveau » en haut à gauche, puis sur « Plus » et enfin sur « Google Apps Script ».
- Copiez-collez ensuite le code donné dans votre projet.
N’oubliez pas d’activer le service Google Sheets API pour votre projet si vous créez un nouveau projet Google Apps Script. Vous pouvez le faire en cliquant sur l’icône « + » dans l’onglet « Services », en sélectionnant « Google Sheets API » dans la boîte de dialogue « Ajouter un service », puis en cliquant sur « Ajouter ».
Étape 3 : Déployer votre projet en tant qu’application web
Pour créer la page HTML de votre application, vous devez déployer votre projet en tant qu’application web. Voici comment procéder :
- Cliquez sur le bouton « Déployer » en couleur bleue.
- Cliquez sur « Nouveau déploiement ».
- Dans la fenêtre contextuelle « Nouveau déploiement », donnez un nom significatif à votre déploiement dans la section « Description ».
- Sélectionnez votre adresse e-mail dans la section « Exécuter en » pour que l’application web ne nécessite pas de compte d’utilisateur.
- Sélectionnez « Tout le monde » dans la section « Qui a accès » pour permettre à n’importe qui sur Internet d’accéder au lien.
- Cliquez sur « Déployer ».
- Autorisez l’accès à vos données en cliquant sur le bouton « Autoriser l’accès ».
Et voilà, votre application web est maintenant déployée et vous pouvez partager le lien avec d’autres personnes.
Fonctionnalités du tableau
Grâce au plugin DataTables, vous pouvez ajouter plusieurs fonctionnalités à votre tableau HTML :
- Recherche de données : utilisez la barre de recherche pour rechercher des données dans n’importe quelle colonne du tableau.
- Tri des données : cliquez sur les en-têtes de colonne pour trier les données par ordre croissant ou décroissant.
- Pagination : par défaut, le tableau affiche 10 entrées par page. Cliquez sur les numéros de page pour afficher les autres entrées.
- Changer le nombre d’entrées par page : modifiez le nombre d’entrées par page en utilisant le menu déroulant « Afficher les entrées ».
Afficher les URLs sous forme de liens hypertexte
Si votre feuille de calcul Google Sheets contient une colonne avec des URLs, vous pouvez les afficher sous forme de liens hypertexte dans votre tableau HTML. Voici comment procéder :
- Ajoutez le code suivant à côté de la ligne 20 du fichier JavaScript.html :
{"title":"URL", "render": function(data, type, row, meta){
if(type === 'display'){
data = '<a href="' + data + '">' + data + '</a>';
}
return data;
}
}Assurez-vous de mettre à jour la plage de données dans le fichier Code.gs en fonction de vos modifications.
- Si vous souhaitez afficher un texte personnalisé au lieu de l’URL, utilisez le code suivant :
{"title":"URL", "render": function(data, type, row, meta){
if(type === 'display'){
data = '<a href="' + data + '">' + 'Your custom text' + '</a>';
}
return data;
}
}Voilà, vous avez maintenant un tableau HTML qui affiche les données de votre feuille de calcul Google Sheets et offre de nombreuses fonctionnalités pour les visiteurs. Vous pouvez partager cette application web avec d’autres personnes en utilisant son URL.
Nous espérons que cet article vous a été utile. Pour en savoir plus sur Google Apps Script, consultez notre site web Crawlan.com.
