20.07.27 - Apigee Edge के साथ इंटिग्रेट किए गए पोर्टल के रिलीज़ नोट

आपको Apigee Edge का दस्तावेज़ दिख रहा है.
Apigee X के दस्तावेज़ पर जाएं. जानकारी

हम 27 जुलाई, सोमवार से Apigee Edge के इंटिग्रेटेड पोर्टल का नया वर्शन रिलीज़ करना शुरू करेंगे.

नई सुविधाएं और बेहतर टूल

इस सेक्शन में, इस रिलीज़ में जोड़ी गई नई सुविधाओं और किए गए सुधारों के बारे में बताया गया है.

सुलभता और जवाब देने की क्षमता में सुधार

यहां ऐक्सेसिबिलिटी और रिस्पॉन्सिवनेस से जुड़े सुधारों की सूची दी गई है, जिन्हें इस रिलीज़ के लिए लागू किया गया है.

• कीबोर्ड से नेविगेट करने की सुविधा: अब कीबोर्ड का इस्तेमाल करके, हेडर और फ़ुटर नेविगेशन बार, SmartDocs के साइड नेविगेशन, ऐप्लिकेशन की सूची, ऐप्लिकेशन व्यू, और एपीआई कार्ड पर नेविगेट किया जा सकता है.
  
• फ़ोकस मैनेज करना: हेडर नेविगेशन बार और SmartDocs के साइड नेविगेशन का इस्तेमाल करके नेविगेट करने पर, फ़ोकस को नेविगेशन ऐक्शन के बाद पेज पर मौजूद पहले <H1> पर ले जाया जाता है.
• लाइव रीजन: टेक्स्ट फ़िल्टर करने की वजह से, एपीआई की सूची में हुए बदलावों के बारे में अब स्क्रीन रीडर का इस्तेमाल करने वाले लोगों को सूचना दी जाती है.
• एचटीएमएल हेडिंग का सिमेंटिक इस्तेमाल: अब सभी टेक्स्ट को सिमेंटिक तौर पर सही एचटीएमएल टैग में शामिल किया गया है. अब पूरे पोर्टल में, हेडिंग के स्ट्रक्चर का सही तरीके से इस्तेमाल किया गया है.
• <H1> का एक बार इस्तेमाल: अब हर पेज पर सिर्फ़ एक <H1> होता है, ताकि स्क्रीन रीडर पेज के कॉन्टेंट के बारे में सबसे ज़्यादा जानकारी देने वाले ब्यौरे की आसानी से पहचान कर सकें.
• स्टाइल के हिसाब से कैपिटल लेटर का इस्तेमाल करना: अब विज़ुअल ऐक्सेंट के तौर पर सभी कैपिटल लेटर का इस्तेमाल, सिर्फ़ सीएसएस के साथ किया जाता है. इसे असल टेक्स्ट में इस्तेमाल नहीं किया जाता.
• DOM का लॉजिकल क्रम: ऐप्लिकेशन बनाने और उसमें बदलाव करने वाले पेजों पर मौजूद ऐक्शन बटन को DOM में फ़ॉर्म एलिमेंट के नीचे ले जाया गया है, ताकि फ़ॉर्म के साथ इंटरैक्ट करने के बाद, उन्हें लॉजिकल क्रम में चालू किया जा सके.
• विज़ुअल एलिमेंट के बारे में टेक्स्ट के ज़रिए जानकारी देना: इसमें लेबल, वैकल्पिक लेख, और बटन के टेक्स्ट का बेहतर तरीके से इस्तेमाल किया गया है. इससे स्क्रीन रीडर की मदद से नेविगेट करना आसान हो जाता है.
• कलर कंट्रास्ट: प्रॉडक्ट में कई जगहों पर, WCAG AA कंट्रास्ट की ज़रूरी शर्तों को पूरा करने के लिए, कलर कंट्रास्ट को बढ़ाया गया है. एपीआई की सूची में मौजूद एपीआई के टाइटल को इमेज के नीचे ले जाया गया है, ताकि रंग के कंट्रास्ट से जुड़ी संभावित समस्या से बचा जा सके.
• फ़ॉर्म की पुष्टि करना: 'ऐप्लिकेशन बनाएं' और 'ऐप्लिकेशन में बदलाव करें' पेजों पर, फ़ॉर्म सबमिट करने वाले बटन अब बंद नहीं किए जाते. फ़ॉर्म की पुष्टि करने के लिए, इन्हें चालू किया जा सकता है. 'ऐप्लिकेशन बनाएं और उसमें बदलाव करें' पेजों पर, पुष्टि किए गए फ़ॉर्म फ़ील्ड में अब पुष्टि से जुड़ी गड़बड़ी की जानकारी देने वाला टेक्स्ट भी शामिल है.
• स्क्रीन के हिसाब से अपने-आप अडजस्ट होने की सुविधा: अब ज़्यादा से ज़्यादा चौड़ाई तय की गई है. यह चौड़ाई, SmartDocs को छोड़कर सभी पेजों पर लागू होती है. SmartDocs नेविगेशन की सुविधा अब फ़ोन के साइज़ वाली छोटी स्क्रीन पर भी काम करती है. 'ऐप्लिकेशन बनाएं' और 'ऐप्लिकेशन में बदलाव करें' पेजों को अब छोटी स्क्रीन पर भी आसानी से देखा जा सकता है.

