Skip navigation

Introduction

screenshot_1.png

Social media is an important part of our digital lives and there is hardly anyone who hasn't used Twitter; there's even smaller percentage of companies that don't leverage this platform to engage with their customers. It's a great source of 140-character news and updates and it's also a great feed to add to your Jive Cloud instance. In this blog, I'll be writing about how you can create a Jive-hosted Custom View Tile with Configuration—and that means no middleware required!

 

This post and package was created/inspired by the questions posted in Twitter feed in the Cloud.

 

The Goal

While the GitHub package is included in this post and it's configurable to display any stream you wish, this pattern is to demonstrate how to create a Jive-hosted Custom View Tile and possibly adapt it for other feeds (e.g. Facebook, Google+, WordPress, etcetera).

 

Tools Used

 

Files Modified

  • /tiles/[Tile Name]/definition.json
  • /tiles/[Tile Name]/public/view.html
  • /tiles/[Tile Name]/public/configuration.html
  • /tiles/[Tile Name]/public/javascripts/configuration.js
  • /tiles/[Tile Name]/public/javascripts/view.js
  • /jiveclientconfiguration.json (optional)
  • /tiles/[Tile Name]/public/stylesheets/main.css (optional)

 

Get the Files on GitHub

jivesoftware/twitter-widget-tile · GitHub

 


 

Build a Twitter Tile w/o Middleware using Jive's Custom View Tile

 

Create The Foundation: a Jive-SDK Example

To begin building our add-on, we're going to be requesting help from the mighty Jive-SDK to create an example for us that will take care of most of the nuances like tokens, unique ID's, and file structure. We'll be using this example project to modify and build our tile. In order to get started, first make sure you have the Jive-SDK installed on your machine by following Getting Started > Installing the Jive Node SDK. After that, create a folder for your project, open up terminal/command prompt, navigate into that folder and run the following commands:

jive-sdk create tile-app-internal --name="twitter-widget-tile"
npm update

 


 

Making a Twitter Widget

twitter widget configurator.pngTwitter offers a Widget Configurator that will allow you to customize their widget and hands you code that you can paste in to your tile. Their widget allows you to control some aspects of the view external to the configurator by adding embedded timeline attributes to the anchor tag that is provided. The options we included in our tile reflects the look of our Jive instance, yours can/will vary, but the recommended height to be set within the configurator is 300px. We will modify that later in our code and user selected configuration window, but it is a good place to start.

 


 

Configuring the Add-on

We will be modifying some of the default configuration from our sample app and adding some features and setting page types that the Tile will need in order to function correctly and be added to anywhere we'd like. We want the Tile to have access to the Jive V3 API's, JQuery 1.11, and the Tile API features—as well as allow this to be installed and view in a PLACE, USER, and NEWS feed (we are choosing to not display on mobile). Another change is that we are setting the icon images for the tile installation to be at the root of the tile directory and adding the image assets to the root of the /tiles/[Tile Name]/ directory.

 

Modified lines in /tiles/[Tile Name]/definition.json:

"displayName" : "Twitter Widget Tile",
"name" : "twitter-widget-tile",
"description" : "Configurable Twitter feed widget tile",
"pageTypes" : [ "PLACE", "USER", "NEWS" ],
"icons": {
        "16": "extension-16.png",
        "48": "extension-48.png",
        "128": "extension-128.png"
},
"config": "/twitter-widget-tile/configuration.html",
"view": "/twitter-widget-tile/view.html?features=jq-1.11,core-v3,tile"

 

You can add/change the description of the add-on to suit your needs in /jiveclientconfiguration.json (optional).

 


 

The Configuration Window

The configuration window will consist of two user configured inputs—a twitter widget ID string (the numerical ID will exceed the floating point precision of JavaScript, so it must be set to string) and a number for the height. Upon submit the data is stored in the config["data"] object, which will later be accessed by the view.

 

Editing the Configuration HTML

We provide instructions in the UI of the configuration window to help enable the end user successfully fill out the form. A required Twitter Widget ID (from the Widget Configurator) and a self-validating number input for height are the only elements needed in the form.

 

/tiles/[Tile Name]/public/configuration.html

