Azure API Management の問題テンプレート

2019-11-04

Azure API Management には、開発者ポータルの各ページの内容を、内容を構成するテンプレートセットを使用してカスタマイズする機能があります。 DotLiquid 構文、好みのエディター (DotLiquid for Designersなど)、および用意されているローカライズされた文字列リソース、グリフリソース、およびページコントロールのセットをテンプレートで使用して、表示されるページの内容を自由に構成できます。

このセクションのテンプレートを使用すると、開発者ポータルの [問題] ページの内容をカスタマイズできます。

問題リスト

注

このドキュメントには既定のテンプレートのサンプルが含まれていますが、それらは継続的な改善に伴って変更される可能性があります。開発者ポータルで目的の個々のテンプレートに移動することで、最新の既定のテンプレートを表示できます。テンプレートの操作方法の詳細については、テンプレートを使用して API Management 開発者ポータルをカスタマイズする方法に関するページを参照してください。

注

以下のドキュメントの内容は、非推奨の開発者ポータルに関するものです。 2023 年 10 月に廃止され、すべての API Management サービスから削除されるまで、通常どおりに引き続き使用できます。非推奨のポータルでは、重要なセキュリティ更新プログラムのみを受信します。詳細については、次の記事を参照してください。

対象: デベロッパー | ベーシック | スタンダード | プレミアム

問題の一覧

問題リスト テンプレートを使用すると、開発者ポータルで問題リストページの本文をカスタマイズできます。

問題一覧開発者ポータル

既定のテンプレート

<div class="row">
  <div class="col-md-9">
    <h2>{% localized "IssuesStrings|WebIssuesIndexTitle" %}</h2>
  </div>
</div>
<div class="row">
  <div class="col-md-12">
    {% if issues.size > 0 %}
    <ul class="list-unstyled">
      {% capture reportedBy %}{% localized "IssuesStrings|WebIssuesStatusReportedBy" %}{% endcapture %}
      {% assign replaceString0 = '{0}' %}
      {% assign replaceString1 = '{1}' %}
      {% for issue in issues %}
      <li>
        <h3>
          <a href="/issues/{{issue.id}}">{{issue.title}}</a>
        </h3>
        <p>{{issue.description}}</p>
        <em>
          {% capture state %}{{issue.issueState}}{% endcapture %}
          {% capture devName %}{{issue.subscriptionDeveloperName}}{% endcapture %}
          {% capture str1 %}{{ reportedBy | replace : replaceString0, state }}{% endcapture %}
          {{ str1 | replace : replaceString1, devName }}
          <span class="UtcDateElement">{{ issue.reportedOn | date: "r" }}</span>
        </em>
      </li>
      {% endfor %}
    </ul>
    <paging-control></paging-control>
    {% else %}
    {% localized "CommonResources|NoItemsToDisplay" %}
    {% endif %}
    {% if canReportIssue %}
    <a class="btn btn-primary" id="createIssue" href="/Issues/Create">{% localized "IssuesStrings|WebIssuesReportIssueButton" %}</a>
    {% elsif isAuthenticated %}
    <hr />
    <p>{% localized "IssuesStrings|WebIssuesNoActiveSubscriptions" %}</p>
    {% else %}
    <hr />
    <p>
      {% capture signIntext %}{% localized "IssuesStrings|WebIssuesNotSignin" %}{% endcapture %}
      {% capture link %}<a href="/signin">{% localized "IssuesStrings|WebIssuesSignIn" %}</a>{% endcapture %}
      {{ signIntext | replace : replaceString0, link }}
    </p>
    {% endif %}
  </div>
</div>

コントロール

Issue list テンプレートでは、次のページコントロールを使用できます。

ページングコントロール

データモデル

プロパティ	タイプ	説明
`Issues`	Issue エンティティのコレクション。	現在のユーザーに表示される問題。
`Paging`	Paging エンティティ。	アプリケーションコレクションのページング情報。
`IsAuthenticated`	ブーリアン	現在のユーザーが開発者ポータルにサインインしているかどうか。
`CanReportIssues`	ブーリアン	現在のユーザーが問題を提出するアクセス許可を持っているかどうか。
`Search`	ひも	このプロパティは非推奨であり、使用しないでください。

サンプルテンプレートデータ

{
    "Issues": [
        {
            "Id": "5702b68bb16653124c8f9ba7",
            "ApiId": "570275f1b16653124c8f9ba3",
            "Title": "I couldn't figure out how to connect my application to the API",
            "Description": "I'm having trouble connecting my application to the backend API.",
            "SubscriptionDeveloperName": "Clayton",
            "IssueState": "Proposed",
            "ReportedOn": "2016-04-04T18:46:35.64",
            "Comments": null,
            "Attachments": null,
            "Services": null
        }
    ],
    "Paging": {
        "Page": 1,
        "PageSize": 10,
        "TotalItemCount": 1,
        "ShowAll": false,
        "PageCount": 1
    },
    "IsAuthenticated": true,
    "CanReportIssue": true,
    "Search": null
}

次のステップ

テンプレートの操作方法の詳細については、テンプレートを使用して API Management 開発者ポータルをカスタマイズする方法に関するページを参照してください。

次の方法で共有