Cloud-native API Administration with Red Hat 3scale API Management
After completing this section, you should be able to configure a developer portal with custom look and feel.
The default Developer Portal includes features that most of your users need to manage access to your APIs. However, you might need to add additional features or customization. For example, you can change the look and feel of the portal to better match company brand standards by updating colors or adding a company name and logo.
On top of minor additions and tweaks, you can modify or replace many parts of the default Developer Portal.
Within the Admin Portal, access the default Developer Portal templates by navigating to and selecting .
This view is divided into two main panes. The left pane shows the structure of the various components and templates, and the right pane is used to edit a selected component.
 |
The left pane is filterable by ownership and component type. Click to only show components you own and to show components owned by the system. Components owned by 3scale can be modified, but they cannot be deleted.
To filter the list by component type, select the icons representing the types you wish to see. For example, click the icon of a jigsaw puzzle piece to only show partials.
 |
To edit the components, select one and edit it in the right pane. Test your changes by clicking . Once you are happy with your changes, click to deploy the changes to the Developer Portal.
The Developer Portal uses a templating engine called Liquid. By using a templating engine, each page can reuse elements and features without the need for duplicate code.
When a user visits a page, the server stitches together the parts before sending the response. This makes the portal feel like a cohesive web application rather than a set of disparate pages.
The default Liquid templates in the Developer Portal use standard HTML, JavaScript, and CSS. Liquid syntax enables you to define and reference variables within the pages, as well as create conditional and repeating structures.
The Liquid syntax uses double curly braces ({{ and }}) to indicate parts to be parsed as Liquid syntax and replaced with the results of the expression.
For example, consider the following HTML and Liquid snippet:
<strong>{{ name }}</strong>Assuming the variable name is set to Bob, the resulting HTML would be the following:
<strong>Bob</strong>
The curly brace and percent symbol syntax ({% and %}) indicates parts to be parsed as Liquid syntax, but does not get replaced with anything.
These parts are used to define parts of the template that control the structure, such as loops.
For example, consider the following HTML and Liquid snippet:
<ul>
{% for user in users %}
<li>{{ user.name }}</li>
{% endfor %}
</ul>Assuming users is a list of objects with a name property, the resulting HTML would be an unordered list of the names of users.
Within the Liquid templates, 3scale API Management provides a number of prepopulated variables.
One of these variables is the provider variable, which includes several fields about your company.
A reference of included variables is available by navigating to from the left-side navigation pane.
For example, the provider.logo_url and provider.name are set to the custom logo URL and company name, respectively.
The following HTML and Liquid snippet produces an anchor tag that has the company name and logo.
<a href="/">
<img src="{{ provider.logo_url }}" />
{{ provider.name }}
</a>References
For more information, refer to the Red Hat 3scale API Management Creating the Developer Portal at https://access.redhat.com/documentation/en-us/red_hat_3scale_api_management/2.11/html-single/creating_the_developer_portal
For more information on using Liquid, refer to the Red Hat 3scale API Management Liquid Reference at https://access.redhat.com/documentation/en-us/red_hat_3scale_api_management/2.11/html/liquid_reference/liquid-reference
