Skip to Content

Hi,

If you are kind of a newbie in developing OpenSocial applications, and you want to develop them on top of Cloud Portal, this post is for you!

The following web cast will guide you how to develop an OpenSocial widget and consume it with SAP HANA Cloud Portal.

As a representative example, I chose the Site Context feature in order to get you started.

So, just play the video below and do your first steps. Code snippets are attached below in this post.

Cheers,

Tomer


Publisher Code

<?xml version="1.0" encoding="UTF-8"?>
<Module>
    <ModulePrefs title="Sample PubSub Publisher" height="250">
        <Require feature="sap-context"/>
    </ModulePrefs>
    <Content type="html">
        <![CDATA[
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
           <script language="javascript" type="text/javascript">
               function publish(a, b) {
            gadgets.sapcontext.publish(a, b);
        }
        function ButtonPublish_onclick() {
          var key = document.getElementById('name').value;
           var val = document.getElementById('location').value;
           if (key.length > 0  && val.length > 0) {
                               publish("businessName", document.getElementById('name').value);
                               publish("businessLocation", document.getElementById('location').value);
                               document.getElementById('comments').innerHTML= "";
           } else {
                document.getElementById('comments').innerHTML= "Please fill require fields";
           }
        }
        function onloadState() {
            document.getElementById('ButtonPublish').disabled = false;
        }
    </script>
    <style type="text/css">
        a.button{
            float:none;
            font-size:110%;
            font-weight:bold;
            border-top:1px solid #999;
            border-left:1px solid #999;
            border-right:1px solid #333;
            border-bottom:1px solid #333;
            color:#333;
            width:auto;
        }
        a.button:hover{
            border-top:1px solid #333;
            border-left:1px solid #333;
            border-right:1px solid #999;
            border-bottom:1px solid #999;
            color:#333;
        }
        a.button span{
            background:#d4d0c8 repeat-x;
            float:none;
            line-height:24px;
            height:24px;
            padding:0 10px;
            border-right:1px solid #777;
            border-bottom:1px solid #777;
        }
        a.button:hover span{
            border:none;
            border-top:1px solid #777;
            border-left:1px solid #777;
            background:#d4d0c8 repeat-x;
            cursor:pointer;
        }
    </style>
</head>
<body id= "main" bgcolor="white" style="font-family:Arial;" onload="onloadState()">
    <label style="font-weight:bold;font-size:24px;">Business information</label><br/>
    <label style="font-weight:bold;color:#777777;font-size:13px;">Get business details and location directly to you OnDemand Portal site</label><hr><br/>
    <label style="font-weight:bold;color:#555555">    Name: </label>
        <input id="name" type="text" /><br/><br/>
    <label style="font-weight: bold;color:#555555">    Location: </label>
        <input id="location" type="text" /><br/><br/><br/>
    <a id="ButtonPublish" onclick="ButtonPublish_onclick()" align="center" class="button"><span>Enter</span></a>
    <br/><br/>
    <div id="comments" style="color:#777777"></div>
</body>
</html>
   ]]>
    </Content>
</Module>

GoogleMaps Subscriber

<?xml version="1.0" encoding="UTF-8"?>
<Module>
    <ModulePrefs title="Google Maps Subscriber" height="250">
        <Require feature="sap-context" />
    </ModulePrefs>
    <Content type="html">
        <![CDATA[
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
          <script language="JavaScript">
    var subId;
    var isSub = false;
    var googleMapUrlPrefix = "http://maps.google.com/maps?z=7&output=embed&t=m&q=";
    function updateMap (topic, context) {
       document.getElementById('mapIframe').src = googleMapUrlPrefix + (context.getPropertyByKey("businessLocation")[0] || "Germany");
    }
          /*
           * Subscribe to Site Context using sap-context feature.
           */
    function subscribe() {
        subId = gadgets.sapcontext.subscribe(updateMap);
    }
          /*
           * Unsubscribe to Site Context using sap-context feature.
           */
    function unsubscribe() {
        gadgets.sapcontext.unsubscribe(subId);
        isSub = false;
    }
</script>
</head>
<body  bgcolor="white" style="font-family:Arial;">
                    <div id="googleMap" style="height:100%; width:100%">
                        <iframe id="mapIframe" frameBorder="0" src="http://maps.google.com/maps?z=8&t=m&output=embed&q=israel" style="height:100%; width:100%"></iframe>
        </div>
        <script language="javascript" type="text/javascript">
                              gadgets.sapcontext.registerOnContextLoad(subscribe);
                    </script>
          </body>
</html>
]]>
    </Content>
</Module>

BingSearch Subscriber

<?xml version="1.0" encoding="UTF-8"?>
<Module>
    <ModulePrefs title="Google Maps Subscriber" height="250">
        <Require feature="pubsub-2" />
        <Require feature="sap-context" />
    </ModulePrefs>
    <Content type="html">
        <![CDATA[
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
          <script language="JavaScript">
    var subId;
    var isSub = false;
    var bingUrlPrefix = "http://www.bing.com/search?q=";
    function updateSearch (topic, context) {
       document.getElementById('bingIframe').src = bingUrlPrefix + (context.getPropertyByKey("businessName")[0] || "SAP");
    }
          /*
           * Subscribe to Site Context using sap-context feature.
           */
    function subscribe() {
        subId = gadgets.sapcontext.subscribe(updateSearch);
    }
          /*
           * Unsubscribe to Site Context using sap-context feature.
           */
    function unsubscribe() {
        gadgets.sapcontext.unsubscribe(subId);
        isSub = false;
    }
</script>
</head>
<body  bgcolor="white" style="font-family:Arial;">
                    <div id="googleMap" style="height:100%; width:100%">
                        <iframe id="bingIframe" frameBorder="0" src="http://www.bing.com/search?q=SAP" style="height:100%; width:100%"></iframe>
        </div>
        <script language="javascript" type="text/javascript">
                              gadgets.sapcontext.registerOnContextLoad(subscribe);
                    </script>
          </body>
</html>
]]>
    </Content>
</Module>
To report this post you need to login first.

1 Comment

You must be Logged on to comment or reply to a post.

Leave a Reply