webMethods API Portal tutorial
Introduction
API Details view is the heart of your API Portal offering. This is where your developers get to know on the various key aspects like:
- different resources offered
- detailed descriptions on how to consume the API
- Sample reference codes
- various nitty-gritty details like query/path parameters to be supplied
- various policy enforcements applied on the API.
It is one of the key responsibilities of the providers to make the documentions as attractive as possible, so that developers can get maximum information out of it. API Portal offers few built in widgets (ex: Rating) by default as part of the details view to get feedback from the developers on the API Content/functionalities offered. Off course, having more different widgets will always be cool. So that you will be able to pick and choose what you want. Being the heart of the API Portal, how cool it would have been if you are able to embed miniature widgets into details view.
Like/Dislike button
As part of this tutorial, we will see a simple integration with like / dislike buttons where your developers will be able to give likes/dislikes to the content displayed over the portal. The widget also provides a instant like / dislike counter as well.
This is just a sample integration for embeding a javascript widget into your details view. you will be able to integrate any such widgets into your portal by referring this integration.
For the tutorial, i am using like button widgets offered by https://likebtn.com/. And we will do the integration by consuming the jQuery API offered by them.
Create new modification set
As usual the first step would be defining our own new modification set with in webMethods API Portal. Please login to API Portal as a admin user, create and activate a new modification set.
Template changes
Edit the API details view and add a placeholder(div element) for adding our like button.
Javascript changes
1. Load Jquery API provided by https://likebtn.com. You can add the list of javascripts to be injected to the Global environment variable PORTAL_CONFIG_SETTINGS.JSCRIPT_URLS.
PORTAL_CONFIG_SETTINGS.JSCRIPT_URLS = [ "https://likebtn.com/bundles/likebtnwebsite/js/jquery/jquery.likebtn.js?nc=.php"];
2. Bind data identifier
Like/Dislike statistics are aggregated based on the data identifier. This must be unique so that you get proper stats for different items(APIs). We are going to bind the data identifier against the unique identifier for API. Below snippet of code gets the hash fragment from the current URL and extracts the unique identifier alone by splitting.
var loadLikeBtn = function (e) {
$('#likeBtn').likebtn({
identifier: location.hash.split('/')[2]
});
};
3. Bind container on specific events
onHashChange
When we switch between different APIs, we need to refresh the like/dislike widget based on the current API in context.
onDocumentReady
When the page is refreshed, we need to bind back the like/dislike widget based on the current API context.
Congratulations!! We are done. If you now move to any API details view you should see a like/dislike buttton.
The modification set used for this tutorial is available here.