20.07.27 - Catatan rilis portal terintegrasi Apigee Edge

Anda sedang melihat dokumentasi Apigee Edge.
Buka Dokumentasi Apigee X. info

Pada hari Senin, 27 Juli, kami akan mulai merilis portal terintegrasi Apigee Edge versi baru.

Fitur dan peningkatan baru

Bagian ini menjelaskan fitur dan peningkatan baru dalam rilis ini.

Peningkatan aksesibilitas dan responsivitas

Berikut daftar peningkatan aksesibilitas dan responsivitas yang diterapkan untuk rilis ini.

  • Navigasi keyboard: Kini Anda dapat membuka menu navigasi header dan footer, navigasi samping SmartDocs, Daftar aplikasi, Tampilan aplikasi, dan kartu API menggunakan keyboard.
  • Pengelolaan fokus: Menavigasi dengan menu navigasi header dan navigasi samping SmartDocs akan memindahkan fokus ke <H1> pertama di halaman setelah tindakan navigasi.
  • Live region: Perubahan pada daftar API yang dihasilkan dari pemfilteran tekstual kini dilaporkan kepada pengguna yang menggunakan pembaca layar.
  • Penggunaan semantik judul HTML: Semua teks kini terdapat di tag HTML yang sesuai secara semantik. Struktur {i>heading<i} dengan hierarki yang sesuai kini digunakan di seluruh portal.
  • Penggunaan tunggal <H1>: Setiap halaman sekarang hanya memiliki satu <H1> sehingga pembaca layar dapat dengan mudah mengidentifikasi deskripsi konten halaman yang paling informatif.
  • Kapitalisasi gaya: Penggunaan huruf besar semua sebagai aksen visual kini diterapkan secara eksklusif dengan CSS, bukan di teks yang sebenarnya.
  • Pengurutan logis DOM: Tombol tindakan di halaman Buat dan Edit Aplikasi telah dipindahkan ke bawah elemen formulir di DOM, sehingga dapat diaktifkan dalam urutan logis, saat interaksi formulir selesai.
  • Deskripsi tekstual dari elemen visual: Terdapat peningkatan penggunaan label, teks alternatif, dan teks tombol yang semuanya meningkatkan navigasi dengan pembaca layar.
  • Kontras warna: Kontras warna telah ditingkatkan untuk memenuhi persyaratan kontras AA WCAG di banyak tempat pada seluruh produk. Judul API dalam daftar API telah dipindahkan ke bawah gambar untuk menghindari kemungkinan kontras warna yang tidak memadai.
  • Validasi formulir: Di halaman Buat dan Edit Aplikasi, tombol pengiriman formulir tidak lagi dinonaktifkan dan dapat diaktifkan untuk memvalidasi formulir. Kolom formulir yang divalidasi di halaman Buat dan Edit Aplikasi kini menyertakan deskripsi tekstual error validasi.
  • Kecepatan respons: Kini ada lebar maksimum yang berlaku untuk semua halaman, kecuali SmartDokumen. Navigasi SmartDocs kini berfungsi pada layar sempit berukuran ponsel. Halaman Buat dan Edit Aplikasi kini lebih responsif terhadap layar yang sempit.

Perubahan DOM yang dapat memengaruhi portal Anda

Pertimbangkan terutama jika:

  • Menu navigasi (header dan footer) dan judul halaman telah diberi gaya (atau disembunyikan) dengan penggantian CSS: Sekarang ada lebar maksimum untuk konten halaman. Untuk memperluas menu navigasi dan header halaman ke tepi jendela browser, Apigee memberi gaya pseudo element :before. Untuk mengetahui informasi selengkapnya, lihat Mengganti warna primer untuk menu navigasi dan header halaman.
  • Ada elemen halaman dengan latar belakang yang memanjang hingga tepi jendela browser (selain gambar latar layar penuh): Lebar maksimum konten halaman telah dibatasi untuk meningkatkan responsivitas, yang dapat membatasi panel yang sebelumnya memiliki lebar penuh dalam halaman kustom. Untuk informasi selengkapnya tentang penggunaan setelan lebar maksimum yang baru, lihat Membuat panel lebar penuh di halaman portal.
  • Tingkat judul HTML tertentu telah ditargetkan dengan pemilih CSS untuk mengubah gaya teks: Tingkat judul yang diterapkan ke konten tertentu telah berubah. Misalnya: <H1> → <H2> Tinjau daftar perubahan mendetail untuk rilis ini untuk memahami dengan tepat konten apa saja yang terpengaruh.
  • Warna putih atau sangat terang dipilih sebagai "warna sekunder" di editor tema portal: Warna sekunder digunakan untuk elemen navigasi yang akan sulit dilihat dengan latar belakang putih. Sebaiknya pilih warna sekunder yang dapat diakses, lalu ganti jika perlu dengan scss kustom dalam situasi tertentu.
  • Link dalam teks telah diberi gaya: Gaya visual link kini lebih mudah diakses. Lihat perubahan di bawah ini untuk memahami cara interaksinya dengan gaya visual Anda yang sudah ada.
  • Batas bawah 2 px di area konten kartu tampilan home telah ditata atau disembunyikan dengan penggantian CSS: Batas ini telah dipindahkan dari <mat-card-content> ke bagian atas batas di <mat-card-actions>.

