20.07.27 - Catatan rilis portal terintegrasi Apigee Edge

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

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

Fitur dan peningkatan baru

Bagian ini menjelaskan fitur dan peningkatan baru dalam rilis ini.

Peningkatan aksesibilitas dan responsivitas

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

• Navigasi keyboard: Sekarang Anda dapat menavigasi header dan footer, navigasi samping SmartDocs, daftar Aplikasi, tampilan Aplikasi, dan kartu API menggunakan keyboard.
  
• Pengelolaan fokus: Membuka dengan menu navigasi header dan navigasi samping SmartDocs memindahkan fokus ke <H1> pertama di halaman setelah tindakan navigasi.
• Wilayah aktif: Perubahan pada daftar API yang dihasilkan dari pemfilteran tekstual kini dilaporkan kepada pengguna yang menggunakan pembaca layar.
• Penggunaan heading HTML semantik: Semua teks kini berada dalam tag HTML yang sesuai secara semantik. Struktur heading hierarkis yang sesuai kini digunakan di seluruh portal.
• Penggunaan tunggal <H1>: Setiap halaman kini hanya memiliki satu <H1> sehingga pembaca layar dapat dengan mudah mengidentifikasi deskripsi paling informatif dari konten halaman.
• Kapitalisasi gaya: Penggunaan huruf kapital semua sebagai aksen visual kini diterapkan secara eksklusif dengan CSS, bukan dalam teks sebenarnya.
• Pengurutan DOM yang logis: Tombol tindakan di halaman Buat dan Edit Aplikasi telah dipindahkan ke bawah elemen formulir di DOM sehingga dapat diaktifkan dalam urutan yang logis, setelah interaksi formulir selesai.
• Deskripsi tekstual elemen visual: Penggunaan label, teks alternatif, dan teks tombol ditingkatkan untuk meningkatkan navigasi dengan pembaca layar.
• Kontras warna: Kontras warna telah ditingkatkan untuk memenuhi persyaratan kontras WCAG AA di banyak tempat di 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 tentang error validasi.
• Responsif: Sekarang ada lebar maksimum yang berlaku untuk semua halaman kecuali SmartDocs. Navigasi SmartDocs kini berfungsi di layar berukuran ponsel yang sempit. Halaman Buat dan Edit Aplikasi kini lebih responsif terhadap layar sempit.

Perubahan DOM yang dapat memengaruhi portal Anda

Terutama pertimbangkan jika:

• Panel navigasi (header dan footer) serta heading halaman telah diberi gaya (atau disembunyikan) dengan penggantian CSS: Sekarang ada lebar maksimum untuk konten halaman. Untuk memperluas header halaman dan panel navigasi ke tepi jendela browser, Apigee menata gaya elemen semu :before. Untuk mengetahui informasi selengkapnya, lihat Mengganti warna primer untuk header halaman dan panel navigasi.
• Ada elemen halaman dengan latar belakang yang meluas hingga ke tepi jendela browser (selain gambar latar belakang layar penuh): Lebar maksimum konten halaman telah dibatasi untuk meningkatkan responsivitas, yang dapat membatasi panel lebar penuh sebelumnya dalam halaman kustom. Untuk mengetahui informasi selengkapnya tentang cara menggunakan setelan max-width 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 pada konten tertentu telah berubah. Misalnya: <H1> → <H2> Tinjau daftar perubahan mendetail untuk rilis ini guna memahami konten yang terpengaruh.
• Warna putih atau warna yang 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 link kini lebih mudah diakses. Lihat perubahan di bawah untuk memahami cara interaksinya dengan gaya yang ada.
• Batas bawah 2 px pada area konten kartu tampilan beranda telah diberi gaya atau disembunyikan dengan penggantian CSS: Batas ini telah dipindahkan dari <mat-card-content> ke batas atas pada <mat-card-actions>.

Ringkasan perubahan mendetail

Bagian berikut merangkum perubahan mendetail yang telah diterapkan dalam rilis ini, menurut kategori.

Perubahan di seluruh portal

