Archives for the ‘XPages’ Category

28 Aug 2015
4

South Africa’s IBM Notes and Domino User Group is now on Meetup.com

It’s finally here!!! South Africa’s IBM Notes, Domino and XPages User Group (aka SALUG) has just been launched on Meetup.com.

In case you don’t know, IBM Notes & Domino is a platform for rapidly developing rich web applications thanks to modern technologies and frameworks including XPages, jQuery, Dojo, Bootstrap and more.

This meetup is for those interested in one or more of the various areas that make up the IBM Notes & Domino ecosystem. Whether you’re a newbie, a specialist, or a general user of the technology, there’s a place for you here. Activities will include local meetups, events, workshops, skills growth, showcases, demos and much much more.

We are in the beginning stages of this group and will soon be uploading valuable content as well as scheduled meetups. In the meantime, it will be great to start connecting with everyone.

Click here to join now and stay tuned for more. See you on the other side :)

20 Aug 2015
6

IBM Domino Tip: Pass HTML to RichTextItem without using MIMEEntity

Notes8_9Logo

This is a quick tip on how to include HTML when populating a RichTextItem object without using MIMEEntity in IBM Notes/Domino.

First some venting

It’s amazing how certain easter egg features have been available in the Domino Object Model since release 5, that I’ve managed to keep missing, yet constantly required. This morning I happened to stumble across one of them.

For the longest time, whenever I needed to send out a mail programatically via code that needed even the slightest bit of HTML, I would resort to using a MIMEEntity object. Which is great don’t get me wrong, but most of the time it’s actually overkill. This morning, all I wanted to do in my RichTextItem is include a URL (Not a doclink, but a predefined URL). I would do this by using:

RichTextItem.appendText("www.ukuvuma.co.za");

This was never an issue for me back in the day because, in IBM Notes Mail, Notes would see it as a url and convert it into a hyperlink. In my particular case when testing with Gmail and Outlook, the url just showed as plain text and nothing more. “Oh crap!” are the words I believe I used this morning. I kept thinking…”here we go again with MIMEEntity“.

Thankfully, I took a minute to double check the Designer Help. At first I noticed that there were no real options for me in the RichTextItem object, but when taking a look at the RichTextStyle object (this is used to provide standard font changes, etc. in your RichTextItem), I noticed what is right now to me the most beautiful object property of the year….PassThruHTML!!!

The Solution

Using my example above, assuming you have a RichTextStyle object initiated, all I needed to do was the following:

RichTextStyle.setPassThruHTML(true);
RichTextItem.appendStyle(RichTextStyle);
RichTextItem.appendText("<a href="www.ukuvuma.co.za">www.ukuvuma.co.za</a>");
RichTextStyle.setPassThruHTML(false);
RichTextItem.appendStyle(RichTextStyle);

That’s it. Domino converts the text into HTML and applies it to your RichTextItem object. I’ve spent the day kicking myself for not seeing this before, but I think I’m over it now. As long as this blog post can help others early enough from following the same road I travelled.

Till next time :)

John

30 Jul 2015
0

XPages and Bootstrap Tip: Style the File Download control

This is a quick tip on how to convert a plain looking XPages File Download control into a Twitter Bootstrap style Table.

Everyone should know by now that the latest XPages Extension Library (2 versions ago actually) includes the Twitter Bootstrap framework. While is this brilliant, the reality is that many of us already have existing designs where Twitter Bootstrap is manually included. This means that XPages controls used in these designs look plain when compared to adding bootstrap-styled HTML.

A good example is the File Download Control below. I’ve added this control to my XPages app that has Twitter Bootstrap manually configured, but the control is not affected by this framework:

FileDownloadExample1

If you view the HTML source of the File Download Control in Firebug, you’ll see it’s just a table with row and column tags. This is good news, because Twitter Bootstrap’s table designs follow the same pattern, which means that by just adding 2 Bootstrap classes to the control, you change look of it to:

FileDownloadExample2

To achieve this, all you have to do is add the “table” and “table-hover” class to the File Download Control. See example below:

<xp:fileDownload
   value="#{attachmentsDoc.Attachments}"
   rows="1000"
   id="downloadAttachments"
   displayLastModified="false"
   hideWhen="true"
   allowDelete="true"
   displayCreated="false"
   styleClass="table table-hover">
</xp:fileDownload>

You can imagine that this one example opens a series of additional opportunities for those who are manually applying the Twitter Bootstrap framework to their XPages Design.

Till next time
Cheers :)

26 Jun 2015
3

Video Tutorial: Bootstrap Datepicker in XPages – Part 2

In this video tutorial, I demo how to modify the bootstrap date-picker that I introduced in Part 1, to be rendered as an inline date-picker instead of a popup.

Below is the URL to access the online date-picker sandbox dashboard, which is a great service to assist setting up the date-picker control:

Datepicker for Bootstrap Sandbox

Once again, a massive thanks to Mr David Leedy for presenting my video tutorials on NotesIn9, and for also making the NotesIn9 series freely available to the public. I know he spends his personal time getting out these videos and I know I speak for the entire community that it’s forever appreciated!!

Enjoy :)
John
25 Jun 2015
3

Video Tutorial: Bootstrap Datepicker in XPages – Part 1

In this video tutorial, I demo how to include a bootstrap date-picker into an XPages application that’s using the Twitter Bootstrap framework.

Below is the URL to access the online date-picker sandbox dashboard, which is a great service to assist setting up your date-picker control:

Datepicker for Bootstrap Sandbox

The following is the code to create the Bootstrap Resources custom control (ccBootstrapResources), which will reference the necessary Twitter Bootstrap and jQuery files via CDN services:

<xp:view
	xmlns:xp="http://www.ibm.com/xsp/core">
	<xp:this.resources>
		<xp:script
			src="https://code.jquery.com/jquery-1.11.3.min.js"
			clientSide="true">
		</xp:script>
		<xp:script
			src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"
			clientSide="true">
		</xp:script>
		<xp:styleSheet
			href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
		</xp:styleSheet>
	</xp:this.resources>
</xp:view>

The following is the code to create the Datepicker Resources custom control (ccDatePickerResources), which will reference the necessary Bootstrap Datepicker files that need to be added to the XPages design in the Web Content folder:

<xp:view
	xmlns:xp="http://www.ibm.com/xsp/core">
	<xp:this.resources>
		<xp:script
			src="bootstrap-datepicker/js/bootstrap-datepicker.min.js"
			clientSide="true">
		</xp:script>
		<xp:styleSheet
			href="bootstrap-datepicker/css/bootstrap-datepicker3.min.css">
		</xp:styleSheet>
	</xp:this.resources>
</xp:view>

A special thanks to Mr David Leedy for presenting my video tutorial on NotesIn9.

Enjoy :)
John