डीओएम में हुए ऐसे बदलाव जिनसे आपके पोर्टल पर असर पड़ सकता है

खास तौर पर, इन बातों का ध्यान रखें:

• सीएसएस ओवरराइड का इस्तेमाल करके, नेविगेशन बार (हेडर और फ़ुटर) और पेज हेडिंग को स्टाइल किया गया है या छिपाया गया है: अब पेज के कॉन्टेंट की ज़्यादा से ज़्यादा चौड़ाई तय की गई है. नेविगेशन बार और पेज हेडर को ब्राउज़र विंडो के किनारे तक बढ़ाने के लिए, Apigee ने :before स्यूडो एलिमेंट को स्टाइल किया है. ज़्यादा जानकारी के लिए, नेविगेशन बार और पेज हेडर के लिए प्राइमरी कलर बदलना लेख पढ़ें.
• ऐसे पेज एलिमेंट मौजूद हैं जिनके बैकग्राउंड, ब्राउज़र विंडो के किनारे तक फैले हुए हैं. हालांकि, इसमें फ़ुल-स्क्रीन बैकग्राउंड इमेज शामिल नहीं है: रिस्पॉन्सिवनेस को बेहतर बनाने के लिए, पेज के कॉन्टेंट की ज़्यादा से ज़्यादा चौड़ाई को सीमित कर दिया गया है. इससे कस्टम पेजों में मौजूद, पूरी चौड़ाई वाले पैनल पर असर पड़ सकता है. चौड़ाई की नई सेटिंग इस्तेमाल करने के बारे में ज़्यादा जानने के लिए, पोर्टल पेज में फ़ुल-विड्थ पैनल बनाना लेख पढ़ें.
• टेक्स्ट के स्टाइल में बदलाव करने के लिए, सीएसएस सिलेक्टर की मदद से एचटीएमएल हेडिंग के कुछ लेवल को टारगेट किया गया है: कुछ कॉन्टेंट पर लागू किया गया हेडिंग लेवल बदल गया है. उदाहरण के लिए: <H1> → <H2> इस रिलीज़ के लिए, बदलावों की पूरी सूची देखें. इससे आपको यह समझने में मदद मिलेगी कि किस कॉन्टेंट पर असर पड़ा है.
• पोर्टल थीम एडिटर में, "सेकंडरी कलर" के तौर पर सफ़ेद या बहुत हल्का रंग चुना गया है: सेकंडरी कलर का इस्तेमाल नेविगेशन एलिमेंट के लिए किया जाता है. ये एलिमेंट, सफ़ेद बैकग्राउंड पर साफ़ तौर पर नहीं दिखेंगे. हमारा सुझाव है कि आप कोई सुलभ सेकंडरी रंग चुनें. इसके बाद, अगर ज़रूरी हो, तो खास स्थितियों में कस्टम scss का इस्तेमाल करके इसे बदलें.
• टेक्स्ट में मौजूद लिंक को स्टाइल किया गया है: अब लिंक को स्टाइल करना ज़्यादा आसान हो गया है. बदलावों को यहां देखें, ताकि आपको पता चल सके कि यह आपकी मौजूदा स्टाइलिंग के साथ कैसे काम कर सकता है.
• होम व्यू कार्ड के कॉन्टेंट एरिया पर मौजूद 2 पिक्सल की border-bottom को सीएसएस ओवरराइड की मदद से स्टाइल किया गया है या छिपाया गया है: इस बॉर्डर को <mat-card-content> से हटाकर <mat-card-actions> पर border-top के तौर पर सेट किया गया है.

