Adding a Dojo tooltip to your XPages valuepicker

Here is a simple usability tip.

In some corporate organizations not all members are acquainted with modern, modest UI. For those an icon does not always tell them that an action lies underneath it.

For example the value picker from the Extension Library offers you a nice magnifier icon out of the box (which you can set to a custom icon in case desired). If you want to help your senior colleague that there lies no danger beneath clicking that icon you could provide an alternative tooltip for it.

Here is some sample code how you could do this:

<section class=”container”>
<div class=”row”>
<div class=”col-sm-1″><label for=”exampleInputName2″>Name</label></div>
<div class=”col-sm-2″><xp:inputText id=”inputText1″></xp:inputText></div>
<div class=”col-sm-9″>
<span id=”valuePickerTooltip”>
<xe:valuePicker id=”valuePicker1″ for=”inputText1″>
<xe:this.dataProvider>
<xe:dominoViewValuePicker databaseName=”FakeNames40K.nsf”
viewName=”People”>
</xe:dominoViewValuePicker>
</xe:this.dataProvider>
</xe:valuePicker>
</span>
<xe:tooltip id=”tooltip1″ for=”valuePickerTooltip”
label=”Pick a Person from the Address Book” position=”after”>
</xe:tooltip>
</div>
</div>
<div class=”row”>
<div class=”col-sm-9 col-sm-offset-1″><button type=”submit” class=”btn btn-primary”>Send invitation</button>
</div>
</div>
</section>

As a result the user will be presented something as followed when hovering over that icon:

tooltip

Single Page Application tutorial

After watching the video on YouTube on the Single Page Application wizard I became curious and decided to take a test and mobilize an application myself. I choose the infamous “fake names” application for this.

I have written a blog article/tutorial about it. Here you can read it: ‘Single Page Application Wizard‘.

Summary

With the Single Page Application control you can rapidly mobilize a Notes application. The wizard is intuitive although you need to understand some basics of mobile development.

Unfortunately the wizard is not complete and forces you to apply some coding.

Infinite Scroll

The infiniteScroll property for a Data View control is enabled by default in the Singe Page Application. This great new feature allows users to fetch new rows of data by scrolling down the list.

You are almost stupid if you disable this feature.

Recommendations

  • Ability to apply basic CRUD Tab Bar Buttons to a Document Viewer Application Page.
  • On a Document Viewer page it would be easier to add fields instead of removing most of all the fields that would otherwise be applied by default. In mobile apps the number of fields you want to display is probably less than in a Notes client application.
  • Ability to re-open the wizard after you have pressed ‘Finish’.
  • It would be great to have message popups when a user performs an action that he/she is not allowed to do. At the current stage there is default no mechanism for this. Examples: “You are not authorized to perform this action”, “You have insufficient access rights”.

m_mobile

m_people

m_person

Presentations from EntwicklerCamp 2012 available

I have experienced that IBM has some problems linking to their material that lies out in the open, but I hope this post does not cause the same kind of trouble. I also know the solution in case needed: contact the content publisher to remove the files…

Nevertheless Entwicklercamp sounds like a excellent technical conference and for those of you who have no problems with reading a bit of German (not all presentations are in German, by the way) here are some interesting presentations:

Track 0 – Session 1 – Eröffnungssession – Rudi Knegt (link)

Track 0 – Session 2 – Opening Session – Phil Riand (link)

Track 0 – Session 3 – Speeddemoing – Diverse (link)

Track 0 – Session 5 – Closing Session: Ein (grausamer Selbstversuch) – 5 Monate ohne Lotus Notes – Werner Motzet

“Ein (Arbeits-)Leben ohne Lotus Notes” / “Ein (grausamer Selbstversuch) – 4 Monate ohne Lotus Notes” (link)


Track 1 – Session 1 – XPages – 1 – Grundlagen – Ulrich Krause (link)

Track 1 – Session 2 – XPages: Practical Ideas for Converting Existing Notes Applications – Matthew Fyleman (link)

Track 1 – Session 3 – XPages – 3 – eXtension Library – Viagra für die XPages – Ulrich Krause (link)

Track 1 – Session 4 – XPages – 4 – IBM oneUI + MyTheme = myUI – Manfred Meise (link)

Track 1 – Session 5 – XPages – 5 – Wie mache ich meine XPages Applikationen ‘social’? – Niklas Heidloff (link)

Track 1 – Session 6 – XPages – 6 – XPages Extensibility API – going deep – René Winkelmeyer (link)

Track 1 – Session 7 – Zähme den Tiger – Java-Entwicklung in Notes und Domino – Bernd Hort (link)

Track 1 – Session 8 – XPages – 8 – Nutzung des Dojo Toolkits zur Optimierung bestehender Notes-Web-Anwendungen – Matthias Bierl (link)


Track 2 – Session 1 – Extending Lotus Notes – Widgets, Livetext, Plugins – Detlev Poettgen (link)

Track 2 – Session 3 – Agile Softwareentwicklung mit LotusNotes – Werner Motzet (link)

