20.07.27 – Versionshinweise zum integrierten Portal von Apigee Edge

Sie lesen gerade die Dokumentation zu Apigee Edge.
Zur Dokumentation zu Apigee X. info

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

Neue Features und Verbesserungen

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

Verbesserungen bei Bedienungshilfen und Reaktionsfähigkeit

Im Folgenden sind die Verbesserungen bei Bedienungshilfen und Reaktionsfähigkeit aufgeführt, die in diesem Release implementiert wurden.

• Tastaturnavigation:Die Navigationsleisten für Header und Fußzeile, die seitliche SmartDocs-Navigation, die Liste der Apps, die App-Datenansicht und die API-Karten können jetzt über die Tastatur bedient werden.
  
• Fokusverwaltung: Wenn Sie mit der Navigationsleiste für die Kopfzeile und der seitlichen SmartDocs-Navigation navigieren, wird der Fokus nach einer Navigationsaktion auf das erste <H1> auf der Seite verschoben.
• Live-Bereiche:Änderungen an der Liste der APIs, die durch die Textfilterung entstehen, werden jetzt Nutzern mit Screenreadern gemeldet.
• Semantische Verwendung von HTML-Überschriften:Der gesamte Text ist jetzt in semantisch geeigneten HTML-Tags enthalten. Im gesamten Portal wird jetzt eine angemessene hierarchische Überschriftenstruktur verwendet.
• Einmalige Verwendung von <H1>: Jede Seite hat jetzt nur ein einziges <H1>, sodass Screenreader die informativste Beschreibung des Seiteninhalts leicht identifizieren können.
• Stilistische Großschreibung:Die Verwendung von Großbuchstaben als visuelle Akzentuierung wird jetzt ausschließlich mit CSS und nicht im eigentlichen Text angewendet.
• Logische Reihenfolge des DOM:Die Aktionsschaltflächen auf den Seiten „App erstellen“ und „App bearbeiten“ wurden im DOM unter die Formularelemente verschoben, sodass sie nach Abschluss der Formularinteraktion in logischer Reihenfolge aktiviert werden können.
• Textbeschreibungen visueller Elemente:Die Verwendung von Labels, Alt-Text und Schaltflächentext wurde verbessert, was die Navigation mit einem Screenreader erleichtert.
• Farbkontrast:Der Farbkontrast wurde an vielen Stellen im Produkt erhöht, um die WCAG AA-Kontrastanforderungen zu erfüllen. Die API-Titel in der Liste der APIs wurden unter das Bild verschoben, um einen möglicherweise unzureichenden Farbkontrast zu vermeiden.
• Formularvalidierung:Auf den Seiten „App erstellen“ und „App bearbeiten“ sind die Schaltflächen zum Senden des Formulars nicht mehr deaktiviert und können aktiviert werden, um das Formular zu validieren. Validierte Formularfelder auf den Seiten „App erstellen“ und „App bearbeiten“ enthalten jetzt Textbeschreibungen des Validierungsfehlers.
• Reaktionsfähigkeit:Für alle Seiten außer SmartDocs gilt jetzt eine maximale Breite. Die SmartDocs-Navigation funktioniert jetzt auch auf schmalen Bildschirmen in Smartphone-Größe. Die Seiten „App erstellen“ und „App bearbeiten“ reagieren jetzt besser auf schmale Bildschirme.

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

Berücksichtigen Sie insbesondere Folgendes:

• Die Navigationsleisten (Kopf- und Fußzeile) und Seitenüberschriften wurden mit CSS-Überschreibungen gestaltet (oder ausgeblendet): Für Seiteninhalte gilt jetzt eine maximale Breite. Um die Navigationsleisten und Seitenüberschriften bis zum Rand des Browserfensters zu erweitern, hat Apigee das Pseudoelement :before gestaltet. Weitere Informationen finden Sie unter Primärfarben für Navigationsleisten und Seitenüberschriften überschreiben.
• Es gibt Seitenelemente mit Hintergründen, die bis zum Rand des Browserfensters reichen (außer dem Hintergrundbild im Vollbildmodus) : Die maximale Breite des Seiteninhalts wurde begrenzt, um die Reaktionsfähigkeit zu verbessern. Dadurch werden eventuell früher Darstellungsbereiche in voller Breite auf benutzerdefinierten Seiten eingeschränkt. Weitere Informationen zur Verwendung der neuen Einstellungen für die maximale Breite finden Sie unter Steuerfeld mit voller Breite auf einer Portalseite erstellen.
• Bestimmte HTML-Überschriftenebenen wurden mit CSS-Selektoren ausgewählt, um Textstile zu ändern:Die auf bestimmte Inhalte angewendete Überschriftenebene hat sich geändert. Beispiel: <H1> → <H2> In der detaillierten Liste der Änderungen für dieses Release erfahren Sie genau, welche Inhalte betroffen sind.
• Im Designeditor des Portals ist eine weiße oder sehr helle Farbe als „Sekundärfarbe“ ausgewählt:Die Sekundärfarbe wird für Navigationselemente verwendet, die auf einem weißen Hintergrund schwer zu erkennen sind. Wir empfehlen, eine barrierefreie Sekundärfarbe auszuwählen und sie dann bei Bedarf in bestimmten Situationen mit benutzerdefiniertem SCSS zu überschreiben.
• Links im Text wurden gestaltet:Die Gestaltung von Links ist jetzt barrierefreier. In den folgenden Änderungen erfahren Sie, wie sich dies auf Ihre vorhandene Gestaltung auswirken kann.
• Der 2-Pixel-Rahmen unten im Inhaltsbereich der Karten in der Home-Ansicht wurde mit CSS-Überschreibungen gestaltet oder ausgeblendet: Dieser Rahmen wurde von <mat-card-content> zu einem oberen Rahmen für <mat-card-actions> verschoben.

