Skip navigation

Developer

3 Posts authored by: mcollinge

This is the second bookmarklet we use to help with our work on element14 Community. If you're not sure what bookmarklets are, I explain them in this other blog post; Bookmarklet for displaying Jive content IDs

 

This bookmarklet will display a panel containing the page metadata which is handy for SEO-related tasks. Here's how it looks on JiveWorks;

 

 

And here's how it looks on element14 Community, where we've got extra items like the canonical URL being included across the site, the Open Graph protocol, etc;

 

 

The JavaScript for this bookmarklet is here;

 

javascript:var html='';function encode(r){return r.replace(/[\x26\x0A\x3c\x3e\x22\x27]/g,function(r){return "&#"+r.charCodeAt(0)+";";});}var canonical=$j('link[rel=canonical]');if(canonical.length>0)html+=encode('<link rel="canonical" href="'+$j('link[rel=canonical]')[0].href+'">')+'<br>';html+=encode('<title>'+$j('title').html()+'</title>')+'<br>';var meta=$j('meta');for(var i=0;i<meta.length;i++){if(!meta[i].itemprop){html+=encode(meta[i].outerHTML)+'<br>';}}$j('.e14-page-info').remove();$j('body').prepend('<div style="border:1px solid grey; height:auto;; font-size: 10px; padding: 5px; position: fixed; display: block; top: 10px; left: 10px; z-index: 10; background: white;" class="e14-page-info">'+html+'</div>');void(0);

 

If you're interested in the uncompressed source, here it is (to use this in a bookmarklet, you'll need to run it through a service like this);

 

var html = '';

function encode(r) {
  return r.replace(/[\x26\x0A\x3c\x3e\x22\x27]/g, function(r) {
  return "&#" + r.charCodeAt(0) + ";";
  });
}

html += encode('<link rel="canonical" href="'+$j('link[rel=canonical]')[0].href+'">')+'<br>';
html += encode('<title>'+$j('title').html()+'</title>')+'<br>';

var meta = $j('meta');
for (var i=0; i<meta.length; i++) {
  if (!meta[i].itemprop) {
  html += encode(meta[i].outerHTML)+'<br>';
  }
}

$j('.e14-page-info').remove();
$j('body').prepend('<div style="border:1px solid grey; height:auto;; font-size: 10px; padding: 5px; position: fixed; display: block; top: 10px; left: 10px; z-index: 10; background: white;" class="e14-page-info">'+html+'</div>');

void(0);

This is something we've been using on our site for a while; I've updated the code so that I can share it with fellow Jive developers. Bookmarklets are browser bookmarks that contain JavaScript code. When you click the bookmark, it'll run the JavaScript against the page you're looking at, which comes in really handy!

 

What I've developed here is a bookmarklet that will display a panel at the top left of your Jive site.. the panel will contain the IDs of the content & Place you're looking at, and give you links to the full JSON object via a REST call. This kind of thing is really handy if you're regularly working with the REST API.

 

Here's how it looks;

 

 

1. Create a new bookmark

 

2. Edit the bookmark and paste in the JavaScript below

 

 

3. Go to your Jive site (or JiveWorks) and click the bookmark to display the panel

 

Here's the JavaScript...

 

javascript:var html='';var currentContainerID=window.jive.global.containerID;var currentContainerType=window.jive.global.containerType;var currentContainerName='';if(typeof(e14CurrentContainer)!=='undefined')currentContainerName=e14CurrentContainer.name;var contentInfo=$j('.jive-content:first');if(contentInfo.length==0||typeof(contentInfo.data('object-id'))==='undefined')contentInfo=$j('.bookmark-controls');if(contentInfo.length>0){var contentID=contentInfo.data('object-id');var contentType=contentInfo.data('object-type');if(typeof(contentID)==='undefined'&&typeof(e14CurrentObject)!=='undefined'){contentID=e14CurrentObject.id;contentType=e14CurrentObject.objectType;}if(typeof(contentID)!=='undefined'){html+='Content type: '+contentType+', ID: '+contentID+'. ';html+='<a href="'+_jive_base_url+'/api/core/v3/contents?filter=entityDescriptor('+contentType+','+contentID+')" target="_blank">REST</a>';html+='<br>';}}html+='Container type: '+currentContainerType+', ID: '+currentContainerID;if(jive.global.containerBrowseId>-1)html+=', Browse ID: '+jive.global.containerBrowseId;if(currentContainerName!=='')html+=', Name: '+currentContainerName+'.';if(currentContainerType!=3){html+=' <a href="'+_jive_base_url+'/api/core/v3/places?filter=entityDescriptor('+currentContainerType+','+currentContainerID+')" target="_blank">REST</a>';}else{html+=' <a href="'+_jive_base_url+'/api/core/v3/people/'+currentContainerID+'" target="_blank">REST</a>';}html+='<br>';$j('.e14-page-info').remove();$j('body').prepend('<div style="border:1px solid grey; height: 25px; font-size: 10px; padding: 5px; position: fixed; display: block; top: 10px; left: 10px; z-index: 10; background: white;" class="e14-page-info">'+html+'</div>');void(0);

 

