Dans les portails ServiceNow, permettre aux utilisateurs d’uploader des photos (avatars, pièces jointes, etc.) améliore l’expérience utilisateur et la fonctionnalité des applications. Ce guide vous explique pas à pas comment implémenter un widget d’upload de photos, avec un code HTML + Client Script prêt à l’emploi, optimisé pour les formats JPEG, PNG, BMP, GIF, SVG.

Prérequis

• Un portail ServiceNow (version Paris ou supérieure recommandée).

• Accès à Service Portal Widget Editor.

• Connaissances basiques en AngularJS (utilisé dans les Client Scripts ServiceNow).

Étape 1 : Structure du Widget

1. Code HTML

Le widget utilise :

• Un bouton personnalisé pour déclencher la sélection de fichiers.

• Un input type="file" caché (stylisé via CSS).

• Une prévisualisation dynamique des images uploadées.

• Une gestion d’état (uploading) pour l’UX.

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
<div>
  <input type="file" class="hidden" ng-file-select="c.onAttachFiles({files: $files})"
         accept="image/jpeg,image/png,image/bmp,image/x-windows-bmp,image/gif,image/x-icon,image/svg+xml"/>
  <button class="py-2 px-4 rounded-md inline-flex justify-start items-center space-x-4" ng-click="c.onUploadPhotos($event)">
    <span class="material-symbols-outlined">attach_file</span>&nbsp;Ajouter des photos
  </button>
  <div ng-if="state == 'uploading'">Upload en cours...</div>
  <div ng-repeat="photo in photos">
    <img ng-src="{{ photo.content }}" style="max-width: 200px; margin: 10px;"/>
  </div>
</div>

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
<div>
  <input type="file" class="hidden" ng-file-select="c.onAttachFiles({files: $files})"
         accept="image/jpeg,image/png,image/bmp,image/x-windows-bmp,image/gif,image/x-icon,image/svg+xml"/>
  <button class="py-2 px-4 rounded-md inline-flex justify-start items-center space-x-4" ng-click="c.onUploadPhotos($event)">
    <span class="material-symbols-outlined">attach_file</span>&nbsp;Ajouter des photos
  </button>
  <div ng-if="state == 'uploading'">Upload en cours...</div>
  <div ng-repeat="photo in photos">
    <img ng-src="{{ photo.content }}" style="max-width: 200px; margin: 10px;"/>
  </div>
</div>

Note :

• L’attribut accept restreint les formats autorisés. Adaptez-le selon vos besoins.

• Si vous voulez autoriser l'upload de plusieurs fichiers, vous devez rajouter l'attribut multiple.

• Le style est géré via des classes de la librairie Tailwind

2. Client Script (Logique d’Upload)

Le script gère :

• Le déclenchement du sélecteur de fichiers.

• La lecture des fichiers via FileReader.

• L’upload vers un enregistrement ServiceNow via snAttachmentHandler.

• La prévisualisation en base64.

api.controller = function($scope, $element, snAttachmentHandler) {
    var c = this;
    $scope.state = null;
    $scope.photos = [];

    // Déclenche le clic sur l'input caché
    c.onUploadPhotos = function($event) {
        $event.stopPropagation();
        $element.find('input[type=file]').click();
    };

    // Gère les fichiers sélectionnés
    c.onAttachFiles = function(files) {
        $scope.state = 'uploading';
        $scope.photos = [];

        for (var i = 0; i < files.files.length; i++) {
            var file = files.files[i];
            var fileReader = new FileReader();

            fileReader.onloadend = function(e) {
                var data = e.target.result;
                $scope.photos.push({
                    title: file.name,
                    content: data
                });

                if ($scope.photos.length === files.files.length) {
                    $scope.state = null;
                }

                // Upload vers ServiceNow
                var tableName = 'live_profile'; // Table cible
                var fieldName = 'photo';        // Champ cible (type "Attachment")
                var sysId = "xxxx-xxxx-xxxx-xxxx"; // Sys_ID de l'enregistrement

                snAttachmentHandler.create(tableName, sysId)
                    .uploadAttachment(file, { sysparm_fieldname: fieldName })
                    .then(function(response) {
                        console.log("Fichier uploadé :", response.sys_id);
                        // Mise à jour de l'UI (ex: avatar)
                        $scope.avatarPicture = {
                            'background-image': "url('" + response.sys_id + ".iix')",
                            'color': 'transparent'
                        };
                    });
            };
            fileReader.readAsDataURL(file);
        }
    };
};