बदलावों की पूरी जानकारी का सारांश

यहां दिए गए सेक्शन में, इस रिलीज़ में किए गए बदलावों के बारे में कैटगरी के हिसाब से बताया गया है.

पोर्टल में किए गए बदलाव

पोर्टल में किए गए बदलावों के बारे में यहां खास जानकारी दी गई है.

• अब इन वैरिएबल का इस्तेमाल नहीं किया जा रहा है:
  • $layout-horizontal-padding
  • $layout-main-content-horiz-padding
  • $layout-header-horiz-padding
  • $layout-context-bar-horiz-padding
• नए वैरिएबल उपलब्ध हैं. इनकी मदद से, मुख्य कॉन्टेंट एरिया की ज़्यादा से ज़्यादा चौड़ाई और मुख्य कॉन्टेंट एरिया के लिए कम से कम हॉरिज़ॉन्टल पैडिंग को कंट्रोल किया जा सकता है:
  • $layout-main-content-max-width
  • $layout-horizontal-min-padding

प्राइमरी नेविगेशन बार में बदलाव

मुख्य नेविगेशन बार में हुए बदलावों के बारे में खास जानकारी यहां दी गई है.

• डेस्कटॉप और मोबाइल स्क्रीन के साइज़ के हिसाब से, लोगो <img> को अब <a> में रैप कर दिया गया है
• उपयोगकर्ता ड्रॉप-डाउन बटन अब <a> के बजाय <button> है

लिंक की स्टाइल में बदलाव

टेक्स्ट में मौजूद स्टैंडर्ड लिंक <a> अब डिफ़ॉल्ट रूप से अंडरलाइन किए गए हैं. साथ ही, कर्सर घुमाने पर उनका बैकग्राउंड कलर (थीम की सेटिंग "सेकंडरी कलर" के आधार पर) दिखता है

404 पेज में बदलाव

404 पेज में किए गए बदलावों के बारे में खास जानकारी यहां दी गई है.

• "अभी साइन इन करें" बटन का रंग, अब <H1> से बदलकर <H2> हो गया है
• एक्सप्लेनेशन टेक्स्ट, अब <H1> के बजाय <H2> है

एपीआई पेज

एपीआई पेज में हुए बदलावों के बारे में खास जानकारी यहां दी गई है. यह जानकारी, कैटगरी के हिसाब से दी गई है.

• एपीआई खोज/फ़िल्टर इनपुट कार्ड:
  • <mat-card-content class="mat-card-content"> अब Search API कार्ड की हेडिंग और इनपुट को रैप करता है
  • <H2> अब class="api-doc-filter-title" के बजाय class="mat-subheading-1" का इस्तेमाल करता है
  • <mat-form-field> अब appearance="outline" का इस्तेमाल करता है
  • इनपुट से पहले, <mat-form-field> में खोज आइकॉन जोड़ा गया है: "<mat-icon matPrefix>search</mat-icon>"
  • इनपुट में, ऐरिया लेबल और कंट्रोल रेफ़रंस जोड़े गए हैं
• एपीआई की खाली सूची वाला मैसेज:
  • "कोई एपीआई नहीं मिला" अब <H1> के बजाय <H2> है
  • अब जानकारी <H2> के बजाय <H3> है
• एपीआई कार्ड की सूची:

  "आपकी खोज से मिलते-जुलते कोई एपीआई नहीं हैं" मैसेज अब <H2> के बजाय <H1> दिखता है

• एपीआई कार्ड:
  • >div class="api-doc-card-content-image-gradient"></div> को हटा दिया गया है
  • एपीआई के टाइटल को <div> वाली इमेज से हटाकर, इमेज <div class="api-doc-card-content-title"></div> के ठीक बाद <div class="api-doc-card-content-title"></div> में जोड़ दिया गया है<div>
  • एपीआई के टाइटल अब <H1> के बजाय <H2> हैं

