Azure API Management의 제품 템플릿

아티클
11/04/2019

Azure API Management는 해당 콘텐츠를 구성하는 템플릿 집합을 사용하여 개발자 포털 페이지의 콘텐츠를 사용자 지정하는 기능을 제공합니다. 이러한 템플릿에서 DotLiquid 구문 및 DotLiquid for Designers 및 제공된 지역화 String 리소스, Glyph 리소스 및 Page 컨트롤의 집합과 같은 선택한 편집기를 사용하여 필요에 따라 페이지 콘텐츠를 유연하게 구성할 수 있습니다.

이 섹션의 템플릿을 통해 개발자 포털에서 제품 페이지의 콘텐츠를 사용자 지정할 수 있습니다.

제품 목록
제품

참고

다음 문서에는 샘플 기본 템플릿이 포함되어 있지만 지속적인 향상으로 인해 변경될 수 있습니다. 원하는 개별 템플릿으로 이동하여 개발자 포털에서 라이브 기본 템플릿을 볼 수 있습니다. 템플릿 작업에 대한 자세한 내용은 템플릿을 사용하여 API Management 개발자 포털을 사용자 지정하는 방법을 참조하세요.

참고

다음 설명서 콘텐츠는 더 이상 사용되지 않는 개발자 포털에 대한 것입니다. 모든 API Management 서비스에서 제거되는 2023년 10월 만료될 때까지 평상시와 같이 계속 사용할 수 있습니다. 사용되지 않는 포털은 중요 보안 업데이트만 받습니다. 자세한 내용은 다음 문서를 참조하세요.

가용성

중요

이 기능은 API Management의 프리미엄, 표준, 기본 및 개발자 계층에서 사용할 수 있습니다.

v2 계층(미리 보기)의 기능 가용성은 v2 계층 개요를 참조하세요.

제품 목록

제품 목록 템플릿을 통해 개발자 포털에서 제품 목록 페이지의 본문을 사용자 지정할 수 있습니다.

제품 목록

기본 템플릿

<search-control></search-control>  
<div class="row">  
    <div class="col-md-9">  
        <h2>{% localized "ProductsStrings|PageTitleProducts" %}</h2>  
    </div>  
</div>  
<div class="row">  
    <div class="col-md-12">  
	{% if products.size > 0 %}  
	<ul class="list-unstyled">  
	{% for product in products %}  
		<li>  
			<h3><a href="/products/{{product.id}}">{{product.title}}</a></h3>  
			{{product.description}}  
		</li>	  
	{% endfor %}  
	</ul>  
	<paging-control></paging-control>  
	{% else %}  
	{% localized "CommonResources|NoItemsToDisplay" %}  
	{% endif %}  
	</div>  
</div>

컨트롤

Product list 템플릿에서 다음 페이지 컨트롤을 사용할 수 있습니다.

데이터 모델

속성	형식	Description
페이징	페이징 엔터티입니다.	제품 컬렉션에 대한 페이징 정보입니다.
필터링	필터링 엔터티.	제품 목록 페이지에 대한 필터링 정보입니다.
Products	제품 엔터티의 컬렉션입니다.	현재 사용자에게 표시되는 제품입니다.

샘플 템플릿 데이터

{  
    "Paging": {  
        "Page": 1,  
        "PageSize": 10,  
        "TotalItemCount": 2,  
        "ShowAll": false,  
        "PageCount": 1  
    },  
    "Filtering": {  
        "Pattern": null,  
        "Placeholder": "Search products"  
    },  
    "Products": [  
        {  
            "Id": "56f9445ffaf7560049060001",  
            "Title": "Starter",  
            "Description": "Subscribers will be able to run 5 calls/minute up to a maximum of 100 calls/week.",  
            "Terms": "",  
            "ProductState": 1,  
            "AllowMultipleSubscriptions": false,  
            "MultipleSubscriptionsCount": 1  
        },  
        {  
            "Id": "56f9445ffaf7560049060002",  
            "Title": "Unlimited",  
            "Description": "Subscribers have completely unlimited access to the API. Administrator approval is required.",  
            "Terms": null,  
            "ProductState": 1,  
            "AllowMultipleSubscriptions": false,  
            "MultipleSubscriptionsCount": 1  
        }  
    ]  
}

Product

제품 템플릿을 통해 개발자 포털에서 제품 페이지의 본문을 사용자 지정할 수 있습니다.

개발자 포털 제품 페이지

기본 템플릿

<h2>{{Product.Title}}</h2>  
<p>{{Product.Description}}</p>  
  
{% assign replaceString0 = '{0}' %}  
  
{% if Limits and Limits.size > 0 %}  
<h3>{% localized "ProductDetailsStrings|WebProductsUsageLimitsHeader"%}</h3>  
<ul>  
  {% for limit in Limits %}  
  <li>{{limit.DisplayName}}</li>  
  {% endfor %}  
</ul>  
{% endif %}  
  
{% if apis.size > 0 %}  
<p>  
  <b>  
    {% if apis.size == 1 %}  
    {% capture apisCountText %}{% localized "ProductDetailsStrings|TextblockSingleApisCount" %}{% endcapture %}  
    {% else %}  
    {% capture apisCountText %}{% localized "ProductDetailsStrings|TextblockMultipleApisCount" %}{% endcapture %}  
    {% endif %}  
  
    {% capture apisCount %}{{apis.size}}{% endcapture %}  
    {{ apisCountText | replace : replaceString0, apisCount }}  
  </b>  
