webMethods API Portal tutorial
API portal is an essential tool for companies seeking to exploit the utility of Application Programming Interfaces (APIs). An API portal enables companies to easily share information and data across real-time, distributed cloud and mobile applications. By exposing APIs to a broader community of developers, an API portal can help to reach new customers, create new sources of revenue and unlock the business value of existing corporate assets and hence API Portal becomes the face of an digital business initiatives.
Since API Portal is going to be an external world facing identity, offering a highly customizable UI to reflect the brand identity of the organization is a key requirement for API Portal.
As part of this article we will explore the ways to import and use the external fonts with webMethods API Portal. For the purpose of demo, we will use google fonts.
Step 1: Importing a external font:
Web fonts allow designers to use fonts that are not installed on the user's computer. When you have found/bought the font you wish to use, just include the font file on your web server, and it will be automatically downloaded to the user when needed.
The self service customization (SSC) feature with webMethods API Portal provides the complete template responsible for rendering a page to the hands of designers. Designers can include font referces in a template and make it available to all the users of the API Portal.
Where to include font files?
As we all know any page/view in webMethods API Portal includes a header/footer view. Header/Footer views are includes in every single page of webMethods API Portal. We can include the <link> tag provided by Google fonts in either header/footer template html file, so that the font files will be downloaded when the page gets render.
For the demo case here, i am going to include "Lobster" font for all th headers and "Pacifico" font for all normal text in API Portal. I am going to add the <link> tag as part of my footer template.
| <link href="https://fonts.googleapis.com/css?family=Lobster|Pacifico" rel="stylesheet"> |
Step 2: Using the imported font:
Once the fonts are imported succesfully using above step, we just need to configure to use the imported fonts. This can be easily done with self service customization theming UI. User can specify the exact font name to be used for
- title font
- content text font
If you save and activate the modification set you will have Portal UI which will make use of imported fonts. you can download the modification set used in this example here.