Track 2 – Session 4 – Ich weiß was du diesen Sommer tun wirst – Gregory Engels (link)

Track 2 – Session 5 – Erfolgreiches Projektmanagement mit agilen Methoden – Christian Habermueller (link)

Track 2 – Session 6 – Make the impossible possible with XPages – Frank van der Linden (link)

Track 2 – Session 7 – Connect your Lotus Notes app to the Activity Stream with XPages – Frank van der Linden (link)

Track 2 – Session 8 – Keine Angst vor großen Tieren – Peter Klett (link)


Track 3 – Session 1 – Rediscover the Power of LotusScript in Notes/Domino 8.5 – Rocky Oliver (link)

Track 3 – Session 2 – Die besten Open Source Projekte von OpenNTF – Niklas Heidloff (link)

Track 3 – Session 3 – Richtig(er) Kommunizieren! – Wie bringe ich meine Botschaft rüber? – Jürgen Kunert (link)

Track 3 – Session 4 – XPages und Domino App Dev Erweiterungen – Phil Riand und Niklas Heidloff (link)

Track 3 – Session 5 – Turbocharge Development in Notes/Domino 8.5 – with @Formulas! – Rocky Oliver (link)

Track 3 – Session 6 – Mobiler Zugriff auf Notes Daten – Matthias Schneider (link)

Track 3 – Session 7 – Es gibt keine Ausreden mehr – eGit im DDE : Versionskontrolle leicht gemacht – Holger Chudek (link)

Track 3 – Session 8 – Using the XPages Mobile Controls… and looking at alternatives – Rich Sharpe (link)


Track 4 – Session 1 – Security in Notes – Manfred Meise (link)

Track 4 – Session 2 – Workflow – Richtig analysieren, dokumentieren und schlüssig hinterfragen – Christian Habermueller (link)

Track 4 – Session 3 – Lotus Protector programmieren – Matthias Schneider (link)

Track 4 – Session 4 – WebServices unter Notes/Domino – Tim Pistor (link)

Track 4 – Session 5 – Hilfe, ich habe geerbt! – Bernhard Köhler (link)

Track 4 – Session 6 – NoSQL-Datenbanken – ein Überblick – Karsten Lehmann (link)

Track 4 – Session 7 – Notes und die Zeit – Bernhard Köhler (link)

Track 4 – Session 8 – Schnittstellendesign mit dem Tivoli Directory Integrator – Am Beispiel SAP – Andreas Artner (link)


In case you are a bit lazy or dont care about bandwidth: <here> you can find the presentations archived together by track…

There are also some hands-on sessions available:

Hands-On 1 – Javascript – die ersten Schritten – Manuel Nientit (link)

Hands-On 3 – XPages – the first Steps 1 – Howard Greenberg (link)

Hands-On 4 – XPages – the second steps 2 – Howard Greenberg (link)

Hands-On 5 – Signierung und Verteilung von Plugins für den Notes Client – Detlev Poettgen (link)

Hands-On 6 – LotusScript – so einfach geht es los – Peter Klett (link)

Hands-On 7 – Mobiler Zugriff auf Notes Daten – Matthias Schneider (link)

Hands-On 8 – XPages Extensibility API – first steps – René Winkelmeyer (link)

Btw, all links were collected from this source.

Working with LinkedIn in XPages – People Search

Here is another example for accessing LinkedIn’s API’s in XPages. This example contains code for performing a people search within your network.

I will include the example later in the next release of LinkedIn controls.

