Passerelle Excel / Web app via le Clipboard et un Bookmarklet

Une des clés du succès des applications d’aujourd’hui, qu’elles soient mobiles comme Instagram ou Web comme Facebook, c’est leur ergonomie, leur facilité d’utilisation. D’où l’engouement porté depuis quelques années au design d’interface ou UX design, qui ne se résume pas à la dimension esthétique mais questionne aussi les usages pour favoriser l’adoption de l’application. En France certaines startups en ont fait leur leitmotiv, comme Capitaine Train (réservation de billets de train) par exemple qui se présente comme une alternative beaucoup plus simple au décrié Voyages SNCF.

Mais il existe un monde parallèle dans lequel séduire l’utilisateur avec une interface bien pensée n’est pas le souci premier : ce monde c’est celui des entreprises et de leurs applications back-office répondant à des besoins internes. L’utilisateur étant en général obligé d’utiliser l’application, on se moque un peu d’optimiser son ressenti.

J’ai été confronté dans le cadre de mon travail à un cas symptomatique où pour des raisons de coûts, l’import des données d’un bon de commande au format Excel dans une application Web n’a pas été automatisé. Là où un upload de fichier et une moulinette coté serveur auraient fait l’affaire, ce sont donc des personnes, dites “opérationnelles”, qui sont chargées de copier-coller manuellement les cellules importantes du bon de commande un-à-un dans les champs correspondants d’un formulaire Web. Procédure abrutissante au possible et très mauvais exemple de ré-industrialisation de la France…

Face à ce constat, un collègue et moi-même nous sommes mis en tête de trouver une solution technique rapide pour y remédier. Le résultat est le suivant :

  • dans le bon de commande Excel on trouve désormais un feuillet caché qui reprend l’ensemble des contenus importants sous la forme nom du champ | valeur du champ | nom de l’input correspondant dans le formulaire Web ;
  • une macro associée à un raccourci-clavier a pour rôle de mettre ces données en mémoire, dans le presse-papier (clipboard Windows) :
Sub DataOutputToClipboard()
    Dim json As String
    Dim c As Range

    json = "var data = { "
    For Each c In Worksheets("Data Output").UsedRange.Columns("C").Cells
        json = json & "'" & c.Value & "': '" & Replace(c.Offset(0, 1).Value, "'", "\'") & "', "
    Next c

    ' remove last , that breaks json in IE
    json = Left(json, Len(json) - 2) & " };"

    'MsgBox json

    With New DataObject
        .SetText json
        .PutInClipboard

        MsgBox "Data in Clipboard !"
    End With
End Sub
  • un bout de code Javascript, stocké sous la forme d’un Favoris dans le navigateur (aka “Bookmarklet”), va prendre ces données en mémoire et les insérer automatiquement dans les bons champs du formulaire de l’application Web :
(function() {
    eval(window.clipboardData.getData('Text'));
    var b = document.getElementsByTagName('input'), t, key;
    for(var i=0; i < b.length; i++){
        t = b[i].type;
        key = b[i].name;
        if(t=="text" && data.hasOwnProperty(key)){
            b[i].value = data[key];
        }
    }
})()

Minifié avec le Bookmarklet Crunchinator, ça donne ça :

javascript:(function(){eval(window.clipboardData.getData('Text'));var%20b=document.getElementsByTagName('input'),t,W;for(var%20i=0;i%20<%20b.length;i++){t=b[i].type;W=b[i].name;if(t=="text"%20&&%20data.hasOwnProperty(W)){b[i].value=data[W]}}})();void(0)

Conclusion

C’est un hack rapide, mais ça fonctionne :) Tout commentaire est le bienvenu !