Zusammenfassung der detaillierten Änderungen

In den folgenden Abschnitten werden die detaillierten Änderungen zusammengefasst, die in diesem Release nach Kategorie implementiert wurden.

Portalweite Änderungen

Die portalweiten Änderungen 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 für den Hauptinhaltsbereich 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 Computer- als auch für Mobilbildschirmgrößen in ein <a>-Element eingeschlossen.
• Die Drop-down-Schaltfläche für Nutzer ist jetzt ein <button> anstelle eines <a>

Änderungen am Linkstil

Standardlinks <a> in Texten sind jetzt standardmäßig unterstrichen und haben beim Hovern eine Hintergrundfarbe (basierend auf der Einstellung „Sekundärfarbe“ des Designs).

Änderungen an der 404-Fehlerseite

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

• „Jetzt anmelden“ ist jetzt <H2> anstelle von <H1>.
• Der Erklärungstext ist jetzt <H2> anstelle von <H1>.

Seite „APIs“

Die Änderungen an 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 die Eingabe der Karte „APIs suchen“.
  • Für <H2> wird jetzt class="mat-subheading-1" anstelle von class="api-doc-filter-title" verwendet.
  • Für <mat-form-field> wird jetzt appearance="outline" verwendet.
  • Vor der Eingabe wurde ein Suchsymbol zu <mat-form-field> hinzugefügt: "<mat-icon matPrefix>search</mat-icon>"
  • Der Eingabe wurden Aria-Labels und Steuerelementreferenzen hinzugefügt.
• Meldung für leere API-Liste:
  • „Keine APIs gefunden“ ist jetzt <H2> anstelle von <H1>.
  • Die Erklärung ist jetzt <H3> anstelle von <H2>
• Liste der API-Karten:

  „Keine APIs entsprechen Ihrer Suche“ 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 Element mit dem Bild <div> entfernt und in <div class="api-doc-card-content-title"></div> direkt nach dem Element mit dem Bild <div> verschoben.
  • API-Titel sind jetzt <H2> anstelle von <H1>.

Liste der Apps:

• Keine Einträge:
  • „Erste Schritte“ ist jetzt <H2> anstelle von <H1>.
  • Die Anleitung für den leeren Zustand ist jetzt <H3> anstelle von <H2>.
• Liste:
  • „Meine Apps“ ist jetzt <H2> anstelle von <H1>.
  • <mat-row> ist jetzt in ein <a>-Element eingeschlossen.

Seiten „App erstellen“ und „App bearbeiten“

Die Änderungen an den Seiten „App erstellen“ und „App bearbeiten“ sind unten zusammengefasst.

• <div class="app-buttons"> wurde an das Ende des <form>-Elements verschoben und durch <div class="form-buttons-sticky-container"> ersetzt.
• Alle Verwendungen der Klasse .app-layout-section wurden in .details-layout-section geändert.
• Alle Verwendungen der Klasse .app-layout-section-title wurden in .details-layout-section-title geändert.
• Alle Abschnittsüberschriften sind jetzt <H2> anstelle von <div>.
• Alle Verwendungen der Klasse .app-layout-section-content wurden in .details-layout-section-content geändert.
• Die Liste der APIs ist keine Liste von API-Karten mit Umschaltern mehr (ähnlich der Liste der APIs). Stattdessen ist es eine Tabelle von APIs.
• Die Eingabe für die Callback-URL wurde in einen neuen Abschnitt verschoben.
• Die Schaltfläche „Speichern“ verwendet jetzt den Stil „mat-raised-button“ und den Hintergrund der Primärfarbe.
• Tabellen sind jetzt in ein <div>-Element mit der Klasse .app-table-wrapper eingeschlossen.
• Tabellenüberschriften verwenden jetzt das <thead>-Element.
• Tabellenkörper verwenden jetzt das <tbody>-Element.
• [style.width] wird nicht mehr verwendet, um die Spaltenbreiten von Tabellen festzulegen.
• Alle <a>-Tags in der Tabelle verwenden jetzt <button anstelle

