Introduction
A classic use-case for cloud applications are extension scenarios, wherein the cloud application provides additional functionality to an already existing application. In such a setup the cloud extension may simply expose backend data of on-premise systems to the outside world (acting as public API provider) or provide a web-based user interface to make the application accessible to a broader set of users or devices (internet of things). In case the to-be-extended application already has a user interface though the requirement comes up to "seamlessly" integrate the old parts and the new into a holistic experience (composition pattern.)
In today's blog post I want to touch upon this very scenario and demonstrate how one can develop an extension to an existing SAP UI5 application and integrate the two into a single web site via the SAP HANA Cloud Portal. Best of all, if the original application has been developed with extensibility in mind such a composition view can be accomplished without even touching the original code base (spells modification-free extension.)
Example scenario
Guess it helps to have a crisp example at hand to better illustrate and understand the concept, so why not use the ESPM webshop extension scenario as a reference? This scenario is based upon the idea of extending an existing web shop application with functionality to allow customers to read and write product reviews.
So, on one hand we got a web shop application as seen everywhere on the web, on the other we got an extension that provides the data model, functionality and the matching user interface to read and write product reviews. Now let's see how we can integrate the two into a single web site.
SAP HANA Cloud Portal
Exposing a SAP UI5 application as a portal widget is straight forward thanks to the OpenSocial features of the SAP HANA Cloud Portal. All there is to it is to create a portal widget XML artifact and create the corresponding widget as documented here.
In its simplest form such an XML artifact may look as follows:
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="SAPUI5">
<Require feature="sap-xhrwrapper" />
</ModulePrefs>
<Content type="html" href="index..html">
</Content>
</Module>As such, all we need to do is to define both applications (original application and extension) as portal widgets and place them both on a single portal site as illustrated below:
Obviously, we would need to establish some sort of communication between the two widgets. For this purpose we can use the so-called Site Context (Pub-Sub) API of the Portal. tomer.gabbai from the portal team wrote a great tutorial blog (including example code) about this feature a while ago:
How to Develop an OpenSocial Widget on top of SAP HANA Cloud Portal with Site Context Feature
In a nutshell, it's just an eventing mechanism: one widget publishes events that other widgets can subscribe to. In our example scenario, such an event would include the ID of the currently displayed product. With this information the review extension could load all matching reviews and display them.
With a cherry on top
As you may recall I mentioned something along the lines of modification-free extensions at the beginning, so let's elaborate on that. In order to subscribe to an event, someone must publish it in the first place. Of course, the trigger to publish an event needs to coded somewhere within the original application. Fortunately, the portal specific publish-subscribe handling can be added to a dedicated index file (e.g. "index_portal.html"), which contains the content of the original "index.html" of the SAP UI5 application plus the required event dispatching coding.
Still, there has to be some code in the original application though that triggers the event and provides the required context information (in our example: the product ID needs to be published when the user enters the product details view.) This is what I meant by refereeing to applications "being developed with extensibility in mind". Good software architecture principles promote the usage of modular design and loose coupling between components.
SAP UI5 is no exception and the best practices document promotes using the EventBus for inter-component communication. Consequently, if the original app has been developed using this technique (the ESPM web shop application does!) then we are all set! All we need to do is to register a subscriber/listener to EventBus events and dispatch them via the portal eventing mechanism and vice versa. Now, isn't that sweet?!?
PS: For those of you interested in seeing these concepts in action and going to TechEd please consider registering for session CD265 "End-2-End Developer Experience with SAP HANA Cloud Platform and SAPUI5." :wink: </plug>
- SAP Managed Tags:
10 Comments
