Aligning bootstrap well heights within the same row

On a bootstrapped page layout, misaligned well heights within a single row are ugly at best and downright unprofessional looking at worst

d1

 

So I created a simple jQuery routine which will:

  • Cycle through each row
  • Create a variable = 0
  • For each well in this row
    • Check the height of each well
    • If the height is larger than the current largest value increase it
  • Once finished set the height of all the wells in this row (already selected) to be the largest height

$('.row').each(function(){
  var wellHeight=0
  $(this).find('.well').each( function(){
      var temp = $(this).height()
      if (temp>wellHeight){
       wellHeight=temp
      }
  }).height(wellHeight+"px")
})

d2

 

 

 

Integrating a Twitter bootstrap UI application into IBM Connections and MS SharePoint

In the last 12 months I have twice presented at MWLUG 2014 and ConnectED 2015 (with Mark Leusink) on how to run a  Domino/Angular.js application in IBM Connections and SharePoint. One of the hurdles to doing that was to figure out how to integrate bootstrap with the OneUI layout of Connections and MS SharePoint built in style.

Beyond the Everyday

This was the original http://beyondtheeveryday.com application which Mark Leusink built (for ConnectED) based on Bootstrap CSS. My job was to make it run anywhere – in this example IBM Connections. The same process described here is also used to make the application look nice in SharePoint.

c4

To do this I used an HTML Widget installed on the Connections server and with some JavaScript trickery (as explain at the conference) I was able to insert the BTE application into the Connections HTML widget relatively easily.

However – the functionality was not the immediate issue – the look and feel was.

IBM Connections uses the IBM OneUI Stylesheet for look and feel. Both OneUI and Bootstrap set default fonts and sizes on every page element and when mixed together in the wild things go badly wrong. As you can see from the image below – the bootstrap is fine – but the addition of another CSS which affects HTML and Body messes with the existing OneUI style.

c1

So the quick and dirty solution to me was to stop bootstrap from affecting everything else in the BODY of the connections page. In this case to maintain look and feel with OneUI – remove everything affecting the OneUI look.

I took an un-minified version of Bootstrap and removed the first 1400(ish) lines of code – down to the first media query. This removed default font size etc for every default HTML tag.

c3

 

This solved the problem.

Do not do this in production boys and girls – use a properly modified bootstrap file which only contains the CSS you need! Depending on the complexity of your application you may have to do other modifications to get your application looking good.

c2

Sharepoint

The process is identical for adding the application into SharePoint, although in that case I used an embeded code widget within a SharePoint page to insert my HTML/SCRIPT.

c5

#lazy #productive

 

IBMSBT Playground gets a face lift

I noticed a couple of days ago that the “face” of the IBM Social Business Toolkit “playground” on the greenhouse site has undergone a face lift.

https://greenhouse.lotus.com/sbt/sbtplayground.nsf

This image was taken from the site March 4th 2015

s16

 

and this is how it looks today (March 22nd 2015)

s1

 

Not an improvement in this developers opinion because now I have no reference point as to the section I am looking at. Not a problem if you clicked in there – but if you bookmarked the URL you are if for a world of confusion.

An example of not considering the User Experience.

 

IBMSBT in XPages: Custom Business Cards

In this article I will introduce the JavaScript API for Social Business Toolkit and show how to make a simple custom vCard using the jQuery hovercard.js plugin.

Introduction

When you are modifying on premises Connections there is an API interface provided and described by IBM for integration of the Profiles Business Card. I could not find this piece of code however within Smartcloud. The Playground API also does not provide an example of profile vcard within Smartcloud. I guess it must be in there somewhere, but I decided to make my own. If one is available, please point me at it…….

Using the SBT JavaScript API to get Profile information

The SBT JavaScript API is REST based and provides a limited set of functionality to access information from the connections installation. I found the following example in the Playground. Looking at the example in the playground the critical URL for accessing Profile information is this

url: ‘xsp/.sbtservice/proxy/smartcloud/lotuslive-shindig-server/social/rest/people/lotuslive:user:’+userId+’/@self?format=json’,

where userId is the id of the user you wish to see the information from. In my case a JSON object called entry is returned with many options.

a1

Hovercard.js

Using the jQuery plugin hovercard.js I was easily able to create the HTML which I wanted to put within a card. This HTML is hidden on the XPage and the actual HTML I want in all within the selector class “js-vcardHTML”

<div style="display:none" class="js-vcardHTML">
	<div class="row ">
		<div class="col-sm-8">
			<div class="vcardName"></div>
			<div class="vcardOrg"></div>
			<div class="vcardEmail"></div>
			<div class="vcardPhone"></div>
		</div>
		<div class="col-sm-4 vcardImage">
		</div>
	</div>
	<div class="row" style="margin-top: 5px; border-top: 1px dashed #a6a6a6">
		<div class="col-sm-6">
			Profiles
		</div>
		<div class="col-sm-6">
			Files
		</div>
	</div>