<h2>Configuration</h2>
<p>Create and get data-widget-id from <a href="https://twitter.com/settings/widgets/" target="_blank">here</a>.
</p>
<p>
    Twitter Widget ID:
    <input class="j-text" id="twitterID" type="text" name="twitterID"  required />
</p>
<p>
    Height of Tweet tile (px):
    <input class="j-text" id="tileHeight" type="number" name="tileHeight"  max="500" min="120" value="300" step="1" />
</p>

 

Editing the Configuration JavaScript

Since we have access to the config{} object, we can store name value pairs in our config["data"] object for the view to read. We also are storing this data if a user were to go back to the configuration screen after it's first configured. The object is kept within the Jive service.

 

/tiles/[Tile Name]/public/javascripts/configuration.js

// config will initially be empty, this defaults to load the @jivedev twitter feed
// the data-widget-id must be a string since the length exceeds JS' floating point precision
var json = $.isEmptyObject(config["data"]) ? { "id": "643568438426734592", "height" : 300 } : config["data"];
console.log(json);
// populate the input dialog with config data
$("#twitterID").val( json["id"]);
$("#tileHeight").val( json["height"]);
// store the updated values into config on button click
$("#btn_submit").click( function() {
    config["data"] = { 
    "id" : $("#twitterID").val(),
    "height" : $("#tileHeight").val()
}
// send config to service
jive.tile.close(config, {} );

 


 

The View Window

Most of the work for the view is provided by the code from the Twitter Widget Configurator; along with a few modifications.

 

Editing the View HTML

We can paste the anchor tag from the tool into the <body> of our HTML file and remove the data-widget-id property from it—this will be added later using JQuery. We are also adding some customization to our widget through the data-chrome property and an ID out of personal preference.

 

/tiles/[Tile Name]/public/view.html

<a class="twitter-timeline" id="tweets" data-dnt="true" href="https://twitter.com/jivedev" data-chrome="nofooter" width="300">Tweets by @jivedev</a>

 

Editing the View JavaScript

We add the a data-widget-id and height properties that were received from the configuration window. After doing so, we call the Twitter widget script provided from the configurator (with a few personal tweaks) and use the asynchronous ready() method to bind the rendered event, which will trigger the gadgets.window.adjustHeight() method for our little tile.

 

/tiles/[Tile Name/public/javascripts/view.js

$(function(){
    $("#tweets").attr({'data-widget-id' : config["id"], 'height' : config["height"]});
        
    //Calls the twitter widget.js and creates the elements for feed list
    window.twttr = (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0],
            t = window.twttr || {};
        if (d.getElementById(id)) return t;
        js = d.createElement(s);
        js.id = id;
        js.src = "https://platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js, fjs);
            
        t._e = [];
        t.ready = function(f) {
            t._e.push(f);
        };
    
        return t;
    }(document, "script", "twitter-wjs"));
    
    twttr.ready(function (twttr) {
        twttr.events.bind('rendered', function(){
            gadgets.window.adjustHeight();
        });
    });
});

 


 

Build Tile With Jive-SDK

Use the command below in terminal/command line to build and package the Jive hosted tile (no middleware) that you can then add to your Jive Instance.

jive-sdk build add-on --apphosting="jive"

 


 

Hot Tips

  • For testing JavaScript iterations (HTML files will be hosted by Jive), check out Ngrok: Warp Speed for Your Integration Iterations and use the jive-sdk create tile-app-external command in your command line to create a package that will let you test out the configuration and view scripts

  • The Twitter Embedded Timeline can be dynamically inserted by using the twitter.widget.createTimeline function
  • You can load multiple feeds/widgets in one tile

 


 

What's Next?

It's almost October, and you know what that means ... time for JiveWorld!  But this time, it's a little different.  Due to the fact that JiveWorld was moved to March 2016, there is now a hole in our hearts for a chance to interact, network and share amazing customer stories in 2015.

2.png?a=367223

Thanks to the efforts of the Bay Area User Group ... a team has put together an event they are calling UnJiveWorld 2015 to help fill this gap until JiveWorld16 in March in Las Vegas!

See: Save the date: Bay Area UnJiveWorld Conference October 15, 2015 in Santa Clara, CA  for more details on how to RSVP.

 

Developer Agenda

Our developer relations team is trying to help add some developer content to UnJiveWorld 2015, but before we can do that, we need to know who is interested in attending and what you would like to discuss.

  • Would you like formal presentations from Jive?
    • If so, any specific topics?
  • How about customer speakers and successes? 
  • or, we can just do an all day hack session with some Jive experts onsite?

Have a speaking idea that you'd like to submit? 
click here for more details

 

Please tell us if you are planning on attending and how we can make this time most valuable for attendees.  We will do our best to accommodate!

 

Join Us for a Day of Jive Development / Hacking

profile-image-display.jspa?imageID=20541&size=200 profile-image-display.jspa?imageID=28476&size=200

Both Ryan Rutan (Director of Developer Evangelism & Partner Innovation) & Rashed Talukder (Developer Evangelist) will be in attendance at UnJiveWorld 2015.

 

Based on your feedback/registration, we may bring more Jive engineers to answer your questions and make sure this event doesn't disappoint!

 

I'm excited for the opportunity to try out some of the new tech we'll be showcasing in the Announcing a Tri-Hackathon at JiveWorld16 Developer Conference w/Limited Edition T-Shirt, as well as a chance to meet developers face-to-face.

 

 

Introduction

There's really no other way to describe what ngrok did for my Simple Stream App Integration development cycles other than amazing. It's so good that we're writing about it twice for those of us that missed it the first time! Instead of removing an add-on, reinstalling to the Jive instance, then installing the integration to the group and creating a new activity every time I made any little code change, I can just make the edits on my local machine and host them externally. Setting everything up is incredibly easy and allows me to hit refresh on my browser while viewing the external object/app and pulls the files from my \apps\[app name]\ directory.

 

With Nitrous.io no longer having a free option, this is the perfect (and IMO better) replacement tool to develop/iterate with on your Jive instance.

 

Background

Ngrok is a small client application that punches a hole in your firewall and securely routes data to your local machine. Once the service is running, you're given a unique URL that can tunnel through HTTP and HTTPS. Ngrok also has a feature for authentication for access protection and you can inspect all the traffic going through the tunnels (http://localhost:4040). The best parts is that it's FREE and incredibly simple to have up and running. Each time you run ngrok, you'll be given a new subdomain which you'll have to change in your add-on—unless you are on a paid account—but will usually retain the endpoint if you don't close that window or close your ngrok session.

 

File Modified

  • \jiveclientconfiguration.json

 


 

Installing and Running Ngrok

Installation

Installation is relatively very simple. You need to download ngrok, unzip it to a location of your choosing, then sign up for an ngrok account. After logging in, Dashboard > Main > [Copy] "Your Tunnel Authtoken," then we're going to open terminal/command line, go into the folding containing ngrok and enter the following:

Mac/Linux:
./ngrok authtoken [paste your authtoken]

Windows:
ngrok authoken [paste your authtoken]

 


 

Starting Ngrok

Loading up an ngrok in terminal/command line is incredibly simple. You just need to set which port you'll be using for your app, which will be port 8090.

Mac/Linux:
./ngrok http 8090

Windows:
ngrok http 8090

Screen Shot 2015-09-14 at 10.47.39 AM.png

Be sure to copy your secure endpoint (https://xxxxxxxx.ngrok.io), we'll be needing that in the next steps.

 


 

Configuring Your Simple Stream App with Ngrok

Configuring your add-on to use ngrok and thus your local machine to host the app externally is incredibly simple and only requires modification to the \jiveclientconfiguration.json file.

 

Configuration

Modify the following lines in your jiveclientconfiguration.json file:

"clientUrl": "https://[your unique ngrok subdomain].ngrok.io",
"clientUrlExcludesPort": true,
"port": "8090",
"suppressAddonRegistration" : true,

 


 

Building Your Externally Hosted App with Jive SDK

Go to the root directory of your integration in terminal/command line and run jive-sdk build --apphosting="self".

After the add-on is built and zipped together, install it into your Jive instance, install it to a group and push an activity to be created. Then when you go to view the external activity, you will see the app files get pulled from your local machine and requests/status' displaced in your ngrok terminal window.  At this point, you can do all your app development iteration from your local machine without having to do additional add-on deploys to Jive.  If JS/CSS assets appear to get cached, you should be able to simply stop and start your local node service, which takes about 1-2 seconds, and you should see the assets get refreshed!

In the event your app.xml changes, you will need to uninstall/reinstall the add-on for those changes to take affect.  It is recommended, that you lock in your app.xml contributions and features prior to iterating on your app.  See:  App Action Contribution Reference

 


 

Switching Back to Jive App Hosting with Jive SDK

Once you have refined your application and are ready to bundle the resources back into your Jive add-on, all you need to do is execute the following command to instruct the Jive SDK to bundle the app resources into the /public directory in the add-on:

jive-sdk build --apphosting="jive"

 

Simply uninstall / reinstall the add-on one more time, and you should be good to go!

Note:  In most cases, it is not necessary to change the clientUrl within jiveclientconfiguration.json back to http:  or http://localhost.

 


 

What's Next?

Introduction

Screen Shot 2015-09-08 at 4.44.46 PM.png

Wrapping up the series, we are taking our Simple Stream Integration (SSI) to the next level and really pushing the bounds of what we can do with a simple activity in Jive before finding ourselves needing middleware. We are building on to our App that we created in Episode 2 and adding two-way communication between Jive and StatusPage.io. In many ways, we are walking away from the limitations of the dataset that first created the activity in Jive from the subscribed StatusPage webhook payload. Within the external object's view, we have an app that we can send POST and GET requests to StatusPage to retrieve incidents related to the component ID from when the activity was generated and also add new incidents—without needing to leave Jive. To make sure the requests and tokens are kept secure and only select Jive Groups can see this additional feature, we'll be utilizing the Jive Connects service.

 

 

The Goal

Imagine one of your clusters goes down and you get a activity in Jive from StatusPage.io that you and your team can collaborate on the activity, view the incidents generated by your team or automated services, and add/delete/update incidents as they come in—all from within Jive and without needing to spend time switching services, websites or tools. Ultimately, this saves time, money and confusion while keeping your information and credentials secure while proving a rich and easy to use UI. That's a lot to ask, but that's exactly what we'll be building here and you can do the same with your own custom simple stream integration/app within just a few hours without middleware.

 

Tools Used

 

Files Modified

  • /apps/[your app name]/public/app.xml
  • /apps/[your app name]/public/ext-object.html
  • /apps/[your app name]/public/javascripts/main.js
  • /apps/[your app name]/public/stylesheets/main.css
  • /extension_src/public/configuration.html
  • /extension_src/public/style.css
  • /extension_src/public/logo.png (added logo for activity stream configuration page)

 

Get the Files on GitHub

The source code for this project is available on GitHub.

 

You can use the Jive SDK to create your own simple stream integration that picks up after

Dev Tool: Build an App w/ the Simple Stream Integration Builder (2 of 3)

 

  • Install the Jive Node SDK
  • Then use the following command:
    • jive-sdk create simple-stream --name="my-stream"
      • You can replace my-stream with a value of your choosing.

 

Now you should be ready to follow this walk-through. =)

 


 

Creating An SSI App with 2-Way Communication For StatusPage Using Jive Connects

 

Setting Up Jive Connects

Jive Connects is a broker for proxying requests to a remote service. Since it is set up on the server side, it can add authentication headers from anonymous, basic, to OAuth 2.0 without exposing this information to anyone but the intended service. More importantly, it is needed because of browser access restrictions for network access outside of the application from which it was loaded. By using Jive Connects, we can use its HTTP verb methods (GET, POST, HEAD, PUT, DELETE) to pull and push data from other sources into our App. Permissions to the installation of the add-on containing the Jive Connects service can also be set up; however, once added to the group and authorized, all users who are members of the group in which the add-on is installed can view/use the add-on and that Jive Connects service.

 

Walk-Through Video

 

Admin-side Setup for Jive Connects

Screen Shot 2015-09-08 at 6.44.23 AM.png

  1. To get the admin set up, we start from our Admin Console (requires admin privileges) by clicking our profile picture in the top navigation banner, "Manage" > "Admin Console"
  2. We need to add the service that will use the Jive Connects API in the Jive Admin Console. Click the "Add-ons" menu > "App Services" side menu > "Add New Service"
  3. Enter a Name of the service. We included the URL of our StatusPage instance to avoid confusion for which one this service belongs to.
    • Note: This name will be visible to end-users when they first use the app, so being descriptive is recommended.  StatusPage.io - [URL] - Incidents
  4. Authentication style can vary based on the external service's API requirements. Jive Connects supports Anonymous, API Key, Basic, OAuth 2.0.
    • Note:  Due to the way StatusPage's APIs are designed we are choosing Anonymous so everyone can share the API key
  5. Description is whatever you feel is appropriate for the service for anyone who will need to reference this service internally to understand what it connects.
  6. "Tags" is the identifier that your App can use to identify this specific Jive Connects service. Tag's take the form of URIs and must be unique and begin with "jive:service://".
    • Note: For our purposes, we are using "jive:service://statuspage.io/incidents.api?version=1" where version matches the StatusPage API version
  7. The "Service URL" will be the base URL for all requests to their API. Jive Connects let's us append to this URL but not prepend or modify from within our App.
    • Note:  Since the StatusPage API contains a unique ID for each Page instance as the base for all of their API calls, we included that in our service URL
      https://api.statuspage.io/v1/pages/[Your StatusPage.io Page ID]
  8. While Jive Connects is capable of storing multiple keys per user, we felt that this use-case was best served as multiple user's sharing a single API key.  To do this, we are hard-coding the Authorization token into the Jive Connects service, such that it is never transmitted to the browser.  Per StatusPage documentation, we could do this by always passing the key as a request parameter or header.  We chose header to keep it hidden.  To keep it safe.
    • Note:  Click the "Add a new HTTP Header" and enter the header parameter per the StatusPage documentation:  Authorization:  OAuth [APIKEY]
    • Note: To get our API key from StatusPage and you can find instructions on how to get that from here.

Since this app is being installed as an add-on, the fields below such as Groups/Users with Access to this Service are no longer relevant.

When opening the app for the first time, a authorized user will be presented with a verification screen in order to enable the Jive Connects service to this App. This only needs to be done once by one user to enable it for the entire group.

 

Enable App to Access Jive Connects

Now that we have the Jive Connects service created and configured, we can use the tag created earlier and tie it to an alias to be used by our app. The alias can be any name you want it to be and your app will reference that name in order to access the Jive Connects Service. The title will be displayed at the first initialization of the service when it is first called on the Jive Connects authorization screen (this will pop up in the app load). The content between the tags is your Jive Connects service tag that you will paste in between. We need to open the /apps/[your app name]/public/app.xml file and the following anywhere before the closing </ModulePrefs>:

<!-- Begin Jive Connects feature -->
<Require feature="jive-connects-v1">
  <Param name="alias:StatusPageIncidents|title:Read StatusPage Incidents Service">jive:service://statuspage.io/incidents_api?version=1</Param>
</Require>
<!-- End Jive Connects feature -->

 


 

Customizing the App Look and Feel with HTML and CSS

Screen Shot 2015-09-08 at 5.00.58 PM.png

For purposes of this blog and personal preferences, we aren't going to go into details of how you should make your App look. But instead, I'll tell you what I did, why I chose it and you can download the source files from GitHub to see the code.

 

The Configuration Window

We are going to backtrack for a second and edit the configuration screen for our integration that we get our endpoint URL to look a little less generic and bit more StatusPage while spending very little time on it. We need to edit the /extension_src/public/configuration.html and styles.css file to get the look we want. I also went ahead and added the StatusPage.io logo to make it clearer on which integration is being installed and/or configured.

 

Customizing the App View

To start, we edit the /apps/[Your App Name]/public/ext-object.html and stylesheets/main.css files. For this example, I wanted to give the look and feel of StatusPage.io in our integration so that the end user would feel just as comfortable and transition into operating on the StatusPage incident within Jive as they would within StatusPage; the whole process should feel seamless.

 


 

Using the StatusPage.io API within the Jive External Object App

In this example, we will be taking the StatusPage.io v1 Components and Incident's API and adding it to our App to be able to get the current status of the component related to our activity, read incidents related to the component that was posted after the date the activity was created within Jive. In addition to reading it, we will add the ability to push a realtime incident update and delete an existing incident from within the App view—without ever leaving Jive. The App can be expanded even further to add the ability to update an incident with minor tweaks. As stated previously, all communication between the App and StatusPage.io is proxied through the Jive Connects service.

 

Here is a break down of the construction of a Jive Connects POST request in /apps/[your app name]/public/javascripts/main.js:

function() {
     osapi.jive.connects.post({ // This is the POST method for Jive Connects, can be swapped to GET, DELETE, PUT, or HEAD and follows same formatting 
          alias : '[The Alias You Assigned in Your app.xml File]', // Since one App can have more than one service, each request needs an alias
          href : '/[Rest of the Endpoint of the API Appended to the Service URL]' // Varies based on which part of the external service API you are calling
     }).execute(function(response) {
          if (response.error) {
               // Handle response.error content here
          }
          else {
               // Do something with response.content if there's a payload
               // or response.headers
               // or response.status
     }
}

 

Viewing the Current Component Status

We will be calling the StatusPage.io Component API using Jive Connects GET method to make the HTTP request. On a success, the payload we get back from StatusPage's Components endpoint can be viewed in response.content and we go through that array of objects to find the matching component ID to our activity, once that's done, we call the renderStatus() method with the name and current status to be displayed. We are handling any errors by displaying the response.error in the appropriate div.

loadStatus : function() {
  var appObj = this;
  osapi.jive.connects.get({
        alias : 'StatusPageIncidents',
        href : '/components.json'
    }).execute(function(response) {
  if (response.error) {
  $('#component_status').html("Received the following error: " + JSON.stringify(response.error, null, '\t'));
  gadgets.window.adjustHeight();
  }
  else {
  response.content.map(function(obj){
  if (obj.id == app.context.body.component_update.component_id){
  app.renderStatus(obj.name, obj.status);
  }
  })
  }
  })
  },

 

The process of loading and viewing the StatusPage.io Incidents API is similar to the way we received the components JSON—by using the Jive Connects get() method and pointing the request to the /incidents.json path. We are using the JavaScript map() method to go through the response.content's array of objects in order find when each incident is referring to the activity's component and then eliminating any incidents that were created BEFORE the activity was generated. Lastly, we filter out any empty objects from the array before we call our own renderIncidents() method to create the DIV's to display each of the incidents.

  var appObj = this;
  osapi.jive.connects.get({
        alias : 'StatusPageIncidents',
        href : '/incidents.json'
    }).execute(function(response) {
  if (response.error) {
  $('#incidents').html("Received the following error: " + JSON.stringify(response.error, null, '\t'));
  gadgets.window.adjustHeight();
  }
  else {
       //
  //Please see our Git repo for the full source code
     //
  app.renderIncidents(reData);
  }
    })

 

Deleting a StatusPage.io Incident through Jive Connects

We are just doing a rinse and repeat of the Jive Connects calls and switching the verb that we use to perform our task. To delete a incident, we just need to use the delete() method in Jive Connects and pass the incident ID in the request URL. After it completes, we reload the incidents by calling our custom loadIncidents() method.

  var appObj = this;
  osapi.jive.connects.delete({
  alias : 'StatusPageIncidents',
  href : '/incidents/'+incident_id+'.json'
  }).execute(function(response){
  if (response.error){
  $('#incidents').html("Received the following error: " + JSON.stringify(response.error, null, '\t'));
  gadgets.window.adjustHeight();
  }
  else {
  app.loadIncidents();
  }
  })

 

Adding a StatusPage.io Incident through Jive Connects

NewIncident.png

In order to create a new incident, we set up a form in the /apps/[your app name]/public/ext-object.html file that contains the necessary fields (incident name, incidents status, message). We are not using the twitter option in our example and the component we will be appending this incident to is going to be the same component as the activity's. Upon submitting the form, we call our addIncidents() method, which uses the Jive Connects' POST verb to add the incident to StatusPage.io. We create a string with all of the parameters that we need to send over to StatusPage.io—and include the component ID—all to the formatting required by StatusPage's API. In this POST request, we are going to include a header value { 'Content-Type' : "application/x-www-form-urlencoded" } and a body that contains the string we put together from the form and place it in encodeURI() so that StatusPage's service can read it according to their requirements. After a successful request, we call our loadIncidents() to view the newly added incident.

 

 

  // See the GIT repo for source code

  osapi.jive.connects.post({
  alias : 'StatusPageIncidents',
  href : '/incidents.json',
  headers : {'Content-Type' : "application/x-www-form-urlencoded"},
  body : encodeURI(message)
    }).execute(function(response) {
  if (response.error) {
  $('#incidents').html("Received the following error: " + JSON.stringify(response.error, null, '\t'));
  gadgets.window.adjustHeight();
  }
  else {
  app.loadIncidents();
  app.incidentForm();
  }
    })

 


 

Hot Tips

  • You may get an error when installing the add-on about an extra .DS_Store file if you've been browsing around your directory with Finder on Mac. If you go to the root of your integration folder in terminal, type in the code below to remove all the .DS_Store files from the project; build your project again with Jive-SDK
    find . -name ".DS_Store" -type f -delete
    
  • You can have multiple Jive Connects services' running in one app. This is useful in cases where you may have two different external services that you are sending requests to/from
  • If you do not want to enter a object.url in your original xform.js file, or if you do not want to see the "Go to item" link in your activity tile, you can remove it with the "hideGoToItem" property in your activity.object. Read more about this and look at examples here ›

 


 

What's Next?

jw16-dev-trihackathon-logo-teal.png

With JiveWorld16 officially announced and the call for speakers in full swing, I wanted to take a moment to share with my fellow Jive developers some of the new ideas we are implementing at the JiveWorld16 Developer Conference.  Rest assured the staples of the developer conference intact, such as the open hackathon, Midnight Hack:30, our Hacker Lounge staffed with Jive experts and amazing deep-dive developer sessions.   But we wanted to change things up a bit to make things more fun and engaging, so we decided to change the format of the hackathon.

 

We call it a Tri-Hackathon (*pause for effect)

 

This hackathon format is designed to expand developer skills, knowledge and creativity across multiple critical hacker disciplines, including: Technology Trivia, Coding Skills and Video Games!

 

 

Technology Trivia

jw16-trihackathon-tag-n3rd.png

Our team is putting together an online quiz that will test various aspects of developer and hacker trivia.   How well versed are you on technology?  Now is the chance to find out!  Topics for the quiz will include: programming logic, terminology, technology history, puzzles and much more!  The developer(s) with the highest score(s) will win this leg of the hackathon.

 

Winners will receive bragging rights in the Developer Community and additional awards yet to be determined.  Stay tuned for updates!

 

Coding Skills

jw16-trihackathon-tag-h4ck.png

Building on last year's success, we will revamp our list of Challenges from JiveWold14 to align with the direction and new features in the Jive platform. Developers will be enabled to complete relatively quick challenges throughout the course of the conference.  Each completed challenge will earn points, and the developer(s) with the most points will win this leg of the hackathon.

 

Winners will receive bragging rights in the Developer Community and additional awards yet to be determined.  Stay tuned for updates!

 

Video Games

jw16-trihackathon-tag-pwn.png

Need time to decompress?  How about taking a break to get the creative juices flowing?  This year in the JiveWorld Hacker Lounger, we will have an arcade cabinet loaded with a large assortment of FREE play vintage arcade games.  Just before the conference, we will announce an official JiveWorld16 Tri-Hackathon video game.  The leaderboard will be wiped, and from there it's arcade rulez ... the highest score(s) win this leg of the hackathon.

 

Winners will receive bragging rights in the Developer Community and additional awards yet to be determined.  Stay tuned for updates!

 

... and dont forget about the JiveWorld16 Tri-Hackathon T-Shirt!

For developers that register before December 31st, we will reserve this limited-edition JiveWorld16 Tri-Hackathon T-Shirt and distribute it at JiveWorld16.  We will also have a limited number of various sized shirts generally available at the hackathon, but registering before December 31st reserves one in your size.

jw16-dev-trihackathon-shirt.jpg

 

 

Save $300 with Early-Bird Pricing Today!  Expires: October 31st

ARIA Resort & Casino, Las Vegas, NV

March 14-16, 2016

 

Register as a Developer

 

Need help making the case for the JiveWorld16 Developer Conference? Maybe we can help ...

 

For more details about the JiveWorld16 Developer Conference, click here.

Filter Blog