20.07.27 – Versionshinweise zum integrierten Portal von Apigee Edge

Sie sehen die Dokumentation zu Apigee Edge.
Zur Apigee X-Dokumentation weitere Informationen

Am Montag, dem 27. Juli, wird eine neue Version des integrierten Portals Apigee Edge veröffentlicht.

Neue Features und Verbesserungen

In diesem Abschnitt werden die neuen Features und Verbesserungen in diesem Release beschrieben.

Verbesserte Bedienungshilfen und Reaktionsfähigkeit

Im Folgenden finden Sie die Verbesserungen für Barrierefreiheit und Reaktionsfähigkeit, die in dieser Version implementiert wurden.

• Navigation über die Tastatur: Sie können jetzt mit der Tastatur in den Navigationsleisten der Kopf- und Fußzeile, in der seitlichen Navigation von SmartDocs, in der App-Liste, in der App-Ansicht und in den API-Karten navigieren.
  
• Verwaltung fokussieren: Bei der Navigation über die Navigationsleiste in der Kopfzeile und in der seitlichen Navigationsleiste von SmartDocs wird der Fokus nach einer Navigationsaktion auf das erste <H1> auf der Seite verschoben.
• Live-Regionen: Änderungen an der Liste der APIs, die durch Textfilterungen herbeigeführt werden, werden jetzt an Nutzer gemeldet, die einen Screenreader verwenden.
• Semantische Verwendung von HTML-Überschriften:Der gesamte Text ist jetzt in semantisch passenden HTML-Tags enthalten. Im gesamten Portal wird nun eine entsprechend hierarchische Überschriftenstruktur verwendet.
• Einzigartige Verwendung von <H1>: Jede Seite hat jetzt nur noch eine einzige <H1>, damit Screenreader die informativste Beschreibung des Seiteninhalts leicht identifizieren können.
• Stilistische Großschreibung:Die Verwendung von Großbuchstaben als visueller Akzent wird jetzt ausschließlich in CSS und nicht mehr im Text angewendet.
• Logische Reihenfolge im DOM: Die Aktionsschaltflächen auf den Seiten „App erstellen“ und „App bearbeiten“ wurden unterhalb der Formularelemente im DOM verschoben, damit sie nach Abschluss der Formularinteraktion in logischer Reihenfolge aktiviert werden können.
• Textbeschreibungen visueller Elemente:Beschriftungen, Alt-Text und Schaltflächentext werden häufiger verwendet, um die Navigation mit einem Screenreader zu verbessern.
• Farbkontrast:Der Farbkontrast wurde erhöht, um die Kontrastanforderungen der WCAG AA an vielen Stellen des Produkts zu erfüllen. API-Titel in der API-Liste wurden unter das Bild verschoben, um einen möglichen unzureichenden Farbkontrast zu vermeiden.
• Formularvalidierung: Auf den Seiten zum Erstellen und Bearbeiten von Apps sind die Schaltflächen zum Senden von Formularen nicht mehr deaktiviert und können aktiviert werden, um das Formular zu validieren. Geprüfte Formularfelder auf den Seiten zum Erstellen und Bearbeiten von Apps enthalten jetzt Beschreibungen des Validierungsfehlers in Textform.
• Responsivität: Es gibt jetzt eine maximale Breite, die für alle Seiten außer SmartDocs gilt. Die Navigation in SmartDocs funktioniert jetzt auch auf schmalen Mobiltelefonbildschirmen. Die Seiten zum Erstellen und Bearbeiten von Apps reagieren jetzt besser auf schmale Bildschirme.

DOM-Änderungen, die sich auf Ihr Portal auswirken können

Du solltest vor allem Folgendes berücksichtigen:

