Migration graphique

  • 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