<?xml version=”1.0″ encoding=”UTF-8″?>
<xp:view xmlns:xp=”http://www.ibm.com/xsp/core&#8221;
xmlns:xc=”http://www.ibm.com/xsp/custom&#8221; createForm=”false”>
<head>
<title>LinkedIn JavaScript API Sample Application</title>
<xc:ccLinkedInAPIKey key=”//your  domain key here”></xc:ccLinkedInAPIKey>
<script type=”IN/Login”></script>
<xp:scriptBlock id=”scriptBlock3″>
<xp:this.value><![CDATA[function PeopleSearch() {
// Call the PeopleSearch API with the viewer’s keywords
// Ask for 4 fields to be returned: first name, last name, distance, and Profile URL
// Limit results to 10 and sort by distance
// On success, call displayPeopleSearch(); On failure, do nothing.
var keywords = dojo.byId(“#{id:searchBox}”).value;
IN.API.PeopleSearch()
.fields(‘firstName’, ‘lastName’, ‘distance’, ‘siteStandardProfileRequest’)
.params({‘keywords': keywords, ‘count': 10, ‘sort': ‘distance’})
.result(displayPeopleSearch)
.error(function error(e) { /* do nothing */ }
);
}]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id=”scriptBlock4″>
<xp:this.value><![CDATA[function displayPeopleSearch(peopleSearch) {
var div = document.getElementById(“peopleSearchResults”);
div.innerHTML = “<ul>”;
// Loop through the people returned
var members = peopleSearch.people.values;
for (var member in members) {

// Look through result to make name and url.
var nameText = members[member].firstName + ” ” + members[member].lastName;
var url = members[member].siteStandardProfileRequest.url;

// Turn the number into English
var distance = members[member].distance;
var distanceText = ”;
switch (distance) {
case 0: // The viewer
distanceText = “you!”
break;
case 1: // Within three degrees
case 2: // Falling through
case 3: // Keep falling!
distanceText = “a connection ” + distance + ” degrees away.”;
break;
case 100: // Share a group, but nothing else
distanceText = “a fellow group member.”;
break;
case -1: // Out of netowrk
default: // Hope we never get this!
distanceText = “far, far, away.”;
}
div.innerHTML += “<li><a href=\”” + url + “\”>” + nameText +
“</a> is ” + distanceText + “</li>”
}
div.innerHTML += “</ul>”;
}]]></xp:this.value>
</xp:scriptBlock>

</head>

<h1>Find People on LinkedIn</h1>
<xp:inputText id=”searchBox” defaultValue=”xpages”></xp:inputText>
<xp:button value=”Search” id=”button1″>
<xp:eventHandler event=”onclick” submit=”false”>
<xp:this.script><![CDATA[
PeopleSearch();]]></xp:this.script>
</xp:eventHandler>
</xp:button>
<div id=”peopleSearchForm”></div>
<div id=”peopleSearchResults”></div>
</xp:view>

Custom control ccLinkedInAPIKey you can find in the LinkedIn controls project.

Without any styling your result could look something similar like this:

Working with LinkedIn in XPages – Presenting a User’s Network Stream

Here is another example for accessing LinkedIn’s API’s in XPages. This example contains code for a custom control that will present the users network stream:

<?xml version=”1.0″ encoding=”UTF-8″?>
<xp:view xmlns:xp=”http://www.ibm.com/xsp/core&#8221;
dojoParseOnLoad=”true”>
<xp:this.resources>
<xp:styleSheet href=”/stream.css”></xp:styleSheet>
</xp:this.resources>
<head>
<xp:scriptBlock id=”scriptBlock1″>
<xp:this.value><![CDATA[function loadData() {
// we pass field selectors as a single parameter (array of strings)
IN.API.NetworkUpdates()
.params({type:”SHAR”})
.result(function(result) {
var streamHTML = “”;
for (var update in result.values) {
var thisupdate = result.values[update]

// Build each individual stream update item
person = thisupdate.updateContent.person
var thisHTML = “<div>”;

// Person’s picture, linked name, and status
thisHTML += “<div>” ;
thisHTML += “<img align=’left’ height=’50’ src='” + person.pictureUrl + “‘></a>”;
thisHTML += “<a href='” + person.publicProfileUrl + “‘>”;
thisHTML += “<span>” + person.firstName + ” ” + person.lastName + “</a></span>”;
thisHTML += “<p>” + person.currentShare.comment + “</p></div></div>”;

// Slap this onto the HTML we’re building
streamHTML += thisHTML;
}
dojo.byId(“stream”).innerHTML = streamHTML;
});
}]]></xp:this.value>
</xp:scriptBlock>
</head>
<body>
<div id=”stream”></div>
<script type=”IN/Login” data-onAuth=”loadData”></script>
</body>
</xp:view>

Also here remember to include the LinkedIn domain API key. The result could like something as this:

Applying some oneUI classes could improve the presentation… :-?

Lotusphere – Day 1

Here is a summary of my experiences on day 1:

OGS

This or this as opener?

I guess I share similar feelings with others on this one. Although Notes Next looked pretty awesome in the demos! I just wonder if ‘older’ users can choose a ‘simple’ version in their preferences?

I kinda liked the theme choice even when it is not techie.

Rated: 6

 

AD101 IBM Lotus Domino Designer – Today and tomorrow

Most of the new features were already known and no big announcement for tomorrow so a bit ‘modest’ (the work done is nevertheless highly appreciated).

Rated: 6

 

AD110 Building XPages by the book

I visited this session in the hope to be able to go through the 800+ pages a bit more effective.

The book looks promising and I guess I have to read it from the beginning till the end.

Actually kinda cool to applause to Philippe Riand, chief architect of XPages!

Rated: 7

 

 

AD307 Application Development with the IBM Lotus Sametime SDK

The SameTime Proxy Toolkit on JavaScript and Dojo looks cool!

Rated: 7

 

 

AD111 Developing Mobile Apps for Webkit Browsers Using XPages

A quick go-through + demo of 2 excellent OpenNTF projects. I hope to be working on mobilizing apps in the near future.

Rated: 9

 

 

AD107 Microsoft Sharepoint Meets IBM Lotus Domino Development Deep Dive

When east meets west – There’s gonna be one hell of a mess – Or Love Is A Battlefield Of Wounded Hearts.

Rated: 9

 

 

Product Showcase Reception

A cold beer was exactly what I needed to flush away the hangover of the welcome reception yesterday.

Rated: 10