Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

How to Develop an OpenSocial Widget on top of SAP HANA Cloud Portal with Site Context Feature

Former Member
‎01-14-2013 1:44 PM

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>
1 Comment
Popular Blog Posts