Getting Started > Using Tile Actions with the Jive Node SDK

Version 20

    In this Getting Started tutorial, we will extend the Jive Node SDK list tile tutorial to learn about tile actions. A tile action is a link in a tile that, when clicked, can provide a user with an embedded experience hosted by your own service. You can send context data back to your service from the tile and your service can use Jive's Open Social API to interact with your Jive community. Alternatively, you can use a tile action to send the user to a URL outside of the Jive community. A tile action can be associated with specific elements within a tile (like for a line item within a list or a table), or it can be associated with a general action link at the bottom of a tile. In this example, we will create both types of actions.

    tile-action-2.png

    The instructions below should take under 15 minutes.




    Prerequisites


    This tutorial requires that you have a basic list tile up and running. If you have not done so already, go through the "Instructions" section of the list tile tutorial ( Getting Started > Creating a List Tile with the Jive Node SDK). You do not need to run through the steps in the "Extending the Example" section, but it will not affect this tutorial if you go through that section as well.

     

    Instructions

     

    To create a tile action:

    1. Update the JSON push data. We first want to change the JSON content that gets pushed to our tile. Open /tiles/sampletile-list/backend/services.js. Change the JSON content of the getFormattedData function to this:

      function getFormattedData(count) {

          return {

              data: {

                  "title": "Simple Tile Action",

                  "contents": [

                      {

                          "text": "Tile Action Test",

                          "icon": "https://community.jivesoftware.com/servlet/JiveServlet/showImage/102-99994-1-1023036/j.png",

                          "action": {

                              "text": "Action",

                              "url": jive.service.options['clientUrl'] + '/simpletile-list/action.html',

                              "context": {

                                  "counter": count,

                                  "payload": "sample data"

                              }

                          }

                      }

                  ],

                  "config": {

                      "listStyle": "contentList"

                  },

                  "action": {

                      "text": "Visit Tutorial",

                      "url": "https://community.jivesoftware.com/docs/DOC-129789"

                  }

              }

          };

      }

      In this example, you can see two types of tile actions. The tile action used with a specific element in the list is an embedded experience:

      "action": {

          "text": "Action",

          "url": jive.service.options['clientUrl'] + '/sampletile-list/action.html',

          "context": {

              "counter": count,

              "payload": "sample data"

          }

      }

      This code tells Jive to request a file named "action.html" in our service. (We use jive.service.options['clientUrl'] to get the URL of our service.) The data within the context block is passed back to our service. This illustrates how you can send information back to your service from the tile.
      The second tile action (for the "Visit Tutorial" link) simply sends the user to this tutorial page:

      "action": {

          "text": "Visit Tutorial",

          "url": "https://community.jivesoftware.com/docs/DOC-129789"

      }

      This illustrates how you can use a tile action to send the user to an external URL.

    2. Update action.html. Now let's create the action.html file we specified in the previous step so that it contains our embedded tile action experience. Replace the file named /tiles/sampletile-list/public/action.html with the content below. This file contains the embedded experience you will see when clicking on an element in the list tile.

      <html>

      <head>

         <link rel="stylesheet" type="text/css" href="{{{host}}}/stylesheets/bootstrap-30.min.css">

         <link rel="stylesheet" type="text/css" href="{{{host}}}/stylesheets/style.css">

         <script src="{{{host}}}/javascripts/jquery-1.8.3.js"></script>

         <script src="{{{host}}}/javascripts/coreapi-context-resolver-v3.js"></script>

         <script src="{{{host}}}/javascripts/oauth2client.js"></script>

         <script src="{{{host}}}/javascripts/basicOauthFlow.js"></script>

         <script>

           jive.tile.onOpen(function (config, options) {

               gadgets.window.adjustHeight();

               $("#context").text(JSON.stringify(config));

               $("#btn_submit").click(function () {

                   jive.tile.close(null, {});

               });

               $("#btn_discuss").click(function () {

                   var discussion = {

                       content: {

                          type: 'text/html',

                           text: '<body><p>'+ $("#discussion").val() + '</p></body>'

                       },

                       subject: $("#subject").val()

                   };

                   osapi.jive.corev3.discussions.create(discussion).execute(function (response) {

                       console.log(response);

                   });

                   alert('Discussion created with subject: '+$("#subject").val());

                   jive.tile.close(null, {});

               });

           });

         </script>

      </head>

       

      <body>

         <div>

           <p>This is my action page.</p>

           <p>Here is my context information:<br /><label id="context">placeholder content</label></p>

           Subject:<br />
           <textarea type="textarea" id="subject" rows="1" cols="25">Placeholder Discussion Name</textarea>

           <br /><br />

           Body:<br />
           <textarea type="textarea" id="discussion" rows="4" cols="50">Placeholder discussion body.</textarea>

           <br /><br />

           <button class="btw btn-primary" id="btn_discuss">Discuss</button>

           <button class="btw btn-primary" id="btn_submit">Exit</button>

         </div>

      </body>

      </html>

      This example illustrates a few common uses for a tile action. For one, it extracts context information sent back from Jive. The jive.tile.onOpen function passes this data to you using the config variable:
      jive.tile.onOpen(function (config, options) {
          ...
          $("#context").text(JSON.stringify(config));
          ...
      }
      This example also illustrates how you can use the Jive Open Social API to interact with your Jive community. In this case, we're creating a discussion using the currently logged-in user and the content specified in the text areas:
      var discussion = {
          content: {
              type: 'text/html',
              text: '<body><p>'+ $("#discussion").val() + '</p></body>'
          },
          subject: $("#subject").val()
      };
      osapi.jive.corev3.discussions.create(discussion).execute(function (response) {

          console.log(response);
      });
    3. Now you can restart your service.
      node app.js

     

    When new tile data gets pushed to Jive (every 10 seconds by default), your tile should now look like this:

    tile-action-1.png

    If you click the "Tile Action Test" link, you should see the embedded experience:

    tile-action-2.png

    If you click the Discuss button, a discussion is created in your community with the specified subject and body. If you click the Exit button, the tile action page closes.

     

    If you click the "Visit Tutorial" link at the bottom of the tile, you should be redirected to this tutorial page.

     

    At this point, you should be able to play around with the example to see what else you can do with tile actions and the Jive Node SDK. For instance, you can send a message back to your service using the information at How to POST to a Service from a Tile.

     

    For More Information