ऐप्लिकेशन की सूची:

• खाली स्थिति:
  • "शुरू करें" बटन का नाम बदलकर अब <H2> कर दिया गया है. पहले इसका नाम <H1> था
  • खाली स्थिति के लिए दिशा-निर्देश अब <H2> के बजाय <H3> हैं
• सूची:
  • "मेरे ऐप्लिकेशन" का नाम बदलकर अब <H2> हो गया है. पहले इसका नाम <H1> था
  • <mat-row> अब <a> में बदल गया है

ऐप्लिकेशन पेज बनाना और उनमें बदलाव करना

ऐप्लिकेशन बनाने और उसमें बदलाव करने वाले पेजों में हुए बदलावों के बारे में यहां बताया गया है.

• <div class="app-buttons"> को <form> के आखिर में ले जाया गया है और इसे <div class="form-buttons-sticky-container"> से बदल दिया गया है
• क्लास .app-layout-section के सभी इस्तेमाल को .details-layout-section में बदल दिया गया है
• क्लास .app-layout-section-title के सभी इस्तेमाल को .details-layout-section-title में बदल दिया गया है
• सभी सेक्शन के हेडिंग अब <div> के बजाय <H2> हैं
• क्लास .app-layout-section-content के सभी इस्तेमाल को .details-layout-section-content में बदल दिया गया है
• एपीआई की सूची अब एपीआई कार्ड की सूची नहीं है. इसमें टॉगल स्विच भी नहीं हैं (एपीआई की सूची की तरह). इसके बजाय, यह एपीआई की टेबल है
• कॉलबैक यूआरएल के इनपुट को नए सेक्शन में ले जाया गया है
• 'सेव करें' बटन में अब mat-raised-button स्टाइल और प्राइमरी कलर बैकग्राउंड का इस्तेमाल किया गया है
• टेबल को अब <div> में रैप किया गया है. इसमें क्लास .app-table-wrapper है
• टेबल हेडर अब <thead> रैपर का इस्तेमाल करते हैं
• टेबल बॉडी अब <tbody> रैपर का इस्तेमाल करती हैं
• [style.width] का इस्तेमाल अब टेबल कॉलम की चौड़ाई सेट करने के लिए नहीं किया जाता
• टेबल में मौजूद सभी <a> टैग अब <button का इस्तेमाल करते हैं

टीमों की सूची

टीम की सूची में किए गए बदलावों के बारे में यहां बताया गया है.

• खाली स्थिति:
  • "शुरू करें" बटन का नाम बदलकर अब <H2> हो गया है. पहले इसका नाम <H1> था
  • "शेयर किए गए ऐप्लिकेशन के मालिकाना हक को मैनेज करने के लिए टीम बनाएं" अब <H3> है, न कि <H2>
• सूची:

  "टीम" का टाइटल अब <H1> के बजाय <H2> है

टीम पेज बनाना और उनमें बदलाव करना

टीम बनाने और उसमें बदलाव करने वाले पेजों में हुए बदलावों के बारे में यहां बताया गया है.

• <form> पर, क्लास .teams-form को .details-form से बदल दिया गया है
• <div class="teams-buttons"> को <form> के आखिर में ले जाया गया है और उसकी जगह <div class="form-buttons-sticky-container"> को रखा गया है
• क्लास .teams-layout-section के सभी इस्तेमाल को .details-layout-section में बदल दिया गया है
• क्लास .teams-layout-section-title के सभी इस्तेमाल को .details-layout-section-title में बदल दिया गया है
• क्लास .teams-layout-section-content के सभी इस्तेमाल को .details-layout-section-content में बदल दिया गया है
• <table class="team-apps"> के आस-पास <div class="team-apps-container"> को जोड़ा गया

SmartDocs

SmartDocs इंटरफ़ेस में हुए बदलावों के बारे में खास जानकारी यहां दी गई है.

