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
Showing results for 
Search instead for 
Did you mean: 
Former Member

SAP Jam is the social collaboration software from SAP. While more and more customers use it, the request comes up to customize Jam to individual needs of a company. For this purpose, with the current release (1502), it´s possible to easily integrate OpenSocial applications into Jam to individualize it. During my one-week internship in the Jam team I built a simple OpenSocial gadget which expands the profile data of users by adding expertises. This document shows my first steps of developing an OpenSocial gadget and gives a short introduction of how to get started with an OpenSocial gadget.

Structure

OpenSocial apps are specified in XML. The <Module> tag indicates that the file contains a gadget. In the <ModulePrefs> information about the application like title, author or height can be defined. <Content type="html"> indicates that the content of the gadget is HTML. This content is defined in <![CDATA[ … ]]>. It can contain HTML, CSS or JavaScript. You can see a simple example of a hello world gadget below.

<?xml version="1.0" encoding="UTF-8" ?>

<Module>

                <ModulePrefs title="Hello world gadget">

                </ModulePrefs>

                <Content type="html">

                               <![CDATA[

                                               Hello world!

                               ]]>

                </Content>

</Module>

To implement a gadget no special software is needed, a simple texteditor is sufficient. After writing the XML, the file has to be uploaded on a public web server, I used https://infotomb.com/. Later, only the URL of the gadget will be needed to include it into Jam.

Including in SAP Jam

Login into your SAP Jam instance, navigate to Admin page and open the OpenSocial gadgets page in the menu on the left.


Now a list of all OpenSocial gadgets which are available can be seen. On top of the list in the right corner there is the link “Add OpenSocial Gadget”.

First, the URL of the uploaded file has to be inserted. Afterwards it can be decided whether the gadget should be enabled or not and if it should be a content or a profile gadget. Content gadgets can be added to a group's content section by anyone in the company with the appropriate privileges. Profile gadgets appear on the profile of each member of the company automatically.

Afterwards by clicking at “Refresh” we can see further information about the gadget and in the lower part a Preview of it (if the gadget is enabled).

The gadget information and preview of the ‘hello world gadget’ from above looks similar to the following picture:

Further expansion of the gadget

As said before, this gadget should be a profile extension to add special expertises of a user. Actually the functionality of the gadget has not been fully completed, the storage of inserted values is missing. Nonetheless, it shows how to generate a simple OpenSocial gadget and how to read out information from Jam with it.

First, I wanted to welcome the user with his or her name. Therefore I had to add a feature to the module preferences <Require feature="osapi"/>.  Afterwards, I needed to write some HTML code were the name should be displayed, for example the following:

<div id="content">

        <div id="greeting"> Hello <span id="current_user_id"> </span>

        </div>

</div>


In addition a JavaScript function to get the name and write it into the DOM has to be written. This function could for example be the following:

<script type="text/javascript">

        function init() {

            osapi.people.getViewer().execute(function(viewerData) {

            if (!viewerData.error) {

              var viewerDiv = document.getElementById('current_user_id');

              viewerDiv.innerHTML = viewerData.displayName;

            };

          });

        }

</script>

At least an onload handler has to be registered. This handler is executed when the gadget loads and calls the init function.

                gadgets.util.registerOnLoadHandler(init);

Now the code looks similar to the code below. Only the highlighted lines were edited compared to the hello world code.  By uploading it and including it into Jam, the preview should show “Hello <your name>”.

<?xml version="1.0" encoding="UTF-8" ?>

<Module>

  <ModulePrefs title="Hello, world!" height="400">

    <Require feature="osapi"/>

  </ModulePrefs>

  <Content type="html">

    <![CDATA[

      <script type="text/javascript">

        function init() {

            osapi.people.getViewer().execute(function(viewerData) {

            if (!viewerData.error) {

              var viewerDiv = document.getElementById('current_user_id');

              viewerDiv.innerHTML = viewerData.displayName;

            };

          });

        }

        gadgets.util.registerOnLoadHandler(init);

      </script>

      <div id="content">

        <div id="greeting"> Hello <span id="current_user_id"> </span>

        </div>

      </div>

    ]]>

  </Content>

</Module>

After learning how to read out data, I wanted to offer a form to insert special expertises. Therefor I write the following HTML code:

<div id="editForm">

          <br>

          <form action="#">

            <div id="sector">

              <label>sector: </label>

              <select name="sectorInput" size="1">

                <option> sector 1</option>

                <option> sector 2</option>

                <option> sector 3</option>

                <option> sector 4</option>

                <option> sector 5</option>

              </select>

              knowledge: low

              <input type="radio" name="sectorRating" value="0">

              <input type="radio" name="sectorRating" value="1">

              <input type="radio" name="sectorRating" value="2">

              <input type="radio" name="sectorRating" value="3">

              <input type="radio" name="sectorRating" value="4"> high

            </div>

            <br>

            <div id="country">

              <label>country: </label>

              <select name="countryInput" size="1">

                <option> country1</option>

                <option> country2</option>

                <option> country3</option>

                <option> country4</option>

                <option> country5</option>

              </select>

              knowledge: low

              <input type="radio" name="countryRating" value="0">

              <input type="radio" name="countryRating" value="1">

              <input type="radio" name="countryRating" value="2">

              <input type="radio" name="countryRating" value="3">

              <input type="radio" name="countryRating" value="4"> high

            </div>

            <br>

            <div id="project">

              <label>project: </label>

              <input type="text" name="projectInput" size="50">

            </div>

            <br>

            <div id="specialist knowledge">

              <label>specialist knowledge:</label>

              <input type="text" name="specKnowledgeInput" size="50">

            </div>

            <br>

            <br>

            <input type="button" value="Save" onclick="save()"/>

          </form>