</p>  
  
<ul>  
  {% for api in Apis %}  
  <li>  
    <a href="/docs/services/{{api.Id}}">{{api.Name}}</a>  
  </li>  
  {% endfor %}  
</ul>  
{% endif %}  
  
{% if subscriptions.size > 0 %}  
<p>  
  <b>  
    {% if subscriptions.size == 1 %}  
    {% capture subscriptionsCountText %}{% localized "ProductDetailsStrings|TextblockSingleSubscriptionsCount" %}{% endcapture %}  
    {% else %}  
    {% capture subscriptionsCountText %}{% localized "ProductDetailsStrings|TextblockMultipleSubscriptionsCount" %}{% endcapture %}  
    {% endif %}  
  
    {% capture subscriptionsCount %}{{subscriptions.size}}{% endcapture %}  
    {{ subscriptionsCountText | replace : replaceString0, subscriptionsCount }}  
  </b>  
</p>  
  
<ul>  
  {% for subscription in subscriptions %}  
  <li>  
    <a href="/developer#{{subscription.Id}}">{{subscription.DisplayName}}</a>  
  </li>  
  {% endfor %}  
</ul>  
{% endif %}  
{% if CannotAddBecauseSubscriptionNumberLimitReached %}  
<b>{% localized "ProductDetailsStrings|TextblockSubscriptionLimitReached" %}</b>  
{% elsif CannotAddBecauseMultipleSubscriptionsNotAllowed == false %}  
<subscribe-button></subscribe-button>  
{% endif %}

컨트롤

Product list 템플릿에서 다음 페이지 컨트롤을 사용할 수 있습니다.

subscribe-button

데이터 모델

속성	형식	Description
제품	제품	지정된 제품.
IsDeveloperSubscribed	boolean	현재 사용자가 이 제품을 구독하는지 여부입니다.
SubscriptionState	number	구독의 상태입니다. 가능한 상태는 다음과 같습니다. - `0 - suspended` – 구독이 차단되고 구독자는 제품의 API를 호출할 수 없습니다. - `1 - active` – 구독이 활성화되어 있습니다. - `2 - expired` - 구독이 만료 날짜에 도달되었고 비활성화되었습니다. - `3 - submitted` - 구독 요청이 개발자에 의해 발생했지만 아직 승인 또는 거부되지 않았습니다. - `4 - rejected` – 구독 요청이 관리자에 의해 거부되었습니다. - `5 - cancelled` - 구독이 개발자 또는 관리자에 의해 취소되었습니다.
제한	array	이 속성은 사용되지 않으며 사용할 수 없습니다.
DelegatedSubscriptionEnabled	boolean	위임이 이 구독에 대해 활성화되었는지 여부입니다.
DelegatedSubscriptionUrl	문자열	위임을 사용하는 경우 위임된 구독 URL입니다.
IsAgreed	boolean	제품에 약관이 있는 경우 현재 사용자가 약관에 동의했는지 여부입니다.
Subscriptions	구독 요약 엔터티의 컬렉션입니다.	제품에 대한 구독입니다.
Apis	API 엔터티의 컬렉션입니다.	이 제품의 API입니다.
CannotAddBecauseSubscriptionNumberLimitReached	boolean	현재 사용자가 구독 제한과 관련하여 이 제품을 구독할 수 있는지 여부입니다.
CannotAddBecauseMultipleSubscriptionsNotAllowed	boolean	현재 사용자가 허용 또는 허용되지 않는 여러 구독과 관련하여 이 제품을 구독할 수 있는지 여부입니다.

샘플 템플릿 데이터

{  
    "Product": {  
        "Id": "56f9445ffaf7560049060001",  
        "Title": "Starter",  
        "Description": "Subscribers will be able to run 5 calls/minute up to a maximum of 100 calls/week.",  
        "Terms": "",  
        "ProductState": 1,  
        "AllowMultipleSubscriptions": false,  
        "MultipleSubscriptionsCount": 1  
    },  
    "IsDeveloperSubscribed": true,  
    "SubscriptionState": 1,  
    "Limits": [],  
    "DelegatedSubscriptionEnabled": false,  
    "DelegatedSubscriptionUrl": null,  
    "IsAgreed": false,  
    "Subscriptions": [  
        {  
            "Id": "56f9445ffaf7560049070001",  
            "DisplayName": "Starter  (default)"  
        }  
    ],  
    "Apis": [  
        {  
            "id": "56f9445ffaf7560049040001",  
            "name": "Echo API",  
            "description": null,  
            "serviceUrl": "http://echoapi.cloudapp.net/api",  
            "path": "echo",  
            "protocols": [  
                2  
            ],  
            "authenticationSettings": null,  
            "subscriptionKeyParameterNames": null  
        }  
    ],  
    "CannotAddBecauseSubscriptionNumberLimitReached": false,  
    "CannotAddBecauseMultipleSubscriptionsNotAllowed": true  
}

다음 단계

템플릿 작업에 대한 자세한 내용은 템플릿을 사용하여 API Management 개발자 포털을 사용자 지정하는 방법을 참조하세요.

다음을 통해 공유

Azure API Management의 제품 템플릿

가용성

제품 목록

기본 템플릿

컨트롤

데이터 모델

샘플 템플릿 데이터

Product

기본 템플릿

컨트롤

데이터 모델

샘플 템플릿 데이터

다음 단계

추가 리소스