20.07.27 – Versionshinweise zum integrierten Portal von Apigee Edge

<ph type="x-smartling-placeholder"></ph> Sie sehen die Dokumentation zu Apigee Edge.
Gehen Sie zur Apigee X-Dokumentation. Weitere Informationen

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

Neue Features und Verbesserungen

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

Verbesserte Bedienungshilfen und Reaktionsschnelligkeit

Im Folgenden sind die Verbesserungen der Barrierefreiheit und der Reaktionsschnelligkeit aufgeführt, die in dieser Version implementiert wurden.

• Tastaturnavigation: Es ist jetzt möglich, mit der Tastatur in den Navigationsleisten der Kopf- und Fußzeile, der seitlichen Navigationsleiste von SmartDocs, der App-Liste, der App-Ansicht und den API-Karten zu navigieren.
  
• Fokusverwaltung : Bei der Navigation mit der Navigationsleiste in der Kopfzeile und der seitlichen Navigationsleiste von SmartDocs wird der Fokus nach einer Navigationsaktion auf das erste <H1> der Seite verschoben.
• Live-Regionen: Änderungen an der Liste der APIs, die sich aus der Textfilterung ergeben, werden jetzt Nutzern gemeldet, die einen Screenreader verwenden.
• Semantische Verwendung von HTML-Überschriften:Der gesamte Text ist jetzt in semantisch geeigneten HTML-Tags enthalten. Im gesamten Portal wird nun eine entsprechend hierarchische Überschriftenstruktur verwendet.
• Einzelne Verwendung von <H1>: Jede Seite hat jetzt nur noch eine einzige <H1>, sodass Screenreader problemlos die informativste Beschreibung des Seiteninhalts erkennen können.
• Stilistische Großschreibung:Die Verwendung von Großbuchstaben als visueller Akzent wird jetzt ausschließlich mit CSS und nicht mehr im eigentlichen Text angewendet.
• Logische Reihenfolge des DOMs:Die Aktionsschaltflächen auf den Seiten zum Erstellen und Bearbeiten von Apps wurden unter die Formularelemente im DOM verschoben, damit sie nach Abschluss der Formularinteraktion in logischer Reihenfolge aktiviert werden können.
• Textbasierte Beschreibungen visueller Elemente:Beschriftungen, Alt-Text und Schaltflächentext werden verbessert und die Navigation mit einem Screenreader wird verbessert.
• Farbkontrast:Der Farbkontrast wurde erhöht, um die Kontrastanforderungen der WCAG AA an vielen Stellen im Produkt zu erfüllen. Die API-Titel in der Liste der APIs 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. Validierte Formularfelder auf den Seiten zum Erstellen und Bearbeiten von Apps enthalten jetzt Textbeschreibungen des Validierungsfehlers.
• Responsivität: Es gibt jetzt eine maximale Breite, die für alle Seiten außer SmartDocs gilt. Die SmartDocs-Navigation funktioniert jetzt auch auf schmalen Smartphone-Bildschirmen. Die Seiten zum Erstellen und Bearbeiten von Apps reagieren jetzt besser auf schmale Displays.

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

Berücksichtige insbesondere, wenn:

• Die Navigationsleisten (Kopf- und Fußzeile) sowie die Seitenüberschriften wurden mit CSS-Überschreibungen gestaltet (oder ausgeblendet): Es gibt nun eine maximale Breite für Seiteninhalte. Um die Navigationsleisten und Seiten-Header 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 sich bis zum Rand des Browserfensters erstrecken (mit Ausnahme des Hintergrundbilds im Vollbildmodus): Die maximale Breite des Seiteninhalts wurde begrenzt, um das Responsive Webdesign zu verbessern. Dadurch kann es passieren, dass bisher Steuerfelder mit voller Breite auf benutzerdefinierten Seiten eingeschränkt wurden. Weitere Informationen zur Verwendung der neuen „max-width“-Einstellungen finden Sie unter Steuerfeld für Vollbild auf einer Portalseite erstellen.
• Bestimmte HTML-Überschriftenebenen wurden mithilfe von CSS-Selektoren zur Änderung von Textstilen ausgerichtet: Die auf bestimmte Inhalte angewendete Überschriftenebene wurde geändert. Beispiel: <H1> → <H2> Anhand der detaillierten Liste mit Änderungen für diesen Release kannst du genau nachvollziehen, welche Inhalte betroffen sind.
• Als „Sekundärfarbe“ wird ein Weiß oder eine sehr helle Farbe ausgewählt. im Portal-Designeditor:Die zweite 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 sie dann bei Bedarf in bestimmten Situationen durch eine benutzerdefinierte Syntax zu überschreiben.
• Neuer Stil für In-Text-Links: Der Stil von Links ist jetzt barrierefreier. Unten sehen Sie die Änderungen, die Aufschluss darüber geben, wie sich dies auf Ihre vorhandenen Stile auswirkt.
• 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> an einen oberen Rand auf <mat-card-actions> verschoben.

