20.07.27 : notes de version du portail intégré Apigee Edge

Vous consultez la documentation d'Apigee Edge.
Consultez la documentation Apigee X. en savoir plus

Le lundi 27 juillet, nous commencerons à publier une nouvelle version du portail intégré Apigee Edge.

Nouvelles fonctionnalités et améliorations

Cette section décrit les nouvelles fonctionnalités et les améliorations proposées dans cette release.

Amélioration de l'accessibilité et de la réactivité

Vous trouverez ci-dessous la liste des améliorations apportées à l'accessibilité et à la réactivité qui sont mises en œuvre pour cette version.

• Navigation au clavier:il est désormais possible de parcourir les barres de navigation de l'en-tête et du pied de page, de la navigation latérale SmartDocs, de la liste des applications, de la vue des applications et des cartes API à l'aide du clavier.
  
• Gestion du ciblage : lorsque vous utilisez la barre de navigation d'en-tête ou la barre de navigation latérale SmartDocs, le curseur se place en premier sur la <H1> de la page à la suite d'une action de navigation.
• Régions actives:les modifications apportées à la liste des API résultant du filtrage textuel sont désormais signalées aux utilisateurs d'un lecteur d'écran.
• Utilisation sémantique des en-têtes HTML:l'ensemble du texte est désormais contenu dans des balises HTML sémantiquement appropriées. Une structure d'en-têtes hiérarchique appropriée est désormais utilisée dans tout le portail.
• Utilisation singulier de <H1>: chaque page ne comporte désormais qu'un seul <H1>, ce qui permet aux lecteurs d'écran d'identifier facilement la description la plus pertinente.
• Majuscules stylistiques:désormais, l'accent visuel est appliqué exclusivement en CSS, et non plus dans le texte lui-même.
• Ordre logique du DOM:les boutons d'action des pages "Créer" et "Modifier l'application" ont été déplacés sous les éléments du formulaire dans le DOM. Ils peuvent donc être activés dans l'ordre logique, une fois l'interaction avec le formulaire terminée.
• Descriptions textuelles des éléments visuels:l'utilisation des libellés, du texte alternatif et du texte des boutons a été améliorée, ce qui permet d'améliorer la navigation avec un lecteur d'écran.
• Contraste des couleurs:le contraste des couleurs a été augmenté pour répondre aux exigences de contraste des WCAG AA à de nombreux endroits du produit. Les titres des API de la liste des API ont été déplacés sous l'image pour éviter un éventuel contraste des couleurs insuffisant.
• Validation des formulaires:sur les pages "Créer et modifier une application", les boutons d'envoi de formulaire ne sont plus désactivés. Vous pouvez les activer pour valider le formulaire. Les champs de formulaire validés sur les pages "Créer" et "Modifier l'application" incluent à présent des descriptions textuelles de l'erreur de validation.
• Réactivité:la largeur maximale s'applique désormais à toutes les pages, à l'exception des documents SmartDocs. La navigation SmartDocs fonctionne désormais sur les écrans étroits de la taille d'un téléphone. Les pages "Créer" et "Modifier une application" sont désormais plus réactives aux écrans étroits.

Modifications DOM susceptibles d'avoir un impact sur votre portail

Tenez compte tout particulièrement des points suivants:

• Les barres de navigation (en-tête et pied de page) et les en-têtes de page ont été stylisés (ou masqués) avec des remplacements CSS: la largeur maximale du contenu de la page est désormais limitée. Pour étendre les barres de navigation et les en-têtes de page jusqu'au bord de la fenêtre du navigateur, Apigee a stylisé le pseudo-élément :before. Pour en savoir plus, consultez la section Remplacement des couleurs primaires des barres de navigation et des en-têtes de page.
• Certains éléments de page ont un arrière-plan qui s'étend jusqu'au bord de la fenêtre du navigateur (à l'exception de l'image de fond en plein écran) : la largeur maximale du contenu de la page a été limitée afin d'améliorer la réactivité, ce qui peut limiter les panneaux auparavant en pleine largeur dans les pages personnalisées. Pour en savoir plus sur l'utilisation des nouveaux paramètres "max-width", consultez la page Créer un panneau pleine largeur sur une page de portail.
• Des niveaux de titres HTML spécifiques ont été ciblés par des sélecteurs CSS pour modifier les styles de texte:le niveau de titre appliqué à certains contenus a changé. Par exemple: <H1> → <H2> Consultez la liste détaillée des modifications apportées à cette version pour comprendre exactement quel contenu est concerné.
• Vous sélectionnez du blanc ou une couleur très claire comme "couleur secondaire" dans l'éditeur de thème du portail:cette couleur secondaire est utilisée pour les éléments de navigation qui sont difficiles à distinguer sur un arrière-plan blanc. Nous vous recommandons de choisir une couleur secondaire accessible, puis de la remplacer si nécessaire par un CSS personnalisé dans certains cas.
• Des styles ont été appliqués aux liens dans le texte:le style des liens est désormais plus accessible. Consultez les modifications ci-dessous pour comprendre comment elle peut interagir avec votre style existant.
• Un style ou des remplacements CSS ont été appliqués à la bordure inférieure de 2 pixels de la zone de contenu des fiches de la vue de la page d'accueil : cette bordure a été déplacée de <mat-card-content> vers une bordure supérieure en haut de <mat-card-actions>.

Résumé des modifications détaillées

Les sections suivantes récapitulent en détail les modifications apportées dans cette version, par catégorie.

Modifications à l'échelle du portail

Les modifications apportées à l'ensemble du portail sont résumées ci-dessous.

• Les variables suivantes ne sont plus utilisées :
  • $layout-horizontal-padding
  • $layout-main-content-horiz-padding
  • $layout-header-horiz-padding
  • $layout-context-bar-horiz-padding
• De nouvelles variables permettent de contrôler la largeur maximale de la zone de contenu principale et la marge intérieure horizontale minimale pour la zone de contenu principale :
  • $layout-main-content-max-width
  • $layout-horizontal-min-padding

Principales modifications apportées à la barre de navigation

Les modifications apportées à la barre de navigation principale sont résumées ci-dessous.

• Le logo <img> est désormais encapsulé dans un <a> pour les tailles d'écran d'ordinateur de bureau et d'écran mobile.
• Le bouton de la liste déroulante de l'utilisateur est désormais un <button> au lieu d'un <a>

Modifications du style de lien

Les liens standards <a> dans le texte sont désormais soulignés par défaut et une couleur d'arrière-plan (en fonction des paramètres du thème "couleur secondaire") lorsque l'utilisateur pointe dessus

404 modifications de la page

Les modifications apportées à la page 404 sont résumées ci-dessous.

• "Se connecter" est désormais <H2> au lieu de <H1>
• Le texte d'explication est désormais <H2> au lieu de <H1>

Page des API

Les modifications apportées à la page des API sont résumées ci-dessous, par catégorie.

• Fiche de saisie de filtre/recherche d'API :
  • <mat-card-content class="mat-card-content"> encapsule désormais l'en-tête et l'entrée de la fiche des API de recherche.
  • <H2> utilise désormais class="mat-subheading-1" au lieu de class="api-doc-filter-title"
  • Le <mat-form-field> utilise désormais appearance="outline"
  • Une icône de recherche a été ajoutée à <mat-form-field> avant la saisie: "<mat-icon matPrefix>search</mat-icon>"
  • Des libellés Aria et des références de commande ont été ajoutés à l'entrée
• Message de liste d'API vide :
  • "Aucune API trouvée" est désormais <H2> au lieu de <H1>
  • L'explication est désormais <H3> au lieu de <H2>
• Liste des fiches API:

  "Aucune API ne correspond à votre recherche" est désormais <H2> au lieu de <H1>

• Fiches API :
  • >div class="api-doc-card-content-image-gradient"></div> a été supprimé
  • Le titre de l'API a été déplacé de l'image contenant <div> vers <div class="api-doc-card-content-title"></div>, juste après l'image <div>
  • Le titre de l'API est désormais <H2> au lieu de <H1>

