Templat aplikasi di Azure API Management
Azure API Management menyediakan kemampuan untuk mengustomisasi konten halaman portal pengembang menggunakan sekumpulan templat yang dapat mengonfigurasi kontennya. Menggunakan sintaks DotLiquid dan editor pilihan Anda, seperti DotLiquid for Designers, dan serangkaian sumber daya String yang di lokalkan, sumber daya Glyph, dan kontrol Halaman, Anda memiliki fleksibilitas besar untuk mengonfigurasi konten halaman sesuai keinginan Anda menggunakan templat ini.
Templat di bagian ini memungkinkan Anda untuk mengustomisasi konten halaman API yang ada di portal pengembang.
Catatan
Sampel templat default disertakan dalam dokumentasi berikut, tetapi dapat berubah karena peningkatan berkelanjutan. Anda dapat melihat templat default langsung di portal pengembang dengan menavigasi ke templat individual yang diinginkan. Untuk informasi selengkapnya tentang bekerja dengan templat, lihat Cara mengustomisasi portal pengembang API Management menggunakan templat.
Catatan
Konten dokumentasi berikut berisi tentang portal pengembang yang tidak digunakan lagi. Anda dapat terus menggunakannya seperti biasa, hingga waktu pensiunnya pada bulan Oktober 2023, saat portal tersebut akan dihapus dari semua layanan API Management. Portal yang tidak digunakan lagi hanya akan menerima pembaruan keamanan yang penting. Lihat artikel berikut ini untuk detail selengkapnya:
Ketersediaan
Penting
Fitur ini tersedia di tingkat Premium, Standar, Dasar, dan Pengembang API Management.
Untuk ketersediaan fitur di tingkat v2 (pratinjau), lihat gambaran umum tingkat v2.
Daftar aplikasi
Daftar aplikasi memungkinkan Anda mengustomisasi isi halaman daftar aplikasi di portal pengembang.
Templat
Templat default
<div class="row">
<div class="col-md-9">
<h2>{% localized "AppStrings|WebApplicationsHeader" %}</h2>
</div>
</div>
<div class="row">
<div class="col-md-12">
{% if applications.size > 0 %}
<ul class="list-unstyled">
{% for app in applications %}
<li>
{% if app.application.icon.url != "" %}
<aside>
<a href="/applications/details/{{app.application.id}}"><img src="{{app.application.icon.url}}" alt="App Icon"></a>
</aside>
{% endif %}
<h3><a href="/applications/details/{{app.application.id}}">{{app.application.title}}</a></h3>
{{app.application.description}}
</li>
{% endfor %}
</ul>
<paging-control></paging-control>
{% else %}
{% localized "CommonResources|NoItemsToDisplay" %}
{% endif %}
</div>
</div>
Kontrol
Templat Product list
dapat menggunakan kontrol halaman berikut.
Model data
Properti | Jenis | Deskripsi |
---|---|---|
Paging |
Entitas penomoran. | Informasi penomoran untuk kumpulan aplikasi. |
Applications |
Kumpulan entitas Aplikasi. | Aplikasi yang terlihat oleh pengguna saat ini. |
CategoryName |
string | Kategori aplikasi. |
Data templat sampel
{
"Paging": {
"Page": 1,
"PageSize": 10,
"TotalItemCount": 1,
"ShowAll": false,
"PageCount": 1
},
"Applications": [
{
"Application": {
"Id": "5702b96fb16653124c8f9ba8",
"Title": "Contoso Calculator",
"Description": "A simple online calculator.",
"Url": null,
"Version": null,
"Requirements": "Free application with no requirements.",
"State": 2,
"RegistrationDate": "2016-04-04T18:59:00",
"CategoryId": 5,
"DeveloperId": "5702b5b0b16653124c8f9ba4",
"Attachments": [
{
"UniqueId": "a58af001-e6c3-45fd-8bc9-c60a1875c3f6",
"Url": "https://apimgmtst65gdjvjrgdbfhr4.blob.core.windows.net/content/applications/a58af001-e6c3-45fd-8bc9-c60a1875c3f6.png",
"Type": "Icon",
"ContentType": "image/png"
},
{
"UniqueId": "2b4fa5dd-00ff-4a8f-b1b7-51e715849ede",
"Url": "https://apimgmtst65gdjvjrgdbfhr4.blob.core.windows.net/content/applications/2b4fa5dd-00ff-4a8f-b1b7-51e715849ede.png",
"Type": "Screenshot",
"ContentType": "image/png"
}
],
"Icon": {
"UniqueId": "a58af001-e6c3-45fd-8bc9-c60a1875c3f6",
"Url": "https://apimgmtst65gdjvjrgdbfhr4.blob.core.windows.net/content/applications/a58af001-e6c3-45fd-8bc9-c60a1875c3f6.png",
"Type": "Icon",
"ContentType": "image/png"
}
},
"CategoryName": "Finance"
}
]
}
Aplikasi
Templat Aplikasi memungkinkan Anda mengustomisasi isi halaman daftar aplikasi di portal pengembang.
Templat
Templat default
<h2>{{title}}</h2>
{% if icon.url != "" %}
<aside class="applications_aside">
<div class="image-placeholder">
<img src="{{icon.url}}" alt="Application Icon" />
</div>
</aside>
{% endif %}
<article>
{% if url != "" %}
<a target="_blank" href="{{url}}">{{url}}</a>
{% endif %}
<p>{{description}}</p>
{% if requirements != null %}
<h3>{% localized "AppDetailsStrings|WebApplicationsRequirementsHeader" %}</h3>
<p>{{requirements}}</p>
{% endif %}
{% if attachments.size > 0 %}
<h3>{% localized "AppDetailsStrings|WebApplicationsScreenshotsHeader" %}</h3>
{% for screenshot in attachments %}
{% if screenshot.type != "Icon" %}
<a href="{{screenshot.url}}" data-lightbox="example-set">
<img src="/Developer/Applications/Thumbnail?url={{screenshot.url}}" alt='{% localized "AppDetailsStrings|WebApplicationsScreenshotAlt" %}' />
</a>
{% endif %}
{% endfor %}
{% endif %}
</article>
Kontrol
Templat Application
tidak mengizinkan penggunaan kontrol halaman apa pun.
Model data
Entitas Aplikasi.
Data templat sampel
{
"Id": "5702b96fb16653124c8f9ba8",
"Title": "Contoso Calculator",
"Description": "A simple online calculator.",
"Url": null,
"Version": null,
"Requirements": "Free application with no requirements.",
"State": 2,
"RegistrationDate": "2016-04-04T18:59:00",
"CategoryId": 5,
"DeveloperId": "5702b5b0b16653124c8f9ba4",
"Attachments": [
{
"UniqueId": "a58af001-e6c3-45fd-8bc9-c60a1875c3f6",
"Url": "https://apimgmtst3aybshdqqcqrle4.blob.core.windows.net/content/applications/a58af001-e6c3-45fd-8bc9-c60a1875c3f6.png",
"Type": "Icon",
"ContentType": "image/png"
},
{
"UniqueId": "2b4fa5dd-00ff-4a8f-b1b7-51e715849ede",
"Url": "https://apimgmtst3aybshdqqcqrle4.blob.core.windows.net/content/applications/2b4fa5dd-00ff-4a8f-b1b7-51e715849ede.png",
"Type": "Screenshot",
"ContentType": "image/png"
}
],
"Icon": {
"UniqueId": "a58af001-e6c3-45fd-8bc9-c60a1875c3f6",
"Url": "https://apimgmtst3aybshdqqcqrle4.blob.core.windows.net/content/applications/a58af001-e6c3-45fd-8bc9-c60a1875c3f6.png",
"Type": "Icon",
"ContentType": "image/png"
}
}
Langkah berikutnya
Untuk informasi selengkapnya tentang bekerja dengan templat, lihat Cara mengustomisasi portal pengembang API Management menggunakan templat.