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:
- Install the Jive Node SDK on your development system. Installation instructions are described at Getting Started > Installing the Jive Node SDK.
- 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.
- Note: In this example the Jive server must be able to communicate with your development system.
- You must install and configure Jive Anywhere for your Jive server.
- Install: Visit the header dropdown, select Tools and scroll to bottom to install Jive Anywhere for your desired web browser.
- 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:
- Browse to an empty directory where you want your code for this tutorial to reside.
- Create a cartridge sample using the Jive Node SDK:
jive-sdk create cartridge
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. - Update all node package dependencies.
npm update
- 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.
- 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
- Since a cartridge does not require a middleware service, you can simply run
- Publish your Cartridge via the Admin Console > Settings > Jive Anywhere > Cartridges
- Once the add-on is installed, visit google.com and search for any search term(s) and click Google Search.
- Click on the Jive Anywhere sidebar (Note: The Active Cartridge Reference should be our google-search-results cartridge)
- Click the "Start a new discussion" button, and notice the preview render a list of all detected search results (automatically)
- 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.
- 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.
File or Folder | Description |
---|---|
app.js | Node service launcher. (optional, in a cartridge only add-on) |
extension_src | Auto-generated add-on package source. |
extension.zip | Auto-generated add-on package zip. |
jiveclientconfiguration.json | Service configuration information. See jiveclientconfiguration.json - Definition for additional details.
|
node_modules | Auto-generated information about metadata and dependencies. (not used in a cartridge only add-on) |
package.json | Package metadata and dependencies. (not used in a cartridge only add-on) |
public | Static assets. (optional, in a cartridge only add-on) |
cartridges/google-search-results/definition.json | This is the add-on definition file that defines the name and URL pattern used for this cartridge. |
cartridges/google-search-results/content/GoogleSearchResultsPageDataTemplate.html | The HTML file cartridges/google-search-results/content/GoogleSearchResultsPageDataTemplate.html is used when generating the content preview for the discussion. |
cartridges/google-search-results/content/icon.png | This icon used |
cartridges/google-search-results/content/module.js | This JavaScript file cartridges/google-search-results/content/module.js is considered the main file in this cartridge. |
cartridges/google-search-results/content/pagescript.js | The JavaScript file cartridges/google-search-results/content/pagescript.js is used to inject custom JavaScript into the active page DOM. In this case, we are using it to grab information about the page being viewed and pass back pieces of information via a JSON object back to the cartridge for further processing. |
Extending the Example
Now that you understand the basic organization of the code, let's extend the example a bit more:
- 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();
- 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 ...
- Modify the GoogleSearchResultsPageDataTemplate.html to output the new variable from the changes in Step #2 above.
</h3> <p>{{>foo}}</p> </div> <table
- Re-bundle your Add-On, and re-install it to your Jive server, and publish the cartridge via the Admin Console. (see above)
- 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.
Comments