Migration graphique

    • Manuel de migration technique et graphique 2.3.0 vers 2.4.0

      Gestion des erreurs

      Chaque lien apportant des informations récupérés dynamiquement d'un service tiers peut renvoyer une erreur sous le format suivant :

      • en cas d'erreur de configuration
      <dynamic-information> 
  <dynamic-information id="directoryLink://5f71b39b-7ad4-4e2a-838e-4ee71ed07721" error="CONFIGURATION_EXCEPTION"> 
    <span class="link-info-error-message">Une erreur de configuration empêche de contacter le service distant.</span> 
  </dynamic-information> 
</dynamic-information> 
      • en cas d'erreur d'authentification (mot de passe requis)
      <dynamic-information> 
  <dynamic-information id="directoryLink://5f71b39b-7ad4-4e2a-838e-4ee71ed07721" error="UNAUTHORIZED"> 
    <span class="link-info-error-message">Vous n'êtes pas autorisé à accéder à ce service. 
      <span id="dynamic-info-calendar-change-password-jgdtnw2k" class="link-change-password-link"/> 
      <script type="text/javascript">if (!window.MessagingConnector || !MessagingConnector.insertChangePasswordLink) { MessagingConnector = {SITE_URI_PREFIX: '', LANG: 'fr'} $j.getScript("/plugins/messaging-connector/resources/js/messaging-connector-password.js").done(function(){MessagingConnector.insertChangePasswordLink('dynamic-info-calendar-change-password-jgdtnw2k', updateDynamicInformation_null)}).fail(function(jqxhr, settings, exception) { console.error("An error occurred while loading js files", exception); }) } else{ MessagingConnector.insertChangePasswordLink('dynamic-info-calendar-change-password-jgdtnw2k', updateDynamicInformation_null) }</script> 
    </span> 
  </dynamic-information> 
</dynamic-information> 

      Les erreurs survenues lors de la récupération des informations dynamiques sont affichées dans un nouvel élément HTML avec la classe CSS "link-info-error-message"

      Pour afficher ces éventuelles erreurs dans un tooltip au survol du lien, voici un exemple de règles CSS à ajouter dans votre charte :

      .linkdirectory-inputdata .link.error .link-dynamic-info:before {
 content: "!";
}

.linkdirectory-inputdata .link-dynamic-info .link-info-tooltip,  
.linkdirectory-inputdata .link .link-info-error-message {      
    display: none !important;    
    position: absolute;    
    top: 100%;    
    top: calc(100% - 4px);    
    left: 0;    
    z-index: 100;    
    color: black;    
    width: 200px;    
    text-align: left;    
    background: white;    
    padding: 1px;    
    border: 1px solid #D5D5D5;    
    box-shadow: 5px 5px 5px #888888;    
    border-radius: 4px;    
}    

.linkdirectory-inputdata .link .link-info-error-message {    
    border-left: 4px solid #cc0000;    
    padding-left: 6px;    
}    

.linkdirectory-inputdata ul.links > li.link a:hover .link-info-tooltip,    
.linkdirectory-inputdata ul.links > li.link a.error:hover + .link-info-error-message,    
.linkdirectory-inputdata ul.links > li.link .link-info-error-message:hover {    
    display: block !important;    
}    

      L'exemple ci-dessus est donné pour l'affichage des liens / applications depuis l'input data (fichier CSS linkdirectory-inputdata.css)
      Si vous utilisez le service annuaire de liens, vous pouvez appliquer les mêmes règles CSS dans le fichier CSS linkdirectory-thumbnails.css

Retour en haut

Link directory