Zusammenfassung der detaillierten Änderungen

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

Änderungen, die das gesamte Portal betreffen

Eine Zusammenfassung der portalweiten Änderungen finden Sie unten.

• Die folgenden Variablen werden nicht mehr verwendet: <ph type="x-smartling-placeholder">
  </ph>
  • $layout-horizontal-padding
  • $layout-main-content-horiz-padding
  • $layout-header-horiz-padding
  • $layout-context-bar-horiz-padding
• Es gibt neue Variablen, die die Kontrolle über die maximale Breite für den Hauptinhaltsbereich und den minimalen horizontalen Abstand für den Hauptinhaltsbereich ermöglichen: <ph type="x-smartling-placeholder">
  </ph>
  • $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 für Bildschirmgrößen von Computern und Mobilgeräten in ein <a> eingebettet.
• Die Drop-down-Schaltfläche für Nutzer ist jetzt <button> statt <a>.

Änderungen am Linkstil

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

404-Seitenänderungen

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

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

Seite "APIs"

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

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

  „Es wurden keine APIs gefunden, die Ihrer Suchanfrage entsprechen“ ist jetzt <H2> statt <H1>

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

App-Liste:

• Leerer Zustand: <ph type="x-smartling-placeholder">
  </ph>
  • „Jetzt starten“ ist jetzt <H2> statt <H1>
  • Die Anleitung für leeren Zustand ist jetzt <H3> statt <H2>
• Liste: <ph type="x-smartling-placeholder">
  </ph>
  • „Meine Apps“ ist jetzt <H2> statt <H1>
  • <mat-row> ist jetzt in <a> verzerrt

App-Seiten erstellen und bearbeiten

Im Folgenden sind die Änderungen an den Seiten zum Erstellen und Bearbeiten von Apps zusammengefasst.

