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

 

Scoping your beans correctly with the IBM Social Business Toolkit

If you are setting up the IBM Social Business Toolkit within your XPages application – the faces-config.xml is where you configure your SBT connection to Smartcloud/Connections. This particular issue arose for us recently but makes perfect sense once we understood what was going on.

Initially we had the following and everyone who accessed the application got the same list of one user’s files. We struggled to figure out why.

In the faces-config.xml one of the required parameters is the scope of the CredStore managed bean.

 <managed-bean>
    <managed-bean-name>CredStore</managed-bean-name>
    <managed-bean-class>com.ibm.sbt.security.credential.store.MemoryStore</managed-bean-class>
    <managed-bean-scope>application</managed-bean-scope>
  </managed-bean>

Turns out it was always the first person who logged in – which makes sense as the bean has application scope. The bean stays in scope and then everyone else starts to use it as well – giving them the wrong files.

The right answer is to use session scope for the CredStore bean (and smartcloud bean) which means that it is only in scope for the requests which are being by the session user – which is for each user exactly what you want.

 <managed-bean>
    <managed-bean-name>CredStore</managed-bean-name>
    <managed-bean-class>com.ibm.sbt.security.credential.store.MemoryStore</managed-bean-class>
    <managed-bean-scope>session</managed-bean-scope>
  </managed-bean>

 

IBMSBT in XPages: Getting set up with a Social Business Toolkit (Part #2)

In this article I will show how to connect to Connections Cloud and in turn how to use the Java API to display “My Files” on an XPage using a simple XPages repeat control.

In the previous article I showed how to create an internal App within your Connections Cloud account. In this article we will look at how to configure your XPages application to connect to the cloud.

You will see references to “– TS” in this article and that would be where Mr Toby Samples has provided me the correct language as opposed to the dribble I originally wrote – #ENaT

Setting up the face-config.xml

In my case I am connecting to Connections Cloud so I will be using the managed bean for that.

Extract the face-config.xml from the sample XPagesSBT.nsf database and copy the contents into a new database. I cleaned mine up and removed all the beans that I will not be using. I am then left with the following: CredStore and smartcloud.

a1

 

Within the Smart cloud bean we have to insert the appId, consumerKey and the consumerSecret – which of course do not coincide with the names on the smart cloud screen.

s15

“The CredStore is referenced as a value of where to store Credentials on the EndPoint in the other managed bean. – TS”

Authenticating with Connections Cloud

Create a new Java Class Utils

package com.xomino.sbt;

public class Utils {

}

Within there we are going to need to do a number of things but at a high level we need to authenticate with smartcloud and then get the list of myFiles

So I am not going to lie to you – I didn’t find this Toby did but here is how I understand it. Looking at the Javadocs (*crying*) – http://infolib.lotus.com/resources/social_business_toolkit/javadoc/index.html we can find the class which is referenced from the bean. This is where my dislike and distrust Java throws up a flag and tells me that Javadocs was only written for people who know what they are doing. Look at the help docs for a Github JavaScript project – easy to read – JavaDocs like these – absolutely not. But I digress and continue…..

<managed-bean-class>com.ibm.sbt.services.endpoints.SmartCloudOAuthEndpoint</managed-bean-class>

s2

And within there you can find “isAuthenticated()”

s3

from that you can see that it is a

  • public class which return a boolean (true/false).
  • It is copied from the Endpoint interface (don’t understand interfaces yet)
  • returns true or false.

The Endpoint

“The endpoint is more of a Provider of data that you have to authenticate.  similar to a Database or a Rest Service – TS”. In this case, the Endpoint is the information provided in the managed bean. The URLs for authentication via OAuth, the keys and so forth. So first thing we need to do is get the Endpoint from the Bean. Within Utils:

s5

  • public static Endpoint getEndpoint()
    • a public method
    • static means that it cannot be instantiated by another method
    • Endpoint means “In this case Endpoint means that the method must return an object that implements the Endpoint Interface. – TS
    • getEndpoint() the name of our actual method
  • Endpoint endpoint = ExtLibUtil.resolveVariable(FacesContext.getCurrentInstance(), “smartcloud”);
    • Endpoint
    • variable name endpoint
    • ExtLibUtil.resolveVariable(FacesContext.getCurrentInstance(), “smartcloud”); is how we get the value of the smartcloud bean. The faces-config.xml is used to expose that to the application and within the context of this database we can get it in this fashion.
  • return endpoint
    • returns the managed-bean smartcloud

At this point I would like to add that there is no way that you can possibly work this out for yourself without help from someone else. This is part of the scary thing for Java, it is hard to know where the heck and what the heck to do. But unless you do it you won’t know. I don’t think the intricacies of the language are that hard – it is just the volume. Part of doing this and blogging it, is so that I haev a code repository building up. I cannot remember all the code I have written, but if I remember where it was I can go get it again later. Anyway back to the code

Looking at the code it is all underlined and there are a bunch of errors all over the place. This is where Eclipse is actually awesomely helpful and you start to get busy fixing the errors.

Mousing over the errors you can see Quick fixes to the problems

s6

Select “Import ‘ExtLibUtil’ ” and magically appears at the top of the page – and no red underline now – wooo

s7

so go through and complete the others……and then a whole new error comes up

s8

“So “ExtLibUtil.resolveVariable” always returns a java.lang.Object, but the first part of the expression expects an object that implements the Endpoint Interface so you have to force it (Cast) to be an Endpoint, if its not really an Endpoint object it will blow up when you run it. with a Class Cast Exception – TS”

Fixed that and now on the Authentication

Authentication

We can now start to create a “checkAuthentication()” method within our class. This will be called from the beforePageRender within our XPage – and will check to make sure that we are. If it isn’t then the page will be automatically redirected to smartcloud to log in.

We can use the Eclipse type ahead which is very helpful in getting the code right and not typing the wrong values

s9

uuurgh another error

s10

If you remember from the Javadoc, the isAuthenticated() method throws a clientServicesException, which means when it fails that is the error type which is bubbled up to the top. You know when you see the stack trace and you have screwed something up in XPages you get the java screen of death – that comes from here. Needs to be added otherwise the class will not compile.

Fixed

s11

 

and then finally we have finished this authentication piece !! yeah wow !
NOTE: In the Javadocs you can see this “Fields inherited from class com.ibm.sbt.services.endpoints.OAuthEndpoint”

make sure that when you import the option for Endpoint you pick the right one (there are two). The Javadocs do have their uses, assuming you understand them !!

s12

ok so now to put that on an XPage

the XPage

This is pretty simple. In the XPages beforeRenderResponse event we add the following code to force authentication

 

<xp:this.beforeRenderResponse>
	<![CDATA[#{javascript:com.xomino.sbt.Utils.checkAuthentication();
	}]]>