• साइड नेविगेशन:
  • साइड नेविगेशन को angular-material कॉम्पोनेंट के साथ पूरी तरह से फिर से लिखा गया है
  • साइड नेविगेशन हेडिंग अब <div> के बजाय <H2> हैं
  • नेविगेशन आइटम अब पोर्टल के डिफ़ॉल्ट टेक्स्ट कलर का इस्तेमाल करते हैं. इसके लिए, पोर्टल थीम एडिटर के "सेकंडरी कलर" का इस्तेमाल नहीं किया जाता
  • साइड नेविगेशन में चुने गए, फ़ोकस किए गए, और कर्सर घुमाए गए आइटम अब पोर्टल थीम एडिटर के "सेकंडरी कलर" के गहरे और हल्के वर्शन का इस्तेमाल करते हैं. ये वर्शन, टेक्स्ट और बैकग्राउंड के लिए इस्तेमाल किए जाते हैं
• कॉन्टेंट:
  • "पाथ पैरामीटर" और "हेडर पैरामीटर" जैसी कई उपहेडिंग अब <H3> के बजाय <H2> हैं
  • खास जानकारी देने वाले पेज पर मौजूद स्कीमा इकाइयां अब <H2> के बजाय <H3>=> हैं

मौजूदा होम पेज में सुलभता से जुड़ी सुविधाएं जोड़ना

अगर आपके पास पहले से कोई पोर्टल है, तो आपको होम पेज में बदलाव करना होगा. इससे आपको नेविगेट किए जा सकने वाले कार्ड के लिए, सुलभता से जुड़ी नई सुविधाओं का फ़ायदा मिलेगा. इसके बारे में यहां बताया गया है:

1. href="" को <mat-card> कंटेनर से हटाएं.
2. <mat-card-header> में मौजूद कार्ड हेडिंग के लिए, <H1> के बजाय <H2> का इस्तेमाल करें.
3. कार्ड हेडिंग <h2> के अंदर, टेक्स्ट को <a class="navigable-content" href="href-name"> में रैप करें और कार्ड के नेविगेशन के लिए href-name को सही वैल्यू पर सेट करें.

इसके अलावा, इस कार्ड टेंप्लेट का इस्तेमाल किया जा सकता है:

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

नेविगेशन बार और पेज हेडर के लिए प्राइमरी कलर बदलना

नेविगेशन बार और पेज हेडर को ब्राउज़र विंडो के किनारे तक ले जाने के लिए, ऐडवांस थीम एडिटर का इस्तेमाल करके, नेविगेशन बार और पेज हेडर के लिए कस्टम स्टाइलिंग जोड़ें. हेडर नेविगेशन बार के लिए, यहां दिए गए तरीके का इस्तेमाल करें:

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

किसी ऐप्लिकेशन के लिए एपीआई मैनेज करने की प्रोसेस को अपडेट करना

इंटिग्रेट किए गए पोर्टल पर, किसी ऐप्लिकेशन में एपीआई मैनेज करने के लिए उपयोगकर्ता के इंटरैक्शन में बदलाव किया गया है. खास तौर पर, किसी ऐप्लिकेशन को मैनेज करते समय, एपीआई सेक्शन में जाकर उपयोगकर्ताओं को या पर क्लिक करना होगा. इसके बाद, वे ऐप्लिकेशन से किसी एपीआई का ऐक्सेस चालू या बंद कर पाएंगे. इसके लिए, उन्हें टॉगल का इस्तेमाल नहीं करना होगा.

अगर लागू हो, तो अपने पोर्टल पर मौजूद उन सभी प्रक्रियाओं को अपडेट करें जिनमें ऐप्लिकेशन पेज पर एपीआई मैनेज करने का तरीका बताया गया है. ज़्यादा जानकारी के लिए, अपने ऐप्लिकेशन में एपीआई मैनेज करना लेख पढ़ें.

गड़बड़ियां ठीक की गईं

इस रिलीज़ में इन बग को ठीक किया गया है. यह सूची मुख्य रूप से उन उपयोगकर्ताओं के लिए है जो यह देखना चाहते हैं कि उनके सहायता टिकट ठीक किए गए हैं या नहीं. इसे सभी उपयोगकर्ताओं के लिए, ज़्यादा जानकारी देने के लिए डिज़ाइन नहीं किया गया है.

ज्ञात समस्याएं

इंटिग्रेटेड पोर्टल से जुड़ी ऐसी समस्याएं जिनके बारे में पहले से जानकारी है उनकी सूची देखने के लिए, इंटिग्रेटेड पोर्टल से जुड़ी समस्याएं लेख पढ़ें.