• Die Navigationsleisten (Kopf- und Fußzeile) und die Seitenüberschriften wurden mit CSS-Überschreibungen gestaltet (oder ausgeblendet): Es gibt jetzt eine maximale Breite für Seiteninhalte. Um die Navigationsleisten und Kopfzeilen bis zum Rand des Browserfensters zu erweitern, hat Apigee das Pseudoelement :before gestaltet. Weitere Informationen finden Sie unter Primärfarben für Navigationsleisten und Kopfzeilen überschreiben.
• Es gibt Seitenelemente mit Hintergründen, die sich bis zum Rand des Browserfensters erstrecken (mit Ausnahme des Hintergrundbilds im Vollbildmodus): Die maximale Breite des Seiteninhalts wurde begrenzt, um die Reaktionsfähigkeit zu verbessern. Dadurch können alle bisher volle Breitenbereiche auf benutzerdefinierten Seiten eingeschränkt werden. Weitere Informationen zur Verwendung der neuen Einstellungen für die maximale Breite finden Sie unter Ein Steuerfeld in voller Breite auf einer Portalseite erstellen.
• Auf bestimmte HTML-Überschriftsebenen wurde mithilfe von CSS-Selektoren ein Targeting vorgenommen, um Textstile zu ändern:Die auf bestimmten Content angewendete Überschriftenebene hat sich geändert. Beispiel: <H1> → <H2> In der detaillierten Liste der Änderungen für diesen Release kannst du genau nachvollziehen, welche Inhalte betroffen sind.
• Im Editor für das Portaldesign wird eine weiße oder sehr helle Farbe als Sekundärfarbe ausgewählt:Die sekundäre Farbe wird für Navigationselemente verwendet, die vor einem weißen Hintergrund schwer zu erkennen sind. Wir empfehlen, eine zugängliche Sekundärfarbe auszuwählen und diese bei Bedarf in bestimmten Situationen mit benutzerdefinierten CSS zu überschreiben.
• In-Text-Links wurden angepasst: Der Stil von Links ist jetzt barrierefreier. Unten sehen Sie die Änderungen, die unter Umständen mit Ihren vorhandenen Stilen interagieren.
• Der 2-Pixel-Rahmen unten im Inhaltsbereich von Home View-Karten wurde mit CSS-Überschreibungen gestaltet oder ausgeblendet: Dieser Rahmen wurde von <mat-card-content> nach oben in <mat-card-actions> verschoben.

Zusammenfassung der Änderungen

In den folgenden Abschnitten werden die in dieser Version implementierten Änderungen nach Kategorie zusammengefasst dargestellt.

Portalübergreifende Änderungen

Die Änderungen im gesamten Portal sind unten zusammengefasst.

• Die folgenden Variablen werden nicht mehr verwendet:
  • $layout-horizontal-padding
  • $layout-main-content-horiz-padding
  • $layout-header-horiz-padding
  • $layout-context-bar-horiz-padding
• Es gibt neue Variablen, mit denen Sie die maximale Breite des Hauptinhaltsbereichs und den minimalen horizontalen Abstand für den Hauptinhaltsbereich steuern können:
  • $layout-main-content-max-width
  • $layout-horizontal-min-padding

Änderungen an der primären Navigationsleiste

Die Änderungen an der primären Navigationsleiste sind unten zusammengefasst.

• Das Logo <img> ist jetzt sowohl für Bildschirmgrößen von Computern als auch von Mobilgeräten in ein <a> eingeschlossen
• Die Drop-down-Schaltfläche für Nutzer ist jetzt <button> anstelle von <a>.

Änderungen am Linkstil

Standardlinks <a> in Text werden jetzt standardmäßig unterstrichen und haben eine Hintergrundfarbe (basierend auf den Designeinstellungen „Sekundärfarbe“), wenn der Mauszeiger darauf bewegt wird.

404-Fehlerseitenänderungen

Die Änderungen an der 404-Seite sind unten zusammengefasst.

• „Jetzt anmelden“ ist jetzt <H2> statt <H1>
• Erläuterungstext ist jetzt "<H2>" statt "<H1>"

Seite "APIs"

Die Änderungen auf der Seite „APIs“ sind unten nach Kategorie zusammengefasst.

• Eingabekarte für API-Suche/-Filter:
  • <mat-card-content class="mat-card-content"> umschließt jetzt die Überschrift und Eingabe der Karte „Search APIs“
  • <H2> verwendet jetzt class="mat-subheading-1" anstelle von class="api-doc-filter-title"
  • <mat-form-field> verwendet jetzt appearance="outline"
  • Dem <mat-form-field> wurde vor der Eingabe ein Suchsymbol hinzugefügt: "<mat-icon matPrefix>search</mat-icon>"
  • Der Eingabe wurden Aria-Labels und Steuerreferenzen hinzugefügt
• Leere API-Liste:
  • „Keine APIs gefunden“ ist jetzt <H2> statt <H1>
  • Die Erklärung lautet jetzt <H3> statt <H2>
• Liste der API-Karten:

  „Keine APIs stimmen mit Ihrer Suche überein“ ist jetzt <H2> anstelle von <H1>

