Come personalizzare il portale per sviluppatori di Gestione API di Azure con i modelli

Per personalizzare il portale per sviluppatori in Gestione API di Azure ci sono tre modalità principali:

I modelli vengono usati per personalizzare il contenuto delle pagine del portale per sviluppatori generate dal sistema, ad esempio la documentazione delle API, i prodotti, l'autenticazione utente e così via. La sintassi DotLiquid, insieme a un set fornito di risorse stringa localizzate, icone e controlli di pagina, offre grande flessibilità nella configurazione del contenuto delle pagine nel modo opportuno.

Panoramica sui modelli del portale per sviluppatori

La modifica dei modelli viene eseguita dal portale per sviluppatori quando vi si accede come amministratore. Per accedervi, aprire prima il Portale di Azure e fare clic su Portale di pubblicazione nella barra degli strumenti del servizio dell'istanza di Gestione API.

Portale di pubblicazione

Quindi fare clic su Portale per sviluppatori in alto a destra.

Menu del portale per sviluppatori

Per accedere ai modelli del portale per sviluppatori, fare clic sull'icona di personalizzazione a sinistra per visualizzare il menu di personalizzazione e quindi fare clic su Templates.

Modelli del portale per sviluppatori

L'elenco dei modelli include varie categorie di modelli che coprono le diverse pagine del portale per sviluppatori. Ogni modello è diverso, ma i passaggi per modificarli e pubblicare le modifiche sono uguali per tutti. Per modificare un modello, fare clic sul nome del modello.

Modelli del portale per sviluppatori

Facendo clic su un modello si passa alla pagina del portale per sviluppatori personalizzabile con il modello selezionato. In questo esempio viene visualizzato il modello Product list . Il modello Product list controlla l'area dello schermo indicata dal rettangolo rosso.

Modello Product list

Alcuni modelli, come i modelli User Profile , permettono di personalizzare parti diverse della stessa pagina.

Modelli User Profile

L'editor di ogni modello del portale per sviluppatori include due sezioni visualizzate nella parte inferiore della pagina. A sinistra è visualizzato il riquadro di modifica per il modello, mentre a destra è visualizzato il relativo modello di dati.

Il riquadro di modifica del modello contiene il markup che controlla l'aspetto e il comportamento della pagina corrispondente nel portale per sviluppatori. Il markup del modello usa la sintassi DotLiquid . Uno degli editor più diffusi per DotLiquid è DotLiquid for Designers. Tutte le modifiche apportate al modello in fase di modifica vengono visualizzate in tempo reale nel browser, ma non sono visibili ai clienti finché non si sceglie di salvare e pubblicare il modello.

Markup del modello

Il riquadro Template data fornisce una guida al modello di dati per le entità disponibili per l'uso in un determinato modello. La guida consiste nella possibilità di visualizzare i dati attivi attualmente visualizzati nel portale per sviluppatori. Per espandere i riquadri del modello è possibile fare clic sul rettangolo nell'angolo superiore destro del riquadro Template data .

Modello Template data

Nell'esempio precedente sono disponibili due prodotti visualizzati nel portale per gli sviluppatori che sono stati recuperati dai dati visualizzati nel riquadro Template data , come illustrato nell'esempio seguente.

{
    "Paging": {
        "Page": 1,
        "PageSize": 10,
        "TotalItemCount": 2,
        "ShowAll": false,
        "PageCount": 1
    },
    "Filtering": {
        "Pattern": null,
        "Placeholder": "Search products"
    },
    "Products": [
        {
            "Id": "56ec64c380ed850042060001",
            "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": "56ec64c380ed850042060002",
            "Title": "Unlimited",
            "Description": "Subscribers have completely unlimited access to the API. Administrator approval is required.",
            "Terms": null,
            "ProductState": 1,
            "AllowMultipleSubscriptions": false,
            "MultipleSubscriptionsCount": 1
        }
    ]
}

Il markup del modello Product list elabora i dati per fornire l'output previsto scorrendo la raccolta di prodotti per visualizzare le relative informazioni e un collegamento a ogni singolo prodotto. Si notino gli elementi <search-control> e <page-control> nel markup. Questi controllano la visualizzazione dei controlli di ricerca e di paging nella pagina. ProductsStrings|PageTitleProducts è un riferimento a una stringa localizzata che contiene il testo dell'intestazione h2 della pagina. Per un elenco delle risorse stringa, i controlli di pagina e le icone disponibili per l'uso nei modelli del portale per sviluppatori, vedere il riferimento ai modelli del portale per sviluppatori di Gestione API.

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

Per salvare un modello

Per salvare un modello, fare clic sull'icona di salvataggio nell'editor del modello.

Salvare il modello

Le modifiche salvate non sono attive nel portale per sviluppatori fino a quando non vengono pubblicate.

Per pubblicare un modello

I modelli salvati possono essere pubblicati singolarmente o tutti insieme. Per pubblicare un singolo modello, fare clic sull'icona di pubblicazione nell'editor del modello.

Pubblicare il modello

Fare clic su Yes per confermare e rendere il modello attivo nel portale per sviluppatori.

Confermare la pubblicazione

Per pubblicare tutte le versioni dei modelli non ancora pubblicate, fare clic su Publish nell'elenco dei modelli. I modelli non pubblicati sono contraddistinti da un asterisco dopo il nome del modello. In questo esempio vengono pubblicati i modelli Product list (Elenco prodotti) e Product (Prodotto).

Pubblicare i modelli

Fare clic su Publish customizations per confermare.

Confermare la pubblicazione

I modelli appena pubblicati diventano immediatamente disponibili nel portale per sviluppatori.

Per annullare la modifiche alla versione precedente di un modello

Per annullare la modifiche alla versione pubblicata precedente di un modello, fare clic sull'icona di annullamento nell'editor del modello.

Annullare le modifiche al modello

Fare clic su Yes per confermare.

Confirm

Al termine dell'operazione di annullamento, la versione pubblicata precedente del modello sarà disponibile nel portale per sviluppatori.

Per ripristinare la versione predefinita di un modello

Il ripristino della versione predefinita di un modello è un processo in due passaggi. Occorre prima di tutto ripristinare i modelli e quindi pubblicare le versioni ripristinate.

Per ripristinare la versione predefinita di un singolo modello, fare clic sull'icona di ripristino nell'editor del modello.

Annullare le modifiche al modello

Fare clic su Yes per confermare.

Confirm

Per ripristinare le versioni predefinite di tutti i modelli, fare clic su Restore default templates nell'elenco dei modelli.

Ripristinare i modelli

I modelli ripristinati devono poi essere pubblicati singolarmente o tutti insieme seguendo i passaggi descritti nella sezione Per pubblicare un modello.

Passaggi successivi

Per informazioni di riferimento sui modelli del portale per sviluppatori, le risorse stringa, le icone e i controlli di pagina, vedere il riferimento ai modelli del portale per sviluppatori di Gestione API.