Ringkasan perubahan mendetail

Bagian berikut meringkas perubahan mendetail yang telah diterapkan dalam rilis ini, berdasarkan kategori.

Perubahan di seluruh portal

Perubahan di seluruh portal dirangkum di bawah ini.

  • Variabel berikut tidak lagi digunakan:
    • $layout-horizontal-padding
    • $layout-main-content-horiz-padding
    • $layout-header-horiz-padding
    • $layout-context-bar-horiz-padding
  • Ada variabel baru yang memberikan kontrol atas lebar maksimum untuk area konten utama dan padding horizontal minimum untuk area konten utama:
    • $layout-main-content-max-width
    • $layout-horizontal-min-padding

Perubahan menu navigasi utama

Perubahan pada menu navigasi utama dirangkum di bawah ini.

  • Logo <img> kini digabungkan dalam <a> untuk ukuran layar desktop dan seluler
  • Tombol drop-down pengguna sekarang menjadi <button>, bukan <a>

Link standar <a> dalam teks kini memiliki garis bawah secara default dan warna latar belakang (berdasarkan setelan tema "warna sekunder") saat kursor diarahkan

Perubahan halaman 404

Perubahan pada halaman 404 dirangkum di bawah ini.

  • "Login sekarang" sekarang menjadi <H2>, bukan <H1>
  • Teks penjelasan sekarang menjadi <H2>, bukan <H1>

Halaman API

Perubahan pada halaman API dirangkum di bawah ini, menurut kategori.

  • Kartu input/penelusuran API:
    • <mat-card-content class="mat-card-content"> kini menggabungkan judul dan input kartu API penelusuran
    • <H2> sekarang menggunakan class="mat-subheading-1", bukan class="api-doc-filter-title"
    • <mat-form-field> sekarang menggunakan appearance="outline"
    • Ikon penelusuran telah ditambahkan ke <mat-form-field> sebelum input: "<mat-icon matPrefix>search</mat-icon>"
    • Label aria dan referensi kontrol telah ditambahkan ke input
  • Pesan daftar API kosong:
    • "API tidak ditemukan" sekarang menjadi <H2>, bukan <H1>
    • Penjelasannya sekarang adalah <H3>, bukan <H2>
  • Daftar kartu API:

    "Tidak ada API yang cocok dengan penelusuran Anda" sekarang menjadi <H2>, bukan <H1>

  • Kartu API:
    • >div class="api-doc-card-content-image-gradient"></div> telah dihapus
    • Judul API telah dipindahkan dari gambar yang berisi <div> dan ke <div class="api-doc-card-content-title"></div>, segera setelah gambar <div>
    • Judul API sekarang menjadi <H2>, bukan <H1>

Daftar Aplikasi:

  • Status kosong:
    • "Memulai" sekarang menjadi <H2>, bukan <H1>
    • Panduan status kosong sekarang adalah <H3>, bukan <H2>
  • {i>List<i}:
    • "Aplikasi Saya" sekarang menjadi <H2>, bukan <H1>
    • <mat-row> kini dibelokkan dalam <a>

Membuat dan Mengedit halaman Aplikasi

Perubahan pada halaman Buat dan Edit Aplikasi dirangkum di bawah ini.

  • <div class="app-buttons"> telah dipindahkan ke akhir <form> dan diganti dengan <div class="form-buttons-sticky-container">
  • Semua penggunaan class .app-layout-section diubah menjadi .details-layout-section
  • Semua penggunaan class .app-layout-section-title diubah menjadi .details-layout-section-title
  • Semua judul bagian kini menjadi <H2>, bukan <div>
  • Semua penggunaan class .app-layout-section-content diubah menjadi .details-layout-section-content
  • Daftar API tidak lagi merupakan daftar kartu API dengan tombol beralih (mirip dengan daftar API). Sebagai gantinya, ini adalah tabel API
  • Input URL Panggilan Balik telah dipindahkan ke bagian baru
  • Tombol simpan kini menggunakan gaya tombol matras dan latar belakang warna primer
  • Tabel kini digabungkan dalam <div> dengan class .app-table-wrapper
  • Header tabel kini menggunakan wrapper <thead>
  • Isi tabel kini menggunakan wrapper <tbody>
  • [style.width] tidak lagi digunakan untuk menetapkan lebar kolom tabel
  • Semua tag <a> dalam tabel sekarang menggunakan <button sebagai gantinya

Daftar tim

Perubahan pada daftar Tim dirangkum di bawah ini.

  • Status kosong:
    • "Mulai" sekarang menjadi <H2>, bukan <H1>
    • "Buat tim untuk mengelola kepemilikan aplikasi bersama" sekarang menjadi <H3>, bukan <H2>
  • {i>List<i}:

    "Tim" Judul kini menjadi <H2>, bukan <H1>

Membuat dan Mengedit halaman Tim

