Gestion d'erreur des Variables de type External API et affichage dans le formulaire aux utilisateurs

Q&A
1

Bonjour,

Cette question est liée à l'absence de mécanisme de gestion d'erreur lors des appels d'API REST effectués au travers de variables de type "External API" dans les formulaires et pages.

De nombreux cas d'erreur peuvent se poser : erreur 500 interne au serveur, erreur 403 liée à un problème de permission, erreur 401 suite à une session expirée etc...
Quelle que soit la source du problème, il semble que rien n'est prévu pour permettre au développeur du formulaire d'afficher un feedback à l'utilisateur pour l'informer de l'anomalie.

Avez-vous des solutions pour gérer les erreurs d'appel d'API et permettre d'informer l'utilisateur du formulaire?

Merci d'avance pour votre aide!

2

Hello

Effectivement le mécanisme de gestion d'erreur lors des appels d'external API est manquant. Nous allons ajouter ce mécanisme pour la prochaine release du produit.

En attendant, en utilisant le custom development, il est possible d'importer un asset.js (code à la fin de la réponse) dans la page. Une fois cet asset importé, il sera possible dans votre page d'accéder au status code et à l'entête http de la réponse.

Exemple:

  • Créer une External API users avec comme valeur ./API/identity/user?c=20&p=0
  • users.__headers pour accèder à l'entête de la response
  • users.__status pour accèder au status code de la response (200 si ok, 403 si Forbidden ...)

Ci joint l'assets.js à importer dans chaque page en attendant la nouvelle version du produit

(function() {
  'use strict';

  angular
    .module('bonitasoft.ui.services')
    .run(createTempUrlResolver);

  function createTempUrlResolver(Resolver, ResolverService, $http, $interpolate, $rootScope) {
    class TempUrlResolver extends Resolver {

      interpolateUrl() {
        return $interpolate(this.content, false, null, true)(this.model);
      }

      processResponse(response){
       let cloneData = Object.assign(response.data);
       cloneData.__headers = Object.assign(response.headers());
       cloneData.__status = response.status;
       this.model[this.name] = cloneData;
       return this.model[this.name];
      }

      resolve() {
        let url = this.interpolateUrl();
        if (angular.isDefined(url)) {
          return $http.get(url).then((data) => {
            return this.processResponse(data);
          }).catch((data)=>{
            return this.processResponse(data);
          });
        }
      }
      watchDependencies() {
        if (this.hasDependencies()) {
          $rootScope.$watch(() => this.interpolateUrl(), () => this.resolve());
        }
      }
      hasDependencies() {
        //test if the url contains some {{ }} which shows that it has dependencies
        return (this.content || '').match(/\{\{[^\}]+\}\}/);
      }
    }
    ResolverService.addResolverType('url',(model, name, content) => new TempUrlResolver(model, name, content));
  }
})();

En espérant que cela t'aide.

Benjamin

3

Bonjour,

Une autre méthode consiste à créer un custom widget. Il est alors plus facile de lier les différentes sorties (header, réponse) dans autant de propriété du custom widget.

Mieux : en cas d'erreur de la REST API, c'est alors le custom widget qui peut afficher une information à l'utilisateur (avec une nouvelle propriété du widget : le message a afficher à l'utilisateur).

Cordialement

4

Thank you Benjamin!