• <div class="app-buttons"> wurde an das Ende von <form> verschoben und ersetzt durch <div class="form-buttons-sticky-container">
• Die gesamte Nutzung des Kurses „.app-layout-section“ wurde zu „.details-layout-section“ geändert
• Die gesamte Nutzung des Kurses „.app-layout-section-title“ wurde zu „.details-layout-section-title“ geändert
• Alle Abschnittsüberschriften sind jetzt <H2> statt <div>
• Die gesamte Nutzung des Kurses „.app-layout-section-content“ wurde zu „.details-layout-section-content“ geändert
• Die Liste der APIs entspricht nicht mehr der Liste der API-Karten mit Ein-/Aus-Schalter (ä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 die Schaltflächen mit mattem Rand und der Primärfarbhintergrund verwendet.
• Tabellen sind jetzt in einer <div> mit der Klasse .app-table-wrapper umschlossen
• Für Tabellenköpfe wird jetzt der <thead>-Wrapper verwendet
• Für den Tabellentext wird jetzt der <tbody>-Wrapper verwendet
• [style.width] wird nicht mehr zum Festlegen der Tabellenspaltenbreite verwendet
• Alle <a>-Tags in der Tabelle verwenden jetzt stattdessen <button

Teamliste

Die Änderungen an der Teamliste sind unten zusammengefasst.

• Leerer Zustand: <ph type="x-smartling-placeholder">
  </ph>
  • „Jetzt starten“ ist jetzt <H2> statt <H1>
  • „Team zum Verwalten der gemeinsamen App-Inhaberschaft erstellen“ ist jetzt <H3> statt <H2>
• Liste:

  „Teams“ Titel ist jetzt „<H2>“ statt „<H1>“

Teamseiten erstellen und bearbeiten

Im Folgenden finden Sie eine Zusammenfassung der Änderungen, die Sie auf den Seiten "Team erstellen und bearbeiten" vorgenommen haben.

• 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 des Kurses „.teams-layout-section“ wurde zu „.details-layout-section“ geändert
• Die gesamte Nutzung des Kurses „.teams-layout-section-title“ wurde zu „.details-layout-section-title“ geändert
• Die gesamte Nutzung des Kurses „.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

Im Folgenden sind die Änderungen an der SmartDocs-Benutzeroberfläche zusammengefasst.

• Seitliche Navigationsleiste: <ph type="x-smartling-placeholder">
  </ph>
  • Die seitliche Navigationsleiste wurde komplett neu geschrieben und enthält jetzt auch kantige Material-Komponenten.
  • Überschriften der seitlichen Navigationsleiste sind jetzt <H2> statt <div>
  • Für Navigationselemente wird jetzt die Standardtextfarbe des Portals anstelle der "sekundären Farbe" des Editors für Portaldesign verwendet.
  • Für ausgewählte, fokussierte Elemente und Elemente, die den Mauszeiger in der seitlichen Navigationsleiste befinden, werden jetzt dunkle und helle Varianten des Portal-Designeditors verwendet „sekundäre Farbe“ für den Text bzw. für den Hintergrund.
• Inhalt:
  • Viele Zwischenüberschriften wie z. B. „Pfadparameter“ und "Header-Parameter" sind jetzt <H2> statt <H3>
  • Schemaentitäten auf der Übersichtsseite sind jetzt <H3>=> anstelle von <H2>

Verbesserungen für die Barrierefreiheit einer bestehenden Startseite hinzufügen

Wenn Sie ein Portal haben, das geschlossen wird, müssen Sie die Startseite bearbeiten, um von den verbesserten Bedienungshilfen für navigierbare Karten zu profitieren. Diese werden im Folgenden beschrieben:

1. Entfernen Sie href="" aus dem <mat-card>-Container.
2. Verwende <H2> statt <H1> für die Kartenüberschrift innerhalb von <mat-card-header>.
3. Fügen Sie in der Kartenüberschrift <h2> den Text in <a class="navigable-content" href="href-name"> ein und legen Sie 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 Seitenüberschriften überschreiben

Navigationsleisten und Seiten-Header erweitern am Rand des Browserfensters mit dem erweiterten Designeditor einen benutzerdefinierten Stil für die Navigationsleisten und für die Seitenüberschriften hinzufügen. Dieser ähnelt dem folgenden Beispiel für die Navigationsleiste der Kopfzeile:

// 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 zum Verwalten der APIs in einer App im integrierten Portal hat sich geändert. Insbesondere müssen Nutzer bei der Verwaltung einer App im Bereich „APIs“ anstelle einer Ein/Aus-Schaltfläche auf oder klicken, um den Zugriff auf eine API über die App zu aktivieren bzw. zu deaktivieren.

Aktualisieren Sie gegebenenfalls auf Ihrem Portal alle Verfahren, in denen die Verwaltung von APIs auf der Seite „Apps“ beschrieben wird. Weitere Informationen finden Sie unter APIs in der 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.

Fehler-ID	Komponentenname	Beschreibung
161269688	Integriertes Portal	Asset-Thumbnails werden in Apigee Hybrid falsch gerendert Thumbnails werden jetzt auf der Seite „Assets“ korrekt angezeigt.
161295683	Integriertes Portal	Serverfehler, ohne dass eine Beschreibung für die Anwendung festgelegt ist Die App kann jetzt erstellt werden, wenn für eine App keine Beschreibung (optionales Feld) definiert ist.
160898967	Integriertes Portal	Landingpage für Portal funktioniert nicht richtig Die Landingpage des Portals ist jetzt scrollbar.
160613314, 159197760, 158643196, 158069283, 158069066, 140154942	Integriertes Portal	Verschiedene Sicherheitsupdates
158593496	Integriertes Portal	Entwickler-App kann in V1-Portalen nicht erstellt werden Ein Problem wurde behoben, das das Erstellen 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, das Portalnutzer daran hinderte, auf der Seite „APIs“ eine Callback-URL hinzuzufügen oder zu ändern.
157902256	Integriertes Portal	Durch Veröffentlichung kann die Aktualisierung eines Seitennamens auf der Seite „Seitendetails“ überschrieben werden Es wurde ein Problem behoben, durch das eine Aktualisierung des Seitennamens überschrieben wurde, als Sie das Portal veröffentlicht hatten (aufgrund einer Race-Bedingung).
138993728	Integriertes Portal	Sortieren und Suchen von E‐Mails aus Entwicklerprogrammen funktioniert nicht Das Suchen und Sortieren von Privatnutzerkonten funktioniert jetzt wie erwartet.

Bekannte Probleme

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