Perubahan pada halaman Buat dan Edit Tim dirangkum di bawah ini.

  • Pada <form>, class .teams-form telah diganti dengan .details-form
  • <div class="teams-buttons"> telah dipindahkan ke akhir <form> dan diganti dengan <div class="form-buttons-sticky-container">
  • Semua penggunaan class .teams-layout-section diubah menjadi .details-layout-section
  • Semua penggunaan class .teams-layout-section-title diubah menjadi .details-layout-section-title
  • Semua penggunaan class .teams-layout-section-content diubah menjadi .details-layout-section-content
  • <div class="team-apps-container"> telah ditambahkan di sekitar <table class="team-apps">

SmartDocs

Perubahan pada antarmuka SmartDocs dirangkum di bawah.

  • Navigasi samping:
    • Navigasi samping telah sepenuhnya ditulis ulang dengan komponen material sudut
    • Judul navigasi samping sekarang <H2>, bukan <div>
    • Item navigasi kini menggunakan warna teks default portal, bukan "warna sekunder" editor tema portal
    • Item yang dipilih, difokuskan, dan diarahkan di navigasi samping kini menggunakan variasi gelap dan terang dari editor tema portal "warna sekunder" untuk teks dan latar belakang
  • Materi:
    • Banyak subjudul seperti "Parameter Jalur" dan "Parameter Header" sekarang menjadi <H2>, bukan <H3>
    • Entitas skema di halaman ringkasan kini adalah <H3>=>, bukan <H2>

Menambahkan perbaikan aksesibilitas ke halaman beranda yang ada

Jika memiliki portal keluar, Anda harus mengedit halaman beranda untuk memanfaatkan peningkatan aksesibilitas baru untuk kartu yang dapat dinavigasi, seperti yang dijelaskan di bawah ini:

  1. Hapus href="" dari penampung <mat-card>.
  2. Gunakan <H2>, bukan <H1>, untuk judul kartu dalam <mat-card-header>.
  3. Di dalam judul kartu <h2>, gabungkan teks dalam <a class="navigable-content" href="href-name"> dan setel href-name ke nilai yang sesuai untuk navigasi kartu.

Atau, Anda dapat menggunakan template kartu berikut:


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

Mengganti warna primer untuk menu navigasi dan header halaman

Untuk memperluas menu navigasi dan header halaman ke tepi jendela browser, tambahkan gaya visual kustom untuk menu navigasi dan header halaman menggunakan editor tema lanjutan, mirip dengan yang berikut ini untuk menu navigasi header:


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

Memperbarui prosedur pengelolaan API untuk aplikasi

Interaksi pengguna untuk mengelola API di aplikasi pada portal terintegrasi telah berubah. Khususnya, saat mengelola aplikasi, di bagian API, pengguna harus mengklik ikon aktifkan atau ikon nonaktifkan (bukan tombol beralih) untuk mengaktifkan atau menonaktifkan akses masing-masing ke API dari aplikasi.

Perbarui prosedur apa pun di portal Anda yang menjelaskan cara mengelola API di halaman aplikasi, jika berlaku. Untuk informasi selengkapnya, lihat Mengelola API di aplikasi Anda.

Bug diperbaiki

Bug berikut telah diperbaiki dalam rilis ini. Daftar ini terutama ditujukan bagi pengguna yang ingin memeriksa jika tiket dukungan telah diperbaiki. Ini tidak dirancang untuk memberikan informasi terperinci tentang semua pengguna.

ID Masalah Nama Komponen Deskripsi
161269688 Portal Terintegrasi

Thumbnail aset dirender dengan tidak benar di Apigee Hybrid

Thumbnail kini ditampilkan dengan benar di halaman Aset.

161295683 Portal Terintegrasi

Server gagal tanpa deskripsi yang ditetapkan untuk aplikasi

Pembuatan aplikasi kini akan berhasil jika deskripsi (kolom opsional) tidak ditentukan untuk aplikasi.

160898967 Portal Terintegrasi

Halaman landing untuk portal tidak di-scroll dengan benar

Halaman landing portal kini dapat di-scroll.

160613314,
159197760,
158643196,
158069283,
158069066,
140154942 		Portal Terintegrasi

Perbaikan keamanan lainnya
158593496 Portal Terintegrasi

Pembuatan aplikasi developer gagal di portal V1

Masalah yang mencegah pembuatan aplikasi developer di portal V1 telah diperbaiki.

158318079 Portal Terintegrasi

Menambahkan atau mengubah URL callback di portal developer tidak berfungsi

Masalah yang mencegah pengguna portal menambahkan atau mengubah URL callback di halaman API telah diperbaiki.

157902256 Portal Terintegrasi

Publikasi dapat menggantikan pembaruan nama halaman di halaman detail Halaman

Masalah yang menyebabkan pembaruan nama halaman harus diganti saat Anda memublikasikan portal (disebabkan oleh kondisi race) telah diperbaiki.

138993728 Portal Terintegrasi

Penyortiran dan penelusuran email program developer tidak berfungsi

Penelusuran dan pengurutan akun pengguna konsumen kini berfungsi seperti yang diharapkan.

Masalah umum

Untuk daftar masalah umum pada portal terintegrasi, lihat Masalah umum pada portal terintegrasi.