To format the HTML I added some CSS lines:

    <style type="text/css">

      label { display: inline-block; width: 100px; }

      select { display: inline-block; width: 100px; }

    </style>

After defining the content, I wrote a further JavaScript function to handle the button click. This save function reads out the values of the form and opens a new message which indicates that the values were saved.

At first the minimessage feature has to be added to the module preferences.

                <Require feature="minimessage"/>

Afterwards the save function had to be defined. The inserted values of the form has to be selected and a message has to be generated. In future work, these values has to be stored for later use.

function save(){

        var sector=document.getElementsByName('sectorInput')[0].value;

        var country=document.getElementsByName('countryInput'[0]).value;

        var project=document.getElementsByName('projectInput')[0].value;

        var specKnowledge=document.getElementsByName('specKnowledgeInput')[0].value;

       // <here the values has to be stored for later usage>

        var saveMessage = new gadgets.MiniMessage(__MODULE_ID__);

        saveMessage.createDismissibleMessage("Your expertises were saved");

}

Finally, here you can find the whole code of the gadget:

<?xml version="1.0" encoding="UTF-8" ?>

<Module>

  <ModulePrefs title=" Hello world gadget" height="400">

    <Require feature="osapi"/>

    <Require feature="minimessage"/>

  </ModulePrefs>

  <Content type="html">

    <![CDATA[

      <script type="text/javascript">

        function save(){

          var sector=document.getElementsByName('sectorInput')[0].value;

          var country=document.getElementsByName('countryInput'[0]).value;

          var project=document.getElementsByName('projectInput')[0].value;

          var specKnowledge=document.getElementsByName('specKnowledgeInput')[0].value;

          var saveMessage = new gadgets.MiniMessage(__MODULE_ID__);

          saveMessage.createDismissibleMessage("Your expertises were saved");

        }

        function init() {

          osapi.people.getViewer().execute(function(viewerData) {

            if (!viewerData.error) {

              var viewerDiv = document.getElementById('current_user_id');

              viewerDiv.innerHTML = viewerData.displayName;

            };

          });

        }

        gadgets.util.registerOnLoadHandler(init);

      </script>

     

      <style type="text/css">

        label { display: inline-block; width: 100px; }

        select { display: inline-block; width: 100px; }

      </style>

     

      <div id="content">

        <div id="greeting"> Hello <span id="current_user_id"> </span>

        </div>

        <div id="editForm">

                                                                              <br>

          <form action="#">

            <div id="sector">

              <label>sector: </label>

              <select name="sectorInput" size="1">

                <option> sector 1</option>

                <option> sector 2</option>

                <option> sector 3</option>

                <option> sector 4</option>

                <option> sector 5</option>

              </select>

              knowledge: low

              <input type="radio" name="sectorRating" value="0">

              <input type="radio" name="sectorRating" value="1">

              <input type="radio" name="sectorRating" value="2">

              <input type="radio" name="sectorRating" value="3">

              <input type="radio" name="sectorRating" value="4"> high

            </div>

            <br>

            <div id="country">

              <label>country: </label>

              <select name="countryInput" size="1">

                <option> country1</option>

                <option> country2</option>

                <option> country3</option>

                <option> country4</option>

                <option> country5</option>

              </select>

              knowledge: low

              <input type="radio" name="countryRating" value="0">

              <input type="radio" name="countryRating" value="1">

              <input type="radio" name="countryRating" value="2">

              <input type="radio" name="countryRating" value="3">

              <input type="radio" name="countryRating" value="4"> high

            </div>

            <br>

            <div id="project">

              <label>project: </label>

              <input type="text" name="projectInput" size="50">

            </div>

            <br>

            <div id="specialist knowledge">

              <label>specialist knowledge:</label>

              <input type="text" name="specKnowledgeInput" size="50">

            </div>

            <br>

            <br>

            <input type="button" value="Save" onclick="save()"/>

          </form>

                                               </div>

      </div>

    ]]>

  </Content>

</Module>

That’s the current status of my first gadget after only a few days of studying and testing. Maybe it can help some of you to reduce fear of contact with Open Social gadgets. I think with basic knowledge of XML, HTML, CSS and JavaScript it is not very difficult to build also more complex gadgets. Further information can be found at http://help.sap.com/download/documentation/sapjam/developer/index.html#opensocial/concepts/intro.htm...

4 Comments