Friday, February 7, 2014

The Code Behind My IBM Connect 2014 Keynote Demo - Part 3

View Comments
Alright, let's move on to the next piece shown at the OGS. If you want to know what this is, I would suggest you catch up with Part 1 and Part 2.

The next part I got ready for the keynote was people search. But I wanted to move away from the typical search results list. I wanted something more visual and easier to digest. I wanted results to be more visual, maybe like a slideshow of people cards that I could flip through.

After doing a bit of searching, I landed on another jQuery plugin, this time the Baraja plugin and it got me something like this:

So what's the magic here? Let's walk through the parts:

1. As usual, include the right JavaScript:

<script src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="Baraja/js/modernizr.custom.79639.js"></script>
<script type="text/javascript" src="Baraja/js/jquery.baraja.js"></script>

2. Then the CSS for styling

<style type="text/css">
.homepage {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;
font-weight: 300;
color: #444;
line-height: 1.2;
background-color: #f0f0f0;

a {
color: #1c8aae !important;
text-decoration: none !important;

.photo {
width: 100px;
height: 100px;
border-radius: 55px;
-webkit-border-radius: 55px;
-moz-border-radius: 55px;
border-color: #fff;
border-style: solid;
box-shadow: 0 0 3px rgba(0, 0, 0, .4);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, .4);

font-family: "HelveticaNeue-Bold", "Helvetica Neue Bold","Helvetica Neue", sans-serif;
font-weight: 600;
text-decoration: none;
color: #444 !important;
font-size: 18pt;

border: solid 1px #e9ecef;
width: 280px;
height: 30px;
padding: 8px;
-webkit-border-radius: 15px; //For Safari, etc.
-moz-border-radius: 15px; //For Mozilla, etc.
border-radius: 15px; //CSS3 Feature
box-shadow: 0 0 4px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, .2);

.searchEntry {
text-align: center;
margin: auto;
padding-top: 20px;


.searchResults {
padding-top: 20px;
width: 260px;
height: 600px;
margin: 30px auto;

ul.baraja-container li {
border-radius: 10px;
padding: 5px;
box-shadow: 0 0 4px rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .1);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, .1);
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 250px;
height: 250px;
margin: 0;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
background: #f0f0f0;
font-size: 12pt;
text-align: center;
pointer-events: auto;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;


ul.baraja-container li img {
margin-top: 20px;

ul.baraja-container li p {
line-height: 1.0px;

ul.baraja-container li div {
text-align: center;

ul.baraja-container {
list-style-type: none;
width: 260px;
height: 310px;
margin: 0 auto 30px;
position: relative;
padding: 0;

.score {
font-size: 18pt;
color: #1c8aae !important;
text-decoration: none !important;

.bullet {
font-size: 8pt;
color: #666;


3. The placeholder where things will show up:

<body style="margin: 0;">

<div class="homepage">
<div class="searchEntry">
<input type="text" class="inputForm" id="searchBox" />

<div class="searchResults" id="searchResults">
<ul id="baraja-el" class="baraja-container">


4. Call the API!

var $el = $( '#baraja-el' ),
baraja = $el.baraja();
baraja.add( searchResults ) ); {
speed : 500,
easing : 'ease-out',
range : 100,
direction : 'right',
origin : { x : 50, y : 200 },
center : true
} );

The missing piece here is the call to the People Search API of IBM Connections to generate searchResults. I'll leave that as an exercise to the reader. Once I gathered all the data, I created a searchResult which would look like this (so that it matches the CSS I shared above):
<li><img class="photo" src="" alt="image1"/><br/><br/><div><span class="fn">Bill Ranney</span> <span class="bullet">&bull;</span> <span class="score">10</span></div><p>Sr. Business Manager</p><p>10 followers</p></li>
In terms of the score, that was work that we did based on the work with Marie Wallace. Check out her blog for more details.
blog comments powered by Disqus