Archives for the ‘XPages’ Category

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!!

NOTE: Apologies everyone for not embedding the video tutorial in this blog post. We are having some technical difficulties.

Click here to watch the video tutorial

Enjoy :)
John
25 Jun 2015
0

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.

NOTE: Apologies everyone for not embedding the video tutorial in this blog post. We are having some technical difficulties.

Click here to watch the video tutorial

Enjoy :)
John
24 Jun 2015
2

Video Tutorial: Bootstrap-style your XPages Pager control

In this video, I show you how to easily bootstrap-style the XPages Pager control in your app without needing to reference Twitter Bootstrap resources.

Thanks to 2 XSnippets i’ve published on OpenNTF, to implement this functionality is as easy as copy and paste. You can reference the 2 XSnippets using the below links:

OpenNTF XSnippet: Twitter Bootstrap Pager Template

OpenNTF XSnippet: Twitter Bootstrap Pager Template Stylesheet

Click here to reference Twitter Bootstrap’s Pagination Control:

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

NOTE: Apologies everyone for not embedding the video tutorial in this blog post. We are having some technical difficulties.

Click here to watch the video tutorial

Enjoy :)
John
15 May 2015
10

XPages Tip: Filter your design elements for quicker navigation

This is a quick tip on how to filter your design elements in Domino Designer to help quickly find what you’re looking for.

I have to laugh at myself sometimes. 80% into one of my recent XPages Projects, I found myself completely frustrated, trying to pinpoint 1 of many custom control designs in Domino Designer. I almost fell off my chair when I realised that the solution was staring me in the face the entire time.

In Domino Designer, irrelevant of if you’re viewing XPages design elements, custom controls, views, forms, etc, there is a filter option on the top right side of the content Pane. This allows you to track a certain design element using a keyword. As long as that keyword exists in the design element name or alias column, you’re good to go.

EXAMPLE OF FULL LIST OF VIEWS

Screen Shot 2015-05-15 at 11.35.24 AM

EXAMPLE WHERE FILTERED BY KEWORD “Reports”

Screen Shot 2015-05-15 at 11.36.12 AM

Pity I only found this out now :(

Hope this helps.

Cheers. John

UPDATE:

Thanks to Tommy Valand and Per Lausten for suggesting Ctrl + Shift + R, which searches for any design element by name in applications that are open in DDE.

Per also referenced a great blog post: “10 Eclipse Navigation Shortcuts every Java programmer should know

14 May 2015
5

Java XSnippet Published: Translate an ArrayList to a Vector

Here is a Java XSnippet I published the other day on how to manually convert an ArrayList Object to a Vector Object.

UPDATE

Thanks to “Martin Rolph” and “Jesse Gallagher” for providing a much simpler method of getting the same result without having to use my XSnippet. I’ve decided to keep my XSnippet published as I do feel it will add value as a reference point.

ORIGINAL POST

Click here to view XSnippet

When binding Scoped Variables to a List Control in XPages, the values returned are defined as an ArrayList. You might want to convert these values into a Vector for whatever reason.

Quick Example of how to use XSnippet:

doc.replaceItemValue("MultiValueField", TranslateArrayListToVector(viewScope.get("Values"));

Martin’s and Jesse’s much better alternative:

doc.replaceItemValue("MultiValueField", new Vector(viewScope.get("Values")));