When portlets need to communicate between each other without involving any server-side logic, client side Inter Portlet Communication[IPC] can help for quicker interaction.
Handling IPC at client side provides flexibility to refresh only the portlets / components involved in the communication rather than a full portal page refresh.
AmpliyfJS – Is a JavaScript component library providing a set of components designed to solve common web application problems including ajax request management, client side component communication, and client side browser and mobile device storage. Refer: http://amplifyjs.com/
This blog captures the details how amplifyJS can be used to achieve a publish/subscribe mechanism between the portlets of same page in IBM WebSphere Portal 8.0.
Steps to implement publish/subscribe form of IPC using amplifyJS:
- Create publisher and subscriber portlets
- Add amplify js library in both the portlets
- Construct the json object to be passed on to the subscribers[subscriber portlets]
- Use the amplify.publish method to publish the json data in publisher portlet .
Syntax ref: http://amplifyjs.com/api/pubsub/#subscribeandpublishwithdata
amplify.publish( string topic, dataset)
topic : Name of the message to subscribe
[dataset] : objects passed as parameters in the message. Data objects can be zero to many.
- In subscriber portlet, use amplify.subscribe to subscribe to the specific topic/message/event.
Syntax ref: http://amplifyjs.com/api/pubsub/#subscribeandpublishwithdata
amplify.subscribe(string topic, object context, function callback, number priority )
topic : Name of the message to subscribe
[context]: context set to a jQuery object
callback: Function to invoke when the message is published
[priority] – Priority relative to other subscriptions for the same message. Lower values have higher priority. Default is 10
- Compile, build and deploy the portlets.
- Create a portal page and assign both the portlets in the page.
- Open the portal page where pub/sub portlets are available.
- Trigger the event in publisher portlet which will be received and corresponding action will be triggered in subscriber portlet.
- All the actions will be at the client side without complete portal page refresh making it pure client oriented solution.
Example :
Case :The publisher portlet tries to create an employee json object with the given name and publish this object to the subscriber portlets. The subscriber portlet listens to the subscribed event and triggers the call back function.
Data format : JSON Object
Data Publishing snippet
<script>
var EMPLOYEE = {
create : function (firstName) {
var employee = {
firstName: firstName
};
amplify.publish(“employee-created”, employee );
console.log(“hi am published”);
return employee;
}
};
$(“#create-employee”).click(function () {
var form = $(“#employee-form”);
EMPLOYEE.create(
form.find(“[name=firstName]”).val()
);
form.find(“input”).val(“”);
});
</script>
Data Subscribing snippet
<script>
amplify.subscribe(“employee-created”, function (employee) {
var form = $(“#myform”);
form.find(“input”).val(employee.firstName);
alert(“successfully subscribed”);
});
</script>