• API-Karten:
  • >div class="api-doc-card-content-image-gradient"></div> wurde entfernt
  • Der API-Titel wurde aus dem Bild, das <div> enthält, direkt nach dem Bild <div> in <div class="api-doc-card-content-title"></div> verschoben
  • API-Titel lautet jetzt <H2> statt <H1>

Liste der Apps:

• Leerer Zustand:
  • "Jetzt starten" ist jetzt <H2> statt <H1>
  • Die Empfehlung für den leeren Status lautet jetzt „<H3>“ statt „<H2>“
• Liste:
  • „Meine Apps“ heißt jetzt <H2> statt <H1>
  • <mat-row> ist jetzt in <a> verzerrt

App-Seiten erstellen und bearbeiten

Die Änderungen auf den Seiten zum Erstellen und Bearbeiten von Anwendungen werden unten zusammengefasst.

• <div class="app-buttons"> wurde an das Ende von <form> verschoben und durch <div class="form-buttons-sticky-container"> ersetzt
• Die gesamte Nutzung der Klasse .app-layout-section wurde zu .details-layout-section geändert
• Die gesamte Nutzung der Klasse .app-layout-section-title wurde zu .details-layout-section-title geändert
• Alle Abschnittsüberschriften sind jetzt <H2> statt <div>
• Die gesamte Nutzung der Klasse .app-layout-section-content wurde zu .details-layout-section-content geändert
• Die Liste der APIs ist keine Liste von API-Karten mit Ein-/Aus-Schaltflächen mehr (ähnlich der Liste der APIs). Stattdessen ist es eine Tabelle mit APIs,
• Die Eingabe für die Callback-URL wurde in einen neuen Abschnitt verschoben.
• Für die Schaltfläche „Speichern“ werden jetzt der Schaltflächenstil „Matte erhöht“ und der Hintergrund in der Hauptfarbe verwendet.
• Tabellen sind jetzt in einer <div> mit der Klasse .app-table-wrapper zusammengefasst
• Für Tabellenüberschriften wird jetzt der Wrapper <thead> verwendet
• Für Tabellentexte wird jetzt der Wrapper <tbody> verwendet
• [style.width] wird nicht mehr zum Festlegen der Tabellenspaltenbreiten verwendet
• Für alle <a>-Tags in der Tabelle wird jetzt <button verwendet.

Teamliste

Die Änderungen an der Teamliste sind unten zusammengefasst.

• Leerer Zustand:
  • „Jetzt starten“ ist jetzt <H2> statt <H1>
  • „Team zur Verwaltung gemeinsamer App-Eigentumsrechte erstellen“ heißt jetzt <H3> statt <H2>
• Liste:

  Der Titel "Teams" lautet jetzt "<H2>" statt "<H1>"

Teamseiten erstellen und bearbeiten

Die Änderungen an den Seiten "Team erstellen und bearbeiten" werden unten zusammengefasst.

• Auf der <form> wurde die Klasse .teams-form durch .details-form ersetzt.
• <div class="teams-buttons"> wurde an das Ende von <form> verschoben und durch <div class="form-buttons-sticky-container"> ersetzt
• Die gesamte Nutzung der Klasse .teams-layout-section wurde zu .details-layout-section geändert
• Die gesamte Nutzung der Klasse .teams-layout-section-title wurde zu .details-layout-section-title geändert
• Die gesamte Nutzung der Klasse .teams-layout-section-content wurde zu .details-layout-section-content geändert
• <div class="team-apps-container"> wurde um <table class="team-apps"> herum hinzugefügt

SmartDocs

Die Änderungen an der SmartDocs-Benutzeroberfläche sind unten zusammengefasst.

• Seitliche Navigationsleiste:
  • Die seitliche Navigation wurde komplett neu geschrieben und enthält Komponenten aus eckigem Material.
  • Überschriften der seitlichen Navigationsleiste sind jetzt <H2> statt <div>
  • Für Navigationselemente wird jetzt die Standardtextfarbe des Portals anstelle der Sekundärfarbe des Portaldesign-Editors verwendet
  • Für ausgewählte, fokussierte und mit dem Mauszeiger eingeblendete Elemente in der seitlichen Navigationsleiste werden jetzt dunkle und helle Varianten der „Sekundärfarbe“ des Portaldesign-Editors für den Text bzw. den Hintergrund verwendet
