Como personalizar o portal do desenvolvedor do Azure API Management usando modelos

Há três maneiras fundamentais de personalizar o portal do desenvolvedor no Gerenciamento de API do Azure:

• Editar o conteúdo de páginas estáticas e elementos de layout de página
• Atualize os estilos usados para elementos de página no portal do desenvolvedor
• Modificar os modelos usados para páginas geradas pelo portal (explicado neste guia)

Os modelos são usados para personalizar o conteúdo das páginas do portal do desenvolvedor geradas pelo sistema (por exemplo, documentos de API, produtos, autenticação de usuário, etc.). Usando a sintaxe DotLiquid e um conjunto fornecido de recursos de strings localizados, ícones e controles de página, você tem grande flexibilidade para configurar o conteúdo das páginas conforme desejar.

APLICA-SE A: Desenvolvedor | Básico | Padrão | Premium

Visão geral dos modelos do portal do desenvolvedor

A edição de modelos é feita a partir do portal do Developer enquanto está conectado como administrador. Para chegar lá, primeiro abra o portal do Azure e clique em portal do desenvolvedor na barra de ferramentas de serviço da sua instância de Gerenciamento de API.

Para acessar os modelos do portal do desenvolvedor, clique no ícone personalizar à esquerda para exibir o menu de personalização e clique em Modelos.

A lista de modelos exibe várias categorias de modelos que abrangem as diferentes páginas no portal do desenvolvedor. Cada modelo é diferente, mas as etapas para editá-los e publicar as alterações são as mesmas. Para editar um modelo, clique no nome do modelo.

Clicar em um modelo leva você à página do portal do desenvolvedor que é personalizável por esse modelo. Neste exemplo, o modelo da lista de produtos é exibido. O modelo lista de produtos controla a área do ecrã indicada pelo retângulo vermelho.

Alguns modelos, como os modelos Perfil de Usuário, personalizam diferentes partes da mesma página.

O editor de cada modelo de portal do desenvolvedor tem duas seções exibidas na parte inferior da página. O lado esquerdo exibe o painel de edição do modelo e o lado direito exibe o modelo de dados do modelo.

O painel de edição de modelo contém a marcação que controla a aparência e o comportamento da página correspondente no portal do desenvolvedor. A marcação no modelo usa a sintaxe DotLiquid. Um editor popular para DotLiquid é DotLiquid for Designers. Todas as alterações feitas no modelo durante a edição são exibidas em tempo real no navegador, mas não ficam visíveis para os seus clientes até que você guarde e publique o modelo.

O painel de dados Modelo fornece um guia para o modelo de dados das entidades que estão disponíveis para uso num modelo específico. Ele fornece este guia exibindo os dados em tempo real que são exibidos atualmente no portal do desenvolvedor. Você pode expandir os painéis de modelo clicando no retângulo no canto superior direito do painel Dados do modelo.

No exemplo anterior, há dois produtos exibidos no portal do desenvolvedor que foram recuperados dos dados exibidos no painel de dados do Modelo , conforme mostrado no exemplo a seguir.

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

A marcação no modelo lista de produtos processa os dados para fornecer a saída desejada, iterando através da coleção de produtos para mostrar informações e um link para cada produto. Observe os elementos <search-control> e <page-control> na marcação. Eles controlam a exibição dos controles de pesquisa e paginação na página. ProductsStrings|PageTitleProducts é uma referência de cadeia de caracteres localizada que contém o h2 texto do cabeçalho da página. Para obter uma lista de recursos de cadeia de caracteres, controles de página e ícones disponíveis para uso em modelos de portal do desenvolvedor do Gerenciamento de API, consulte a referência de modelos de portal do desenvolvedor .

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

Para salvar um modelo

Para salvar um modelo, clique em Salvar no editor de modelos.

As alterações salvas não ficam ativas no portal do desenvolvedor até que sejam publicadas.

Para publicar um modelo

Os modelos salvos podem ser publicados individualmente ou todos juntos. Para publicar um modelo individual, clique em publicar no editor de modelos.

Clique Sim para confirmar e tornar o template disponível no portal do desenvolvedor.

Para publicar todas as versões de modelo não publicadas no momento, clique em Publicar na lista de modelos. Os modelos não publicados são designados por um asterisco após o nome do modelo. Neste exemplo, os modelos de Lista de Produtos e Produto são publicados.

Clique em Publicar personalizações para confirmar.

Os modelos recém-publicados entram em vigor imediatamente no portal do desenvolvedor.

Para reverter um modelo para a versão anterior

Para reverter um modelo para a versão publicada anteriormente, clique em reverter no editor de modelos.

Clique Sim para confirmar.

A versão publicada anteriormente de um modelo está ativa no portal do desenvolvedor assim que a operação de reversão for concluída.

Para restaurar um modelo para a versão padrão

Restaurar modelos para sua versão padrão é um processo de duas etapas. Primeiro, os modelos devem ser restaurados e, em seguida, as versões restauradas devem ser publicadas.

Para restaurar um único modelo para a versão padrão, clique em restaurar no editor de modelos.

Clique Sim para confirmar.

Para restaurar todos os modelos para suas versões padrão, clique em Restaurar modelos padrão na lista de modelos.

Os modelos restaurados devem ser publicados individualmente ou todos de uma só vez, seguindo as etapas em Para publicar um modelo.

Próximos passos

Para consultar informações de referência sobre modelos de portal do desenvolvedor do Gerenciamento de API, recursos de cadeia de caracteres, ícones e controles de página, veja a referência de modelos de portal do desenvolvedor.