Posts Tagged ‘xpages’

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

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

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