Perubahan di seluruh portal diringkas di bawah.

• 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 max-width 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 diringkas di bawah.

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

Perubahan gaya link

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

Perubahan halaman 404

Perubahan pada halaman error 404 diringkas di bawah.

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

Halaman API

Perubahan pada halaman API diringkas di bawah, menurut kategori.

• Kartu input penelusuran/filter API:
  • <mat-card-content class="mat-card-content"> kini membungkus judul dan input kartu API penelusuran
  • <H2> kini 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:
  • "No APIs found" sekarang menjadi <H2>, bukan <H1>
  • Penjelasan sekarang adalah <H3>, bukan <H2>
• Daftar kartu API:

  "Tidak ada API yang cocok dengan penelusuran Anda" kini 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> ke <div class="api-doc-card-content-title"></div> segera setelah gambar <div>
  • Judul API sekarang adalah <H2>, bukan <H1>

Daftar Aplikasi:

• Status kosong:
  • "Mulai" sekarang menjadi <H2>, bukan <H1>
  • Panduan status kosong kini adalah <H3>, bukan <H2>
• Daftar:
  • "Aplikasi Saya" sekarang menjadi <H2>, bukan <H1>
  • <mat-row> sekarang diubah bentuknya dalam <a>

Membuat dan Mengedit Halaman aplikasi

Perubahan pada halaman Buat dan Edit Aplikasi diringkas di bawah.

• <div class="app-buttons"> telah dipindahkan ke bagian akhir <form> dan digantikan oleh <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 menggunakan <H2>, bukan <div>
• Semua penggunaan class .app-layout-section-content diubah menjadi .details-layout-section-content
• Daftar API bukan lagi daftar kartu API dengan tombol aktif/nonaktif (mirip dengan daftar API). Sebaliknya, ini adalah tabel API
• Input URL Callback telah dipindahkan ke bagian baru
• Tombol simpan kini menggunakan gaya mat-raised-button 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 menyetel lebar kolom tabel
• Semua tag <a> dalam tabel kini menggunakan <button

Daftar tim

Perubahan pada daftar Tim diringkas di bawah.

• Status kosong:
  • "Mulai" sekarang menjadi <H2>, bukan <H1>
  • "Buat tim untuk mengelola kepemilikan aplikasi bersama" kini <H3>, bukan <H2>
• Daftar:

  Judul "Tim" sekarang adalah <H2>, bukan <H1>

Membuat dan Mengedit Halaman tim

Perubahan pada halaman Buat dan Edit Tim diringkas di bawah.

• Di <form>, class .teams-form telah digantikan oleh .details-form
• <div class="teams-buttons"> telah dipindahkan ke akhir <form> dan digantikan oleh <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"> ditambahkan di sekitar <table class="team-apps">

SmartDocs

Perubahan pada antarmuka SmartDocs diringkas di bawah.

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

Menambahkan peningkatan aksesibilitas ke halaman beranda yang ada

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

1. Hapus href="" dari container <mat-card>.
2. Gunakan <H2>, bukan <H1> untuk judul kartu dalam <mat-card-header>.
3. Di dalam heading kartu <h2>, bungkus teks dalam <a class="navigable-content" href="href-name"> dan tetapkan 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 kustom untuk menu navigasi dan header halaman menggunakan editor tema lanjutan, mirip dengan berikut 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
  }
}

Prosedur update untuk mengelola API aplikasi

Interaksi pengguna untuk mengelola API di aplikasi pada portal terintegrasi telah berubah. Secara khusus, saat mengelola aplikasi, di bagian API, pengguna harus mengklik atau (bukan tombol) untuk mengaktifkan atau menonaktifkan akses ke API dari aplikasi.

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

Bug yang diperbaiki

Bug berikut telah diperbaiki dalam rilis ini. Daftar ini terutama ditujukan bagi pengguna yang memeriksa apakah tiket dukungan mereka telah diselesaikan. Fitur ini tidak dirancang untuk memberikan informasi mendetail bagi semua pengguna.

Masalah umum

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