Skip navigation

developer-conference-gradient.png

 

Call for Speakers

  • Have you built a cool Jive integration?
  • Is that integration using the Jive add-on framework?
  • Are you willing to share some developer tips/tricks and lessons learned with fellow Jive developers?
  • Are you interested in getting a FREE pass to JiveWorld16 Developer Conference (includes all JiveWorld16 amenities)?

 

If you answered, Yes, to all of these questions then we strongly recommend that you take a moment to share your speaking idea with us.

 

Recommended Topics:

  • Integrations into external systems using the REST API, Apps, Tiles, External Storage and Mobile frameworks. (30-50 minutes worth of content)
  • Quick developer hacks using the new Simple Stream Integrations, Custom View Tiles or Custom HTML Tiles capabilities in the Jive platform (15-20 minutes of content)
    • Note:  It's not too late to try out these new technologies and submit a topic for consideration.  Solutions must be functional by February 2016 (production deployment, optional) and POC capable by October 1st.
  • Building integrations with the Jive add-on framework in languages where there is currently no SDK or limited tooling, such as: Ruby, PHP, Python, Go, .NET, etc.. (20-40 minutes worth of content)
  • Development of Jive solutions using iPaaS platforms like Informatica, Boomi, Mulesoft and others. (20-40 minutes worth of content)

 

Deadline:  Monday, September 14, 2015

See the speaker submission form for more details.  

https://jiveworld.jivesoftware.com/speakers

 

Conference Details

Check out the Developers section on the JiveWorld16 website to learn more about our agenda, including:

  • JiveWorld16 Tri-Hackathon new - A new twist on the hackathon experience that is guaranteed to energize your inner hacker
  • Jive Developer Keynote - Kicking off JiveWorld16 Developer Conference off with another inspirational keynote!  See last years.
  • 12+ Jive Developer Sessions - Learn from expert Jive customers, partners and engineers on the latest capabilities in Jive and proven success stories.
  • Jive Developer Town Hallnew - Learn from product and engineering leadership about the future of the Jive platform

 

For more information, please see:

https://jiveworld.jivesoftware.com/developers/ or Register Today and save $300 with the Early Bird Discount through October 31st!

This is step-by-step tutorial on how to use the Simple Stream Integration Builder to create a simple activity stream integration with StatusPage.io. This will enable you to get a one-way webhook-style activity stream from StatusPage.io, to a Jive group, without middleware in around 10 minutes! This tool is a first in a series of episodes we’ll be releasing that will enable you to save time developing for your Jive instance.

 

Screen Shot 2015-07-17 at 7.58.29 PM.png

 

Background

StatusPage.io provides "a web page specifically dedicated to communicating which parts of your site are/aren't working and the reasons behind it." Which according to StatusPage, helps "keep your customers informed when you're having an unplanned outage." But what about your own organization and letting groups that are affected know right away? Or creating a collaborative action request and getting the right people involved? With this Simple Stream Integration, we can take the power of StatusPage.io and bring it into Jive and add even more value for you, your team, and your organization.

Note: The Simple Stream Integration Builder can only be used with Jive Cloud and Jive 9+ (Jive 7 and 8 is not supported).

 

Quick Walk-Through Video

Watch the instructional video to help create your own StatusPage.io Simple Stream Integration using the Simple Stream Integration Builder:

 

StatusPage.io Jive Activity Stream Integration Steps:

  1. First, you will need to have a StatusPage account set up and webhooks enabled on their service.
  2. Head over to the Simple Stream Integration Builder page.
  3. Examine the StatusPage JSON payload schema and the Jive Stream JSON schema for how you want the activity stream constructed.
  4. Create the JavaScript transform function within “Step 1” of the Simple Stream Integration Builder.
    Sample transform function:
//Renaming each of the component ID's with relevant names
//and adding an image for each of the relevant objects created
var component = {};
switch(body.component_update.component_id){
  case "xyk3yzfdk9kl":
  component = {
      'name': "Marketing Services",
      'img': "https://raw.githubusercontent.com/jivesoftware/jive-statuspage-addon/master/resources/images/marketing_services.png"
  }
  break;
  case "f0smn2s09lv4":
  component = {
      'name': "Cloud Data Server",
      'img': "https://raw.githubusercontent.com/jivesoftware/jive-statuspage-addon/master/resources/images/cloud_data_server.png"
  }
  break;
  default:
  component = {
      'name': "Component with ID: " + body.component_update.component_id,
      'img': "http://bit.ly/1wYwajm"
  }
}