api.controller = function($scope, $element, snAttachmentHandler) {
    var c = this;
    $scope.state = null;
    $scope.photos = [];

    // Déclenche le clic sur l'input caché
    c.onUploadPhotos = function($event) {
        $event.stopPropagation();
        $element.find('input[type=file]').click();
    };

    // Gère les fichiers sélectionnés
    c.onAttachFiles = function(files) {
        $scope.state = 'uploading';
        $scope.photos = [];

        for (var i = 0; i < files.files.length; i++) {
            var file = files.files[i];
            var fileReader = new FileReader();

            fileReader.onloadend = function(e) {
                var data = e.target.result;
                $scope.photos.push({
                    title: file.name,
                    content: data
                });

                if ($scope.photos.length === files.files.length) {
                    $scope.state = null;
                }

                // Upload vers ServiceNow
                var tableName = 'live_profile'; // Table cible
                var fieldName = 'photo';        // Champ cible (type "Attachment")
                var sysId = "xxxx-xxxx-xxxx-xxxx"; // Sys_ID de l'enregistrement

                snAttachmentHandler.create(tableName, sysId)
                    .uploadAttachment(file, { sysparm_fieldname: fieldName })
                    .then(function(response) {
                        console.log("Fichier uploadé :", response.sys_id);
                        // Mise à jour de l'UI (ex: avatar)
                        $scope.avatarPicture = {
                            'background-image': "url('" + response.sys_id + ".iix')",
                            'color': 'transparent'
                        };
                    });
            };
            fileReader.readAsDataURL(file);
        }
    };
};

Bonnes pratiques :

• Remplacez live_profile et photo par le nom de votre table et le champ cible.

• Le sysId doit être dynamique (ex: récupéré via $scope.data.sys_id si le widget est lié à un enregistrement).

Étape 2 : Intégration dans ServiceNow

1. Créez un nouveau widget :

   • Allez dans Service Portal > Widgets > New.

   • Collez le code HTML dans l’onglet HTML Template.

   • Collez le Client Script dans l’onglet Client Controller.

2. Configurez les permissions :

   • Assurez-vous que le rôle utilisateur a les droits sn_attachment.write sur la table cible.

3. Testez le widget :

   • Ajoutez-le à une page de portail et vérifiez :

     • La sélection de fichiers.

     • La prévisualisation.

     • L’upload dans l’enregistrement ServiceNow.

Étape 3 : Optimisations Supplémentaires

• Sécurité :

  • Validez les types MIME côté serveur (via un Script Include).

  • Limitez la taille des fichiers (ex: 5 Mo max) :

    if (file.size > 5 * 1024 * 1024) {
        alert("Fichier trop volumineux (max 5 Mo)");
        return;
    }

    if (file.size > 5 * 1024 * 1024) {
        alert("Fichier trop volumineux (max 5 Mo)");
        return;
    }

• UX :

  • Ajoutez un message de succès après upload.

  • Implémentez un drag-and-drop (via la directive ng-file-drop).

Cas d’Usage Courants

Dépannage

• Problème : L’upload ne fonctionne pas. Solution :

  • Vérifiez que le sysId est valide.

  • Assurez-vous que le champ cible est de type Attachment.

• Problème : Les images ne s’affichent pas. Solution :

  • Vérifiez les CORS si les images sont hébergées externement.

  • Utilisez ng-src et non src pour AngularJS.

Conclusion

Ce widget offre une solution clé en main pour l’upload de photos dans ServiceNow, avec une expérience utilisateur fluide et une intégration simple. Personnalisez-le selon vos besoins (taille maximale, formats, destination).

Besoin d’aide ? Contactez Snowlab pour une implémentation sur mesure ou une formation ServiceNow.