Comment afficher les images Ubiqod dans Google Sheets ?

Comment afficher les images Ubiqod dans Google Sheets ?

Dans les interfaces Ubiqod, vous pouvez autoriser l'utilisateur à prendre des photos. Ces photos peuvent être utilisées par exemple pour accompagner le signalement d'un problème. Ce tutoriel explique comment afficher cette photo dans Google Sheets.

Activation de la prise de photo

Pour permettre à l'utilisateur de prendre une photo, vous devez activer et configurer cette option dans les options avancées de votre interface :
Prise de photo terrain Ubiqod

Utilisation de la photo prise dans Google Sheets

Envoi par le connecteur

Vous pouvez envoyer le contenu de l'image à Google Sheets en sélectionnant le champ correspondant dans le connecteur Google Sheets). La photo sera envoyée dans la colonne sélectionnée sous forme de texte, dans un format appelé Base64.
Warning
Il est recommandé d'utiliser la plus petite résolution possible pour ne pas dépasser les limites de capacité de Google Sheets.
Info
Si vous souhaitez utiliser des images plus grandes, nous vous recommandons d'envoyer vos images vers un espace de stockage dédié (par exemple dans Google Drive, en utilisant un connecteur de type Make ou Zapier), puis de faire un lien vers ces images dans Google Sheets.

Affichage de la photo dans l'interface Google Sheets

Dans le tableau, l'image sera affichée sous forme de texte. Pour la visualiser, vous pouvez utiliser Apps Script.

Dans le menu Extensions, sélectionnez Apps Script :

Menu Apps Script

Copier puis collez le code ci-dessous dans l'éditeur, en veillant à remplacer le H de la ligne var dataUri = ss.getRange("H" + aRow).getValue() par la lettre de la colonne où se trouve votre image en Base 64 :
  1. function onOpen() {
  2.   SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
  3.       .createMenu('Ubiqod')
  4.       .addItem('Afficher la photo', 'showSidebar')
  5.       .addToUi();
  6. }

  8. function showSidebar() {
  9.   var ss = SpreadsheetApp.getActive(), aRow = ss.getActiveCell().getRow();
  10.   var dataUri = ss.getRange("H" + aRow).getValue()

  12.   var html = HtmlService.createHtmlOutput("<img src='" + dataUri + "' />")
  13.       .setTitle("Photo Ubiqod");
  14.   SpreadsheetApp.getUi() 
  15.       .showSidebar(html);
  16. }

  18. function getImage() {
  19.   var ss = SpreadsheetApp.getActive(), aRow = ss.getActiveCell().getRow();
  20.   var dataUri = ss.getRange("H" + aRow).getValue()
  21.   var byteString = Utilities.base64Decode(dataUri.split(',')[1]);
  22.   var mimeString = dataUri.split(',')[0].split(':')[1].split(';')[0];
  23.   var blob = Utilities.newBlob(byteString, mimeString, aRow + "bon.png");
  24.   var file = DriveApp.createFile(blob);
  25.   var url = file.getUrl();
  26.   ss.getRange("I"+aRow).setValue('=IMAGE("' + url + '")');
  27.   return
  28. }

  30. function convertImage(imageToConvert) {
  31.   var ss = SpreadsheetApp.getActiveSpreadsheet();
  32.   var sheet = ss.getSheets()[0];
  33.   var dataUri = imageToConvert
  34.   var byteString = Utilities.base64Decode(dataUri.split(',')[1]);
  35.   var mimeString = dataUri.split(',')[0].split(':')[1].split(';')[0];
  36.   var blob = Utilities.newBlob(byteString, mimeString, "myImage.png");
  37.   return blob
  38. }

  40. function displayImageFromBase64(dataUri) {
  41.   var byteString = Utilities.base64Decode(dataUri.split(',')[1]);
  42.   var mimeString = dataUri.split(',')[0].split(':')[1].split(';')[0];
  43.   var blob = Utilities.newBlob(byteString, mimeString, "myImage.png");

  45.   var file = DriveApp.createFile(blob);

  47.   var url = file.getUrl();

  49.   return formula = '=IMAGE("' + url + '")';
  50. }
Nommez votre projet et enregistrez le script. Votre écran devrait ressembler à ceci :
Editeur de code Apps Script


Retournez dans votre tableau et rafraichissez la page. Après quelques secondes, vous devrier voir apparaître un menu Ubiqod. 

Sélectionner la ligne où vous souhaitez faire apparaître la photo, et cliquez sur "Afficher la photo" :

Menu affichage de la photo dans le Google Sheets

La première fois que vous utiliserez ce script, vous devrez lui accorder les autorisations demandées (il s'agit d'un script interne à votre compte, aucune donnée n'est partagée avec l'extérieur).

Vous devriez voir apparaitre l'image :

Visualisation de l'image




    Essayez Ubiqod


    Recevez 100 crédits gratuits pour commencer sur Ubiqod: créer un compte

      • Related Articles

      • Introduction à la plateforme Ubiqod

        Ubiqod est une solution simple et flexible pour connecter les actions terrain à vos outils informatiques. La plateforme permet de collecter différentes données (pointages, demandes de service, localisations, enquêtes de satisfaction...) via des QR ...

      • Comment changer le fuseau horaire des pointages dans Google Sheets ?

        Si les pointages affichés dans Google Sheets ne correspondent pas à votre fuseau horaire, vous devez d’abord le configurer dans votre fichier Google Sheets, puis rafraîchir les données dans Ubiqod pour que les changements soient pris en compte. Ce ...

      • Suivre les passages des équipes dans Google Sheets avec la feuille de pointage Taqt

        Cet article montre comment mettre en place un système comple de pointage par QR code en utilisant Ubiqod et l'App de pointage Google Sheets de Taqt. Certaines copies d'écran sont en anglais, mais rassurez-vous : elles apparaitront en français chez ...

      • Activer votre Ubiqod Key

        Introduction Lorsque vous recevez votre Ubiqod Key, l’écran est blanc et les piles ne sont pas insérées. Cette précaution permet d’éviter les phénomènes de rémanence sur l’écran et de préserver l’autonomie des piles pendant le transport. Veuillez ...

      • Ajouter un Ubiqod Key à votre compte Ubiqod

        Introduction Ubiqod Key est un QR code sécurisé et breveté conçu pour des applications nécessitant une sécurité renforcée. Avant de pouvoir l'utiliser sur la plateforme Ubiqod, il est nécessaire de l'ajouter à votre compte. Lors de l'achat d'un ...