Introduction

Les organisations utilisant ServiceNow cherchent souvent à offrir une expérience mobile optimale à leurs utilisateurs. Si l’application mobile native de ServiceNow répond à ce besoin, elle impose des contraintes en termes de personnalisation et de flexibilité visuelle. Nous proposons une alternative : un portail ServiceNow entièrement responsive, basé sur la détection dynamique de la largeur du navigateur, utilisant AngularJS et des bonnes pratiques CSS.

Pourquoi cette approche ?

Avantages :

• Flexibilité visuelle : Contrôle total sur le rendu (couleurs, animations, disposition), impossible avec l’appli native.

• Maintenance unique : Un seul code pour desktop et mobile, contrairement à une appli native à développer séparément.

• Intégration native : Utilise les mécanismes existants de ServiceNow (Portails, AngularJS, Client Scripts).

• Coût réduit : Pas de développement iOS/Android supplémentaire.

Limites :

• Expérience utilisateur : Moins fluide qu’une appli native (ex : gestures, notifications push).

• Performance : Dépendante de la connexion réseau et du navigateur.

• Fonctionnalités mobiles : Pas d’accès aux capteurs (GPS, caméra) ou aux stores d’applications.

Principe technique

La solution repose sur :

1. La détection de la largeur du navigateur via JavaScript ($window.innerWidth).

2. Le stockage de l’état "mobile" dans $rootScope pour une accessibilité globale.

3. L’application dynamique de styles avec ng-style ou ng-class et des expressions conditionnelles.

4. La réactivité aux changements de taille via un écouteur d’événement resize.

Implémentation pas à pas

1. Client Script pour la détection responsive

Ajoutez ce code dans un Client Script AngularJS (ex : dans un Portal Widget ou un UI Page) :

function($scope, $rootScope, $window) {
  $scope.mobileWidth = 600;
  
  $scope.isMobile = $window.innerWidth < $scope.mobileWidth;
  $rootScope.isMobile = $scope.isMobile;
  // Écouteur pour les changements de taille
  angular.element($window).bind('resize', function() {
    $scope.isMobile = $window.innerWidth < $scope.mobileWidth;
    $rootScope.$broadcast('sp_portal.is_mobile',  $scope.isMobile);
    $scope.$digest(); // Force la mise à jour de la vue
  });
}

2. Utilisation dans les templates HTML

Appliquez des styles conditionnels avec ng-style :

<nav ng-style="{'padding': isMobile ? '10px 15px' : '15px 35px'}">...</nav>
<br><br>
<!-- Exemple avec affichage conditionnel -->
<br><div ng-if="!isMobile">...</div>
<br><div ng-if="isMobile">...</div>

3. Bonnes pratiques complémentaires

• Seuils adaptés : Ajustez le seuil (700px) selon votre design (ex : 600px pour les tablettes).

Media Queries CSS : Combinez avec des règles CSS pour les éléments non gérés par Angular :

@media (max-width: 700px) {
     .desktop-only { display: none; }
}

• Optimisation des performances : Limitez les calculs dans l’écouteur resize (ex : utilisez un debounce pour éviter les appels trop fréquents).

Accéder à isMobile depuis n’importe quel composant

Grâce à $rootScope, la variable est accessible partout :

// Dans un autre contrôleur
function($scope, $rootScope) {
    $scope.$on('sp_portal.is_mobile', function(event, isMobile) {     
      console.log('Mobile:', isMobile);
 })

→ Idéal pour adapter dynamiquement des widgets, des formulaires, ou même des requêtes API (ex : charger moins de données en mobile).

Comparatif avec l’appli mobile ServiceNow

Personnalisation visuelle

Cas d’usage recommandés

Privilégiez le portail responsive si :

• Vos utilisateurs ont besoin d’un accès occasionnel en mobilité.

• Vous souhaitez une expérience visuelle cohérente avec votre branding.

• Votre budget ne permet pas de développer une appli native.

Vous utilisez déjà des portails ServiceNow personnalisés.

Optez pour l’appli native si :

• Vos utilisateurs sont 100% mobiles (ex : techniciens sur le terrain).

• Vous avez besoin de fonctionnalités spécifiques (GPS, scan de codes-barres).

• L’expérience hors ligne est critique.

Conclusion

Rendre un portail ServiceNow responsive avec AngularJS offre une solution équilibrée entre flexibilité et simplicité, idéale pour les organisations souhaitant étendre leur expérience mobile sans les contraintes d’une appli native. Cette approche permet de réutiliser les compétences existantes (HTML/CSS/JS) et de s’intégrer parfaitement à l’écosystème ServiceNow.

Prochaines étapes :

• Commencez par un prototype sur une page simple (ex : tableau de bord).

• Impliquez vos utilisateurs finaux pour des retours terrain.

Combinez avec des Media Queries CSS pour une solution robuste.

Chez Snowlab, nous accompagnons les entreprises dans la conception de portails ServiceNow sur mesure, incluant des solutions responsives adaptées à vos enjeux métiers. Contactez-nous pour en discuter !