Modelli di applicazione in Gestione API di AzureApplication templates in Azure API Management

In Gestione API di Azure è possibile personalizzare le pagine del portale per sviluppatori usando un set di modelli che ne configurano il contenuto.Azure API Management provides you the ability to customize the content of developer portal pages using a set of templates that configure their content. La sintassi DotLiquid usata insieme all'editor di propria scelta, ad esempio DotLiquid for Designers, e a un set di risorse stringa localizzate, risorse Glifo e controlli di pagina offre una grande flessibilità nella configurazione personalizzata del contenuto delle pagine attraverso questi modelli.Using DotLiquid syntax and the editor of your choice, such as DotLiquid for Designers, and a provided set of localized String resources, Glyph resources, and Page controls, you have great flexibility to configure the content of the pages as you see fit using these templates.

I modelli in questa sezione consentono di personalizzare il contenuto delle pagine Applicazione del portale per sviluppatori.The templates in this section allow you to customize the content of the Application pages in the developer portal.

Nota

La documentazione seguente include alcuni modelli predefiniti di esempio. A causa dei continui miglioramenti che vengono apportati, questi modelli sono però soggetti a modifiche.Sample default templates are included in the following documentation, but are subject to change due to continuous improvements. È possibile visualizzare i modelli predefiniti direttamente nel portale per sviluppatori accedendo ai singoli modelli desiderati.You can view the live default templates in the developer portal by navigating to the desired individual templates. Per altre informazioni sull'uso dei modelli, vedere Come personalizzare il portale per sviluppatori di Gestione API di Azure con i modelli.For more information about working with templates, see How to customize the API Management developer portal using templates.

Elenco applicazioniApplication list

Il modello Elenco applicazioni consente di personalizzare il corpo della pagina dell'elenco delle applicazioni nel portale per sviluppatori.The Application list template allows you to customize the body of the application list page in the developer portal.

Modelli della pagina Elenco applicazioni nel portale per sviluppatoriApplication List Page Developer Portal Templates

Modello predefinitoDefault template

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

ControlliControls

Il modello Product list può usare i controlli di pagina seguenti.The Product list template may use the following page controls.

Modello di datiData model

ProprietàProperty TipoType DescrizioneDescription
PagingPaging Entità Paging.Paging entity. Le informazioni di paging per la raccolta di applicazioni.The paging information for the applications collection.
ApplicazioniApplications Raccolta di entità Applicazione.Collection of Application entities. Le applicazioni visibili all'utente corrente.The applications visible to the current user.
CategoryNameCategoryName stringstring La categoria dell'applicazione.The category of application.

Dati del modello di esempioSample template data

{  
    "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"  
        }  
    ]  
}  

ApplicazioneApplication

Il modello Applicazione consente di personalizzare il corpo della pagina dell'applicazione nel portale per sviluppatori.The Application template allows you to customize the body of the application page in the developer portal.

Modelli della pagina Applicazione nel portale per sviluppatoriApplication Page Developer Portal Templates

Modello predefinitoDefault template

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

ControlliControls

Il modello Application non consente l'uso di controlli di pagina.The Application template does not allow the use of any page controls.

Modello di datiData model

Entità Applicazione.Application entity.

Dati del modello di esempioSample template data

{  
    "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"  
    }  
}  

Passaggi successiviNext steps

Per ulteriori informazioni sull'uso dei modelli, vedere Come personalizzare il portale per sviluppatori di Gestione API usando i modelli.For more information about working with templates, see How to customize the API Management developer portal using templates.