//Just formatting the output to look better in the description
var desc = {
  'operational':  "Operational",
  'degraded_performance': "Degraded Performance",
  'partial_outage': "Partial Outage",
  'major_outage': "Major Outage!"
}

// Build activity object.
var activityInfo = { actor: {}, object:{} };

// Optional URL for this activity. Remove if n/a.
activityInfo.object.url = "https://jivesoftware3.statuspage.io";

// Required URL to the image for this activity.
activityInfo.object.image = component.img;

// Required title of the activity.
activityInfo.object.title = component.name;

// Optional HTML description of activity. Remove if n/a.
activityInfo.object.description = "New Status: " + desc[body.component_update.new_status];

callback({ "activity" : activityInfo });

 

  1. Copy and paste a sample JSON payload from StatusPage into “Step 2” of the Simple Stream Integration Builder:
{
  "meta":{
      "unsubscribe":"http://statustest.flyingkleinbrothers.com:5000/?unsubscribe=j0vqr9kl3513",
      "documentation":"http://doers.statuspage.io/customer-notifications/webhooks/"
  },
  "organization":{
      "id": "j2mfxwj97wnj",
      "status_indicator": "major",
      "status_description": "Partial System Outage"
  },
  "component_update":{
      "created_at":"2013-05-29T21:32:28Z",
      "new_status":"operational",
      "old_status":"major_outage",
      "id":"k7730b5v92bv",
      "component_id":"rb5wq1dczvbm"
  }
}

 

  1. Click the “Run Transform” button and be sure that the “Transform Function” and “Output Validation” tests are both error free under “Step 3.” If the checks fail, it will give you an explanation for the error.
  2. Fill out the rest of the activity stream information such as title, description and add an icon for your activity stream in “Step 4.”
  3. Next, go to your Jive instance’s Add-on manager (Profile Picture > Add-Ons) and upload the add-on.
  4. After uploading the add-on, we need to go to the Jive group settings and add the activity stream integration to it.
  5. Copy the webhook endpoint URL that’s given to you in the integration configuration screen.
  6. Go to the StatusPage notification page and subscribe the endpoint URL that was copied, to StatusPage webhook.
  7. Fin. That’s it! Give it a whirl and watch the status updates stream in.

 

Repo on GitHub:

https://github.com/jivesoftware/jive-statuspage-addon

 

Hot Tips

  • You can add extra JS code to make the stream more powerful. For this example, we take the component ID’s from StatusPage and are giving them their appropriate known names.
  • Filter out/in content based on relevance to the group.
  • Use the external objects to make the activity actionable and invite others to collaborate.
  • If you update the extract and update the files, be sure you zip from within the root folder.

 

What's Next?

Ready to take your activity stream integration to the next level? Add an App by checking out the second episode of this trilogy.

Introduction

Continuing on our journey of developing quickly and easily with the Simple Stream Integration Builder, we're going to be diving a little deeper from the first guide in this trilogy. In this episode, we'll be taking the StatusPage.io Simple Stream Integration Add-on that we created earlier and adding a Jive App. The benefit of having a App is that we can now take this data we're getting from our external source and add our own custom HTML, CSS, and JavaScript to create a better presentation and add some simple business logic—all without the need for middleware. So what does that mean for you? Well, other than just making the app have a richer look that is well matched to your theme or create a better looking personalized experience for the individual user, you can add custom JavaScript to create actions within the app itself and make calls to other API's—including making Jive's REST API calls. You can read about Jive Apps and their features, either before or after diving into this guide to find out more.

 

The Goal

What we're going to do here is create a Jive App to add to our Simple Stream Integration that we created in Episode 1 in under 30 minutes. Our tools will be to use the Simple Stream Integration Builder and the latest node Jive-SDK . The External Object's app view will include all of the data that is available to you from this app, and you can think of creative ways that you'd like to display your StatusPage.io webhook activity.

 

Screen Shot 2015-08-04 at 12.55.09 AM.png

 

Files Used

  • \extension-src\data\xform.js
  • \apps\ext-object\definition.json

 

Quick Walk-Through Video

Watch this instructional video to help walk you through creating your own StatusPage.io Simple Stream Integration App:

 

Steps for Simple Activity Stream Integration + App

This guide assumes you have already gone through the first of this three part series—if you haven't yet done that, please start there. This guide also assumes you have the Jive-SDK installed.

  1. Use terminal (Mac/Linux) or Command Prompt (Windows) to get to where you'd like this app to exist locally on your machine, and create a new directory and place your terminal into that directory:
    mkdir [YourDirectoryName]
    cd [YourDirectoryName]
                   

     

  2. Locate the zip file that you downloaded from the Simple Stream Integration Builder after you completed the first guide. Place that zip into the folder you just created.
    NOTE: Do not use extracted files that you re-zipped. You must use the original zip file that was outputted from the Builder.
  3. Be sure you have the latest version of the Jive-SDK (version 1.201 and above):
    npm update jive-sdk -g
                   

     

  4. Unpack the zip file using the Jive-SDK.
    jive-sdk unpack [zipfile].zip
                   

     

  5. Create an App out of this freshly unpacked zip and pick a name for the app (optional). This is the name that will show up in your add-on list. If you omit this attribute, then it will auto-populate the name from the name of the zip file.
    jive-sdk create app-ext-object --name="StatusPage.io Activity App"
                   

     

  6. Locate the Simple Stream Integration's transform file in \extension-src\data\xform.js and open it in your editor. We need to add a new object called "jive" within the activityInfo object. Your activityInfo object initialization line should look like the following:
    var activityInfo = {actor:{},object:{},jive:{}};
                   

     

  7. Continuing our work on the xform.js file, we need to take the UUID for the app from \apps\ext-object\defintion.json. We're going to be adding some code to push the contents of the body from the Simple Stream Integration to the App. You can place this code anywhere in the function BEFORE we call the callback function. Since the App exists in it's own iFrame in the external object view on Jive, this is how we send the object over to the app and it will display in the view we are defining as "ext-object" (the view displayed by the app is set in \apps\ext-object\public\app.xml). You can see other examples here.
    activityInfo.jive.app = {
      'appUUID': "[YOUR APP's UNIQUE UUID FROM \apps\ext-object\definition.json]",
      'view': "ext-object",
      'context': {
        'timestamp': new Date().getTime(),
        'body': body,
        'headers': headers,
        'options': options,
        'resources': {
            'components': component,
            'descriptions': desc
        }
      }
    }
                   

     

  8. It's time to package up and build our new app add-on. Since all the assets for this app will be served by Jive without middleware, we can set apphosting to "jive":
    jive-sdk build --apphosting="jive"
                   

     

  9. Add your add-on to your instance and then to the activity stream for your group by following the instructions in Getting Started > Deploying a Jive Node SDK Project as an Add-On.
  10. Copy the webhook endpoint URL that’s given to you in the integration configuration screen.
  11. Go to the StatusPage notification page and subscribe the endpoint URL that was copied, to StatusPage webhook.
  12. Change the status of one of your StatusPage components to see the new activity in Jive.
  13. Click the activity title to view the external object that's created and you will see the app load up with all of the JSON contents that you can use to refine your app view.

 

Screen Shot 2015-08-04 at 1.12.50 AM.png

 

Get it on GitHub

https://github.com/jivesoftware/jive-sdk/tree/master/jive-sdk-service/generator/examples/app-ext-object/apps/ext-object

 

Hot Tips

  • An app can have custom HTML, CSS, and JavaScript within it. You can customize the app view have the look and feel that you're looking for in order to display the content your group needs. You can see more on what you can do with apps here.
  • The app knows where it is in the instance and can be customized to display what it needs based on that.
  • The unpack feature is beta at the moment, it is recommended that it only be used on ZIP's created by the Simple Stream Integration Builder
  • On a Mac, a .DS_Store file is created by finder and can sometimes throw errors if packaged in the file. Try navigating through the folders through Terminal instead of finder to avoid this issue.

 

What's Next?

In the next part of this series, Dev Tool: Simple Stream App with Bi-Directional Communication (3 of 3), we take our example even further and show how to create a dynamic app—providing two-way communication to control StatusPage.io from within the Jive External Object!

Filter Blog