Teamliste

Die Änderungen an der Teamliste sind unten zusammengefasst.

• Keine Einträge:
  • „Erste Schritte“ ist jetzt <H2> anstelle von <H1>.
  • „Team erstellen, um die gemeinsame Inhaberschaft von Apps zu verwalten“ ist jetzt <H3> anstelle von <H2>
• Liste:

  Der Titel „Teams“ ist jetzt <H2> anstelle von <H1>.

Seiten „Team erstellen“ und „Team bearbeiten“

Die Änderungen an den Seiten „Team erstellen“ und „Team bearbeiten“ sind unten zusammengefasst.

• Im <form> wurde die Klasse .teams-form durch .details-form ersetzt.
• <div class="teams-buttons"> wurde an das Ende des <form>-Elements verschoben und durch <div class="form-buttons-sticky-container"> ersetzt.
• Alle Verwendungen der Klasse .teams-layout-section wurden in .details-layout-section geändert.
• Alle Verwendungen der Klasse .teams-layout-section-title wurden in .details-layout-section-title geändert.
• Alle Verwendungen der Klasse .teams-layout-section-content wurden in .details-layout-section-content geändert.
• <div class="team-apps-container"> wurde um <table class="team-apps"> hinzugefügt.

SmartDocs

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

• Seitliche Navigationsleiste:
  • Die seitliche Navigationsleiste wurde komplett mit Angular Material-Komponenten neu geschrieben.
  • Überschriften der seitlichen Navigationsleiste sind jetzt <H2> anstelle von <div>
  • Navigationselemente verwenden jetzt die Standardtextfarbe des Portals anstelle der „Sekundärfarbe“ des Designeditors des Portals.
  • Ausgewählte, fokussierte und mit dem Mauszeiger überfahrene Elemente in der seitlichen Navigationsleiste verwenden jetzt dunkle und helle Varianten der „Sekundärfarbe“ des Designeditors des Portals für den Text bzw. den Hintergrund.
• Inhalt:
  • Viele Unterüberschriften wie „Pfadparameter“ und „Headerparameter“ sind jetzt <H2> anstelle von <H3>.
  • Schemaentitäten auf der Übersichtsseite sind jetzt <H3>=> anstelle von <H2>.

Verbesserungen bei den Bedienungshilfen zu einer vorhandenen Startseite hinzufügen

Wenn Sie ein vorhandenes Portal haben, müssen Sie die Startseite bearbeiten, um die neuen Verbesserungen bei den Bedienungshilfen für navigierbare Karten zu nutzen. Gehen Sie dazu so vor:

1. Entfernen Sie href="" aus dem <mat-card>-Container.
2. Verwenden Sie <H2> anstelle von <H1> für die Kartenüberschrift in <mat-card-header>.
3. Schließen Sie den Text in der Kartenüberschrift <h2> in ein <a class="navigable-content" href="href-name">-Element ein und legen Sie für „href-name“ 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 Seitenüberschriften überschreiben

Um die Navigationsleisten und Seitenüberschriften bis zum Rand des Browserfensters zu erweitern, fügen Sie mit dem erweiterten Designeditor benutzerdefinierte Stile für die Navigationsleisten und Seitenüberschriften hinzu. Für die Navigationsleiste der Kopfzeile könnte das so aussehen:

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

Anleitung zum Verwalten von APIs für eine App aktualisieren

Die Nutzerinteraktion zum Verwalten der APIs in einer App im integrierten Portal hat sich geändert. Wenn Nutzer eine App verwalten, müssen sie im Abschnitt „APIs“ auf oder (anstelle eines Umschalters) klicken, um den Zugriff auf eine API über die App zu aktivieren bzw. zu deaktivieren.

Aktualisieren Sie gegebenenfalls alle Anleitungen in Ihrem Portal, in denen beschrieben wird, wie APIs auf der Seite „Apps“ verwaltet werden. Weitere Informationen finden Sie unter APIs in Ihrer App 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.

Bekannte Probleme

Eine Liste bekannter Probleme des integrierten Portals finden Sie unter Bekannte Probleme des integrierten Portals.