</xp:this.beforeRenderResponse>

 

After that we are going to add a display field to just show whether or not we are authenticated – the displayName() of my Profile. (Wow this is a LONG blog post).

Getting my profile

I went to the Playground and looked at the Java example for Smartcloud get my Profile. Now this is a JSF example but what I was looking for was the Objects and methods for getting the profile. I am really proud that this worked first time – means something is sinking in…..

s16

 

I added a new method (which I knew was wrong and basic) in my Utils function and obviously got errors…..

Correct the Profile Objecta1

Correct the ProfileService Object

a2

Correct the exception handling

a3

Correct the return to be a String (not void)

a4

and then we have our new class

a5

 

In the XPage I created a computed field which was bound to the class Method getProfileDisplayName()

<xp:text escape="true" id="computedField1"
	value="#{javascript:com.xomino.sbt.Utils.getProfileDisplayName()}">
</xp:text>

 

And then I loaded up my XPage…………

First thing that happens – Authentication prompt for Connection Cloud

s13

and then *amazingly*

a6

 

I don’t know about you – but I am staggered !!!

Conclusion

WOW this is a long post (probably one of the longest I have ever done). Hopefully I have clearly shown how to set up the Connections Cloud development environment and how to show your first example within your XPage.

Let’s be clear – I am in no way shape or form a Java developer now – but, and this in significant to me, I now know a lot about how to make things work for me within the development environment.

I am pretty stoked actually about how the Profile thing worked – then though I have not the slightest idea how 🙂 That’s a weird, cool, scary feeling.

*rubs hands* Now time to start making something really useful 🙂

 

Toby Comment

In your images you chose to import the “com.ibm.sbt.service.client.smartcloud.profiles” package instead of “com.ibm.sbt.services.client.connections.profiles”  which does in fact work, but its not really best practice.  If you choose the other one which is an interface the code will easily work with all of the other types of Endpoints, because you chose Smartcloud, it will only work with Smartcloud.  Not necessarily a bad thing, but usually we try to use the most generic class/interface possible.  TS