In this Getting Started tutorial, we will use the Jive Node SDK to create a simple Jive Anywhere cartridge for Google to easily capture search results and place them into a Jive discussion for collaboration.  The instructions below should take under 15 minutes. The extended example should take another 15 minutes.

Prerequisites

Before running this tutorial:

1. Install the Jive Node SDK on your development system. Installation instructions are described at Getting Started > Installing the Jive Node SDK.
2. You need to be able to install add-ons with the Jive server used for this tutorial. This will require you to be an administrator, a community manager, or have the sandbox property turned on (jive.extension.sandbox.enabled) to enable the installation of add-ons for personal use.
3. Note:  In this example the Jive server must be able to communicate with your development system.
4. You must install and configure Jive Anywhere for your Jive server.
   1. Install: Visit the header dropdown, select Tools and scroll to bottom to install Jive Anywhere for your desired web browser.
   2. Configure: Under the Gear icon, click Settings and then enter your Jive Instance URL in the provided field under the Accounts tab.  Then click Connect.

Instructions

To create a Jive Anywhere cartridge:

1. Browse to an empty directory where you want your code for this tutorial to reside.
2. Create a cartridge sample using the Jive Node SDK:

   jive-sdk create cartridge

   This creates a project with all the code necessary to build a simple cartridge. The provided sample cartridge is a basic cartridge that will grab search results from Google.
   
   Note:  As of 05/19/2014 some users have reported an error message similar to "ENOENT, open' ... if this occurs, simply ignore and continue ... we are looking into this issue.
   
   
3. Update all node package dependencies.
   

   npm update

4. To test what is provided out of the box, follow instructions for deploying your project at Getting Started > Deploying a Jive Node SDK Project as an Add-On.
   1. Since a cartridge does not require a middleware service, you can simply run
      

      node app.js

      to build your cartridge to generate the necessary extension.zip
5. Publish your Cartridge via the Admin Console > Settings > Jive Anywhere > Cartridges
   
6. Once the add-on is installed, visit google.com and search for any search term(s) and click Google Search.
   
7. Click on the Jive Anywhere sidebar (Note: The Active Cartridge Reference should be our google-search-results cartridge)
   
8. Click the "Start a new discussion" button, and notice the preview render a list of all detected search results (automatically)
   
9. Select a place to store this discussion ("Post in:") and enter in some comments and possibly @mentions in the text area below.  The click Post.
10. To view the thread, simply re-click on the Jive Anywhere sidebar, click on the discussion and interact with it from within Jive Anywhere
    • Note:  If you click on the discussion title, you will be taken to the native Jive instance to read the conversation.

Code Organization

In order to better understand (and to extend) this example, let's first discuss what is provided in this example. The table below describes the folder structure in more detail.

Extending the Example

Now that you understand the basic organization of the code, let's extend the example a bit more:

1. Add the following code to the bottom of the pagescript.js to set the background color of all Google Search Results to #ffff00 (or Yellow)

    

   
   function decorateGoogleSearchResults() {
       /*** LOAD RESULTS ***/
       $('li.g').each(function() {
       var result = {};
       result.title = $(this).find('h3.r a').text();
       result.url = $(this).find('h3.r a').attr('href');
       result.description = $(this).find('span.st').text();
   
       if (result.title && result.url) {
          $(this).css('background-color','#ffff00');
       } // end if
     });
   };
   
   decorateGoogleSearchResults();
   
   
   
   
   
   
   

    

2. Update the pagescript.js > getPreviewData function to include a new variable into the JSON payload (perhaps something from <META>, Url Parameters or JS environment variables.

    

   // ~Line 16
   var result = {};
   result.foo = 'bar';
   // .... code omitted ...
   
   
   
   
   
   

    

3. Modify the GoogleSearchResultsPageDataTemplate.html to output the new variable from the changes in Step #2 above.

    

   </h3>
      <p>{{>foo}}</p>
   </div>
   <table
   
   
   
   
   
   

    

4. Re-bundle your Add-On, and re-install it to your Jive server, and publish the cartridge via the Admin Console. (see above)
5. Close your web browser and repeat the steps on google.com, search for any search term(s) and click Jive Anywhere sidebar (see above)

At this point, you should be able to play around with the example to see what else you can do with the Jive Anywhere cartridge, but learn more about what is possible check out all the Developer Resources and be sure to really read the Jive Anywhere 2.1 SDK.  Happy coding!

For More Information

• To better understand the communication between your service and the Jive server, refer to Cartridges (Jive Anywhere) - Developer Resources
  
• For other Jive Node SDK tutorials, refer to Getting Started with the Jive Node SDK.