If you're interested in the uncompressed source, here it is (to use this in a bookmarklet, you'll need to run it through a service like this);

 

var html = '';

var currentContainerID = window.jive.global.containerID;
var currentContainerType = window.jive.global.containerType;

var currentContainerName = '';
if (typeof(e14CurrentContainer)!=='undefined') currentContainerName = e14CurrentContainer.name;

var contentInfo = $j('.jive-content:first'); // Try the jive-content class first
if (contentInfo.length==0 || typeof(contentInfo.data('object-id'))==='undefined') contentInfo = $j('.bookmark-controls'); // Next try the social action link

if (contentInfo.length>0) {
  var contentID = contentInfo.data('object-id');
  var contentType = contentInfo.data('object-type');

  // We can get at blog container if we're on element14 Community 
  if (typeof(contentID)==='undefined' && typeof(e14CurrentObject)!=='undefined') {
  contentID = e14CurrentObject.id;
  contentType = e14CurrentObject.objectType;
  }

  if (typeof(contentID)!=='undefined') {
  html += 'Content type: '+contentType+', ID: '+contentID+'. ';
  html += '<a href="'+_jive_base_url+'/api/core/v3/contents?filter=entityDescriptor('+contentType+','+contentID+')" target="_blank">REST</a>';
  html += '<br>';
  }
}

html += 'Container type: '+currentContainerType+', ID: '+currentContainerID;
if (jive.global.containerBrowseId>-1) html+=', Browse ID: '+jive.global.containerBrowseId;
if (currentContainerName!=='') html += ', Name: '+currentContainerName + '.';
if (currentContainerType!=3) {
  html += ' <a href="'+_jive_base_url+'/api/core/v3/places?filter=entityDescriptor('+currentContainerType+','+currentContainerID+')" target="_blank">REST</a>';
} else {
  html += ' <a href="'+_jive_base_url+'/api/core/v3/people/'+currentContainerID+'" target="_blank">REST</a>';
}
html += '<br>';

$j('.e14-page-info').remove();
$j('body').prepend('<div style="border:1px solid grey; height: 25px; font-size: 10px; padding: 5px; position: fixed; display: block; top: 10px; left: 10px; z-index: 10; background: white;" class="e14-page-info">'+html+'</div>');

void(0);

Introduction

 

Webhooks are a powerful Jive feature that allow you to subscribe to events that occur in the system. For example, you can subscribe to all user account creations, or all the new documents that are created in a particular Place. The subscription basically tells Jive to send a JSON object (of the content you want) to whatever endpoint you've specified.

 

The Jive documentation mentions creating some kind of add-on/extension and subscribing using a Tile, but it's actually possible use a tool like Postman to talk to the Webhook REST API to register a hook, or manage all the webhooks that are set up on your Jive instance.

 

Note; we run our community in a /community sub-folder.. so if you're following this guide, take that into account for any URLs you're copying.

 

oAuth2 Add-On

 

The first thing you need to do is install a pretty generic oAuth2 add-on. This was originally provided in this document, but I've altered meta.json to have a callback URL linked to Postman. I've attached the add-on to this document.

 

Note; uninstalling the add-on will remove any webhooks you set up against it.

 

 

oauth1.png

 

Setting Up Postman

 

Next, you need to follow these steps to set up Postman to use an OAuth 2.0 access token.

 

oauth2.png

 

oauth3.png

 

PHP Debugger

 

As you can see, in step (9) I'm telling the webhook to talk to a PHP page. This is a dead simple debug page I set up to see what the webhook payload looked like, and to test that the whole thing was working. It'll send the contents of any request to a log file.

 

Here's the code;

 

<?php
    $todays_date = date("Y-m-d G:i:s");
    $requestBody = array2string($_REQUEST);
    $entityBody = file_get_contents('php://input');
    
    $fp = fopen("webhooks.log", "at");
    fwrite($fp, "$todays_date -> $requestBody --> $entityBody\n\n");
    fclose($fp);

    function array2string($data){
        $log_a = "";
        foreach ($data as $key => $value) {
            if(is_array($value))    $log_a .= "[".$key."] => (". array2string($value). ") \n";
            else                    $log_a .= "[".$key."] => ".$value."\n";
        }
        return $log_a;
    }    
?>

 

 

Further Reading

 

Webhooks API documentation

https://developers.jivesoftware.com/api/v3/cloud/rest/WebhooksService.html

 

The post which set me on the right track to get Postman to talk to Jive

https://community.jivesoftware.com/message/1588488

 

Original oauth2 add-on.

https://community.jivesoftware.com/docs/DOC-97348

Filter Blog