• Inhalt:
  • Viele Zwischenüberschriften wie "Pfadparameter" und "Header-Parameter" sind jetzt <H2> statt <H3>.
  • Schemaentitäten auf der Übersichtsseite sind jetzt <H3>=> statt <H2>

Verbesserte Bedienungshilfen zu einer vorhandenen Startseite hinzufügen

Wenn Sie ein geschlossenes Portal haben, müssen Sie die Startseite bearbeiten, um von den neuen Verbesserungen der Bedienungshilfen für navigierbare Karten zu profitieren, wie unten beschrieben:

1. Entfernen Sie href="" aus dem <mat-card>-Container.
2. Verwende <H2> statt <H1> für die Überschrift der Karte innerhalb von <mat-card-header>.
3. In der Kartenüberschrift <h2> umbrechen Sie den Text in <a class="navigable-content" href="href-name"> und legen href-name auf den entsprechenden Wert für die Navigation der Karte fest.

Alternativ können Sie die folgende Kartenvorlage verwenden:

<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>

Primärfarben für Navigationsleisten und Kopfzeilen überschreiben

Wenn Sie die Navigationsleisten und Seitenheader bis zum Rand des Browserfensters erweitern möchten, fügen Sie mit dem erweiterten Designeditor benutzerdefinierte Stile für die Navigationsleisten und Seitenheader hinzu. Für die Navigationsleiste der Kopfzeile gehen Sie dazu so vor:

// 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
  }
}

Verfahren zum Verwalten von APIs für eine Anwendung aktualisieren

Die Nutzerinteraktion zur Verwaltung der APIs in einer App im integrierten Portal hat sich geändert. Insbesondere müssen Nutzer beim Verwalten einer App im Abschnitt „APIs“ auf oder (anstatt auf eine Ein-/Aus-Schaltfläche) klicken, um den Zugriff auf eine API aus der App zu aktivieren bzw. zu deaktivieren.

Aktualisieren Sie gegebenenfalls alle Verfahren in Ihrem Portal, in denen beschrieben wird, wie APIs auf der Seite „Apps“ verwaltet werden. Weitere Informationen finden Sie unter APIs in der Anwendung verwalten.

Fehlerkorrekturen

Folgende Fehler wurden in diesem Release behoben. Diese Liste ist hauptsächlich für Nutzer gedacht, die prüfen möchten, ob ihre Support-Tickets erfolgreich bearbeitet wurden. Sie enthält keine detaillierten Informationen für allgemeine Nutzer.

Fehler-ID	Komponentenname	Beschreibung
161269688	Integriertes Portal	Asset-Thumbnails werden in Apigee Hybrid falsch gerendert Thumbnails werden jetzt korrekt auf der Seite „Assets“ angezeigt.
161295683	Integriertes Portal	Serverausfall ohne festgelegte Beschreibung für die App Die App-Erstellung ist jetzt erfolgreich, wenn die Beschreibung (ein optionales Feld) für eine App nicht definiert ist.
160898967	Integriertes Portal	Die Landingpage des Portals lässt sich nicht richtig scrollen Die Portal-Landingpage kann jetzt gescrollt werden.
160613314, 159197760, 158643196, 158069283, 158069066, 140154942	Integriertes Portal	Verschiedene Sicherheitsupdates
158593496	Integriertes Portal	Erstellung der Entwickler-App in V1-Portalen fehlgeschlagen Ein Problem wurde behoben, das die Erstellung von Entwickler-Apps auf V1-Portalen verhinderte.
158318079	Integriertes Portal	Das Hinzufügen oder Ändern der Callback-URL im Entwicklerportal funktioniert nicht Ein Problem wurde behoben, durch das Portalnutzer auf der Seite „APIs“ keine Callback-URL hinzufügen oder ändern konnten.
157902256	Integriertes Portal	Durch die Veröffentlichung kann eine Aktualisierung des Seitennamens auf der Seite mit den Seitendetails überschrieben werden. Aufgrund einer Race-Bedingung wurde beim Veröffentlichen des Portals eine Aktualisierung des Seitennamens überschrieben.
138993728	Integriertes Portal	Sortieren und Suchen von E-Mails von Entwicklerprogrammen funktioniert nicht Das Suchen und Sortieren von Privatnutzerkonten funktioniert jetzt wie erwartet.

Bekannte Probleme

Eine Liste der bekannten Probleme des integrierten Portals finden Sie unter Bekannte Probleme des integrierten Portals.