</div>

Within the application code I instantiate the hovercard.js code in the following manner. It retrieves the HTML from within js-vcardHTML. Populates it with the data from within the “entry” JavaScript object and then displays it on hover.

$(".contacts").hovercard({
	self: this,
	detailsHTML: $('.js-vcardHTML').html(),
	width: 350,
	cardImgSrc: '',
	onHoverIn: function () {
		// set your twitter id
		var userId = 'markyId'; //calculated outside of this demonstration

		$.ajax({
			  url: 'xsp/.sbtservice/proxy/smartcloud/lotuslive-shindig-server/social/rest/people/lotuslive:user:'+userId+'/@self?format=json',
			  type: 'GET',
			  dataType: 'json',
			  beforeSend: function () {
				$(".vcardEmail").prepend('<p class="loading-text">Loading Business Card...</p>');
				$(".vcardOrg").text("");
				$(".vcardImage").html("");
			  },
			  success: function (data) {
				self.cardImgSrc=data.entry.photo
				console.log(data)
				console.log(data.entry)
				//$(".vcardName").text(data.entry.displayName);
				$(".vcardEmail").text(data.entry.emailAddress);
				$(".vcardOrg").text(data.entry.org.name);
				$(".vcardImage").html("<img src='https://apps.na.collabserv.com/contacts/profiles/photo/"+userId+"'/>");
			  },
			  complete: function () {
				$('.loading-text').remove();
			  }
			});

	}
});

a2

Conclusion

In this article I have shown how we can retrieve profile information from the Smartcloud JavaScript API and how we can create our own custom business card using the hovercard.js jQuery plugin.

Amusing that the API reference still contains a reference to Lotus – draw your own conclusions 🙂

Keeping him alive in the Clacks on Domino – thank you Sir Terry Pratchett

I already did this on my servers last week and didn’t think about blogging it. But I saw the post on IBM HTTP server and figured I would anyway.

You have to enable IHS on Domino and then add the following line of code:

header set X-Clacks-Overhead “GNU Terry Pratchett”

 

Sir Terry, I have read/own more of your books than all other authors combined. You made a very significant impact on my younger self and you will always be remembered.

Thank you so much, Sir.

terry

 

With thanks to this post: –

GNU Terry Pratchett

IBMSBT in XPages: My Communities

In this article I will describe how to display a list of “My Communities” in an XPage. To do this I will have to create an ArrayList of communities and use a repeat control in an XPage to display them.

Getting My Communities

As I showed in this previous blog post there were some interesting issues in setting up the managed beans for getting the communities out of connections/smartcloud.

But in quick review this is the code for getting my communities.

package com.xomino.sbt;

import java.util.Collection;
import javax.faces.context.FacesContext;

import com.ibm.sbt.services.client.ClientServicesException;
import com.ibm.sbt.services.client.connections.communities.Community;
import com.ibm.sbt.services.client.connections.communities.CommunityList;
import com.ibm.sbt.services.client.connections.communities.CommunityService;
import com.ibm.sbt.services.client.connections.communities.CommunityServiceException;
import com.ibm.sbt.services.endpoints.Endpoint;
import com.ibm.xsp.extlib.util.ExtLibUtil;

public class Utils {

	public static void checkAuthentication() throws ClientServicesException{
		Endpoint theEndpoint = getEndpoint();
		if (!theEndpoint.isAuthenticated()){
			theEndpoint.authenticate(true);
		}
	}

	public static Endpoint getEndpoint(){
		Endpoint endpoint = (Endpoint) ExtLibUtil.resolveVariable(FacesContext.getCurrentInstance(), "smartcloud");
		return endpoint;
	}

	public static Collection<Community> getCommunities() throws CommunityServiceException{
		CommunityService svc = new CommunityService();
		CommunityList communities = svc.getMyCommunities();
		return communities;
	}
}

What is interesting is that the svc.getMyCommunities() returns a “Collection” and the code assist not only told me this, but it changed the return of the method “Collection” and added the import java.util.Collection.

So that is all well and good – but then how do I get that only my XPage?

Well I actually used the JavaDoc !
c1

So then in the XPage I used a repeat control to iterate through the “collection”

<xp:repeat id="repeat2" rows="30"
	value="#{javascript:com.xomino.sbt.Utils.getCommunities()}" var="myCommunities">
	<xp:div styleClass="readonly" disableTheme="true">
		<xp:text disableTheme="true">
		  <xp:this.value><![CDATA[#{javascript:myCommunities.getTitle()}]]></xp:this.value>
		 </xp:text>
	</xp:div>
</xp:repeat>

and there we have it.

c2

So what is a Collection exactly? I guess I ought to find out……