Liste d'applications:

• État vide :
  • "Commencer" est désormais <H2> au lieu de <H1>
  • Le guidage concernant l'état vide est désormais <H3> au lieu de <H2>
• Liste :
  • "Mes applications" est désormais <H2> au lieu de <H1>
  • <mat-row> est désormais déformé dans une <a>.

Créer et modifier des pages d'application

Les modifications apportées aux pages "Créer" et "Modifier une application" sont résumées ci-dessous.

• <div class="app-buttons"> a été déplacé à la fin de <form> et remplacé par <div class="form-buttons-sticky-container">
• Toute utilisation de la classe .app-layout-section est passée à .details-layout-section
• Toute utilisation de la classe .app-layout-section-title est passée à .details-layout-section-title
• Tous les en-têtes de section sont désormais <H2> au lieu de <div>
• Toute utilisation de la classe .app-layout-section-content est passée à .details-layout-section-content
• La liste des API n'est plus une liste de fiches API avec des boutons bascule (comme la liste des API). Il s'agit plutôt d'un tableau d'API
• L'entrée de l'URL de rappel a été déplacée dans une nouvelle section
• Le bouton d'enregistrement utilise désormais le style bouton en relief et l'arrière-plan de la couleur principale
• Les tables sont désormais encapsulées dans un <div> avec la classe .app-table-wrapper.
• Les en-têtes de tableau utilisent désormais le wrapper <thead>.
• Le corps des tables utilise désormais le wrapper <tbody>.
• [style.width] n'est plus utilisé pour définir la largeur des colonnes du tableau
• Toutes les balises <a> du tableau utilisent désormais <button à la place.

Liste des équipes

Les modifications apportées à la liste "Équipe" sont résumées ci-dessous.

• État vide :
  • La section "Commencer" est désormais <H2> au lieu de <H1>
  • L'option "Créer une équipe pour gérer la propriété partagée de l'application" est désormais <H3> au lieu de <H2>
• Liste :

  Le titre "Équipes" est désormais <H2> au lieu de <H1>

Créer et modifier des pages "Équipe"

Les modifications apportées aux pages "Créer" et "Modifier une équipe" sont résumées ci-dessous.

• Dans <form>, la classe .teams-form a été remplacée par .details-form.
• <div class="teams-buttons"> a été déplacé à la fin de <form> et remplacé par <div class="form-buttons-sticky-container">
• Toute utilisation de la classe .teams-layout-section est passée à .details-layout-section
• Toute utilisation de la classe .teams-layout-section-title est passée à .details-layout-section-title
• Toute utilisation de la classe .teams-layout-section-content est passée à .details-layout-section-content
• <div class="team-apps-container"> a été ajouté autour de <table class="team-apps">

SmartDocs

Les modifications apportées à l'interface SmartDocs sont résumées ci-dessous.

• Sur le côté de la barre de navigation :
  • La barre de navigation latérale a été entièrement réécrite avec des composants en matériau angulaire.
  • Les en-têtes de navigation latérale sont désormais <H2> au lieu de <div>
  • Les éléments de navigation utilisent désormais la couleur de texte par défaut du portail au lieu de la "couleur secondaire " de l'éditeur de thème du portail
  • Les éléments sélectionnés, sélectionnés et survolés dans la navigation latérale utilisent désormais des variantes sombres et claires de la "couleur secondaire" de l'éditeur de thème du portail, respectivement pour le texte et l'arrière-plan
• Contenu:
  • De nombreux sous-titres, tels que "Path Parameters" et "Header Parameters", sont désormais <H2> au lieu de <H3>.
  • Les entités de schéma sur la page "Vue d'ensemble" sont désormais <H3>=> au lieu de <H2>

Améliorer l'accessibilité d'une page d'accueil existante

Si vous disposez d'un portail existant, vous devez modifier la page d'accueil pour bénéficier des nouvelles améliorations d'accessibilité apportées aux fiches navigables, comme décrit ci-dessous:

1. Supprimez href="" du conteneur <mat-card>.
2. Utilisez <H2> au lieu de <H1> pour l'en-tête de la fiche dans <mat-card-header>.
3. Dans l'en-tête de carte <h2>, encapsulez le texte dans une <a class="navigable-content" href="href-name"> et définissez href-name sur la valeur appropriée pour la navigation de la fiche.

Vous pouvez également utiliser le modèle de carte suivant:

<mat-card class="home-page-card quick-start">
  <mat-card-header class="home-page-card-header" color="primary">
    <mat-icon class="home-page-card-header-icon">
      check_circle
    </mat-icon>
    <h2 class="home-page-card-header-text">
      <a class="navigable-content" href="page-route">
        Card heading
      </a>
    </h2>
  </mat-card-header>
  <mat-card-content class="home-page-card-content">
    <p class="home-page-card-content-text">
      Extra content
    </p>
  </mat-card-content>
</mat-card>
</p>

Remplacement des couleurs principales pour les barres de navigation et les en-têtes de page

Pour étendre les barres de navigation et les en-têtes de page au bord de la fenêtre du navigateur, ajoutez un style personnalisé pour les barres de navigation et les en-têtes de page à l'aide de l'éditeur de thème avancé, semblable à ce qui suit pour la barre de navigation d'en-tête:

// Override use of the primary color for header navigation bar background-color
.nav-header .mat-toolbar {
  color: #fff //  color for navigation text

  // Use the :before pseudo element to style the background of full-width bars
  // (header and footer navigation bars and page headers)
  &:before {
    background-color: #000; // background color for header navigation bar
  }
}

Mettre à jour la procédure de gestion des API pour une application

L'interaction utilisateur pour gérer les API dans une application sur le portail intégré a changé. Plus précisément, lorsqu'ils gèrent une application, dans la section "API", les utilisateurs doivent cliquer sur ou (au lieu d'un bouton d'activation) pour activer ou désactiver l'accès à une API depuis l'application.

Mettez à jour toutes les procédures sur votre portail qui décrivent comment gérer les API sur la page des applications, le cas échéant. Pour en savoir plus, consultez la page Gérer les API dans votre application.

Bugs résolus

Les bugs suivants sont résolus dans cette version. Cette liste s'adresse principalement aux utilisateurs qui veulent vérifier si leurs demandes d'assistance ont été corrigées. Elle n'est pas conçue pour fournir des informations détaillées à tous les utilisateurs.

ID du problème	Nom du composant	Description
161269688	Portail intégré	Les vignettes des éléments ne s'affichent pas correctement dans Apigee hybrid Les miniatures s'affichent désormais correctement sur la page "Éléments".
161295683	Portail intégré	Échec du serveur sans description définie pour l'application Désormais, la création d'une application aboutit si sa description (champ facultatif) n'est pas définie.
160898967	Portail intégré	La page de destination du portail ne défile pas correctement Vous pouvez désormais faire défiler la page de destination du portail.
160613314, 159197760, 158643196, 158069283, 158069066, 140154942	Portail intégré	Correctifs de sécurité divers
158593496	Portail intégré	Échec de la création d'applications pour les développeurs dans les portails V1 Un problème qui empêchait la création d'applications de développement sur les portails de la version 1 a été résolu.
158318079	Portail intégré	L'ajout ou la modification d'une URL de rappel dans le portail des développeurs ne fonctionne pas Un problème qui empêchait les utilisateurs du portail d'ajouter ou de modifier une URL de rappel sur la page des API a été résolu.
157902256	Portail intégré	La publication peut remplacer la modification du nom d'une page sur la page "Détails de la page" En raison d'une condition de concurrence, une mise à jour du nom d'une page a été remplacée lors de la publication du portail. Ce problème a été résolu.
138993728	Portail intégré	Le tri et la recherche des e-mails ne fonctionnent pas dans les programmes pour les développeurs La recherche et le tri des comptes utilisateur personnels fonctionnent désormais comme prévu.

Problèmes connus

Pour obtenir la liste des problèmes connus du portail intégré, consultez la section Problèmes connus concernant le portail intégré.