Introduction
This article explains how API users can customize the webMethods API Portal according to their organization’s needs/requirements.
Audience
It is assumed that readers of this article know the basics of API Portal configurations Good Knowledge of HTML, CSS and Javascript is desired.
Prerequisites
- Install and configure API portal
- Should have API Administrator or System Role
webMethods API Portal Introduction
webMethods API-Portal helps enterprises get their APIs in front of developers. The idea behind an API portal is to provide a lightweight consumer-orientated UI that is primarily designed to allow a provider to publish the APIs they want to expose to a consumer. At a higher level, it is a Web-based developer portal through which
- Developers can discover APIs
- Developers can test the APIs
- Developers can get commercial and technical usage information about APIs
- Developers can sign up, register for APIs and request API Keys
- API providers can advertise their APIs
- API provider and consumer can collaborate
- Tenant Management
webMethods API Portal is highly customizable. The portal can be completely rebranded to your company’s look and feel. You can change the predefined rendering templates that affect layout, fonts, styles, images, add your own content blocks and style sheets, include java widgets, and so on. You can even rearrange the navigation or include additional links.
Customizing the portal:
In order to demonstrate the various customization and content representation capabilities of the API-Portal, the product by default ships a view called “sagtours” that contains customized pages for SAGTours company. Hence in our tutorial, we will try to create a view called “mysagtours” from the default “apiportal” view that looks similar to “sagtours”.
API-Portal UI Framework:
A view (e.g. mysagtours) contains a set of pages, templates, components and set of other supporting resources. Users will make changes to these files within the view to alter the UI rendering of the API Portal. A page is the logical container of all the elements in a UI page. The page with the help of templates defines the layout of the elements in a UI. A page in turn can contain inner pages and components. The components are operational elements in the UI Eg. UI widgets, buttons, etc.
The webMethods API Portal UI rendering behavior is defined using Views. The list of Views can be found in the Administration UI. Out of the box, the API-Portal comes with two Views - apiportal and sagtours. By default, apiportal configuration is active and the user can select the sagtours by clicking and activating the view.
Create a View:
The Administrator can choose to create his/her own View by selecting the “Create” button in the Views page. While creating the view, the Administrator should base it on the “apiportal” template. By basing it on “apiportal” template, the Administrator already has a fully functional view and he/she can start modifying the new view based on their requirements. For “mysagtours”, we will base it on “apiportal” view.
Activate the View :
Before proceeding to customization, the Administrator will have to activate the new view.
Customize the colors:
The Portal offers basic branding capabilities such as logo, color and font changes through the Administration UI.
Customize the home page:
In order to customize the home page, we need to edit the “mysagtours” view as shown below
On clicking the edit button, we will get to the “Customization” page, where we get to see the pages available for editing
User can click on any page which they want to modify, or they can upload their own CSS.
Backup and Restore:
The views that are created can be backed up and restored. A typical case of backup and restore are:
- To save/preserve the views against the system failures
- Allow third party or internal UI experts to build the customized API-Portal, take a backup and then restore the view into your system
