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!