Archive | September 2013

XPages Tip: Fixing a Few Problems Caused by IE Compatibility Mode

I recently worked on a project that was required to support IE8 and IE9 (along another more competent browser). However, when it was deployed, it rendered in compatibility mode (per the corporate standard configuration), which really caused it to act like IE7. In this post, I’ll describe a few specific issues that we found with compatibility mode and how we worked around them.

First Attempt

The first thing we tried was this great XSnippet to change the response header to try to force the browser out of compatibility. I’ve seen it work in tests, but it didn’t work in this client environment, so we had to work around the most important side effects that compatibility mode caused.

Application Layout

Problem: Using the standard application layout control, some views (the content section of the layout) would display below the navigation menu, rather than to the right of it, but only in IE with compatibility mode enabled.

Workaround: To fix this problem, ran code onClientLoad to check the browser and version on the affected pages and shrink the width the content area slightly, which fixed the problem. (Credit to Wil How for this solution.)

Date Pickers

Problem: The strangest side effect that we saw was that clicking on any date picker caused a form submission and full page refresh.

Workaround: We changed all of the date pickers in the application (i.e. standard inputText fields with the date picker added) to Dojo Date Text Box controls in order to avoid this behavior.

Font Awesome

Problem: Font Awesome icons did not render in compatibility mode. Font Awesome actually comes with IE7-specific style sheets, but they didn’t work in compatibility mode, either.

Workaround: From what I’ve read, it appears that the problem lies in the length of the url used to define the font. As it turns out, adding a hash (#) in the url allows older versions of IE to process longer URLs. The fix was to add #iefix into the second source line in the font declaration in the font-awesome style sheet, as shown below.

@font-face {
  font-family: 'FontAwesome';
  src: url('../font/fontawesome-webfont.eot?v=3.2.1');
  src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') [...More font definitions here]
  font-weight: normal;
  font-style: normal;
}

array.indexof()

Problem: This problem appeared to be that a dojo progress bar dijit didn’t work in compatibility mode, but I tested it separately and it worked fine. As it turned out, it was failing where code tried to use array.indexOf() (only in compatibility mode) as it was building the data to update the progress bar.

Workaround: Replaced the convenient array.indexOf() calls with code to actually walk through an array and check whether any of the values match.

Got Tips?

I’m sure there are many, many more issues causes by compatibility mode in your applications. Got any tips or links to share?

Advertisements

XPages Tip: Workaround for Broken Custom Links on the Application Default Page

If you have any kind of data display control with a custom document open link set as the default launch page for the application, the links may not work. In this post, I’ll show a simple workaround.

For example, I have an application where the default launch page included a Data View with a customized summary section that included a link like this:

"<a href='MyPage.xsp?action=openDocument&documentId=" + viewEntry.getDocument().getUniversalID() + "'>OpenDocument</a>"

However, it doesn’t work when the application is launched. If the user opens the application with a link that only includes up to the nsf (such as http://www.MyDomain.com/MyDatabase.nsf), the link shown above will try to open the page without the database in the url (such as http://www.MyDomain.com/MyPage.xsp?action=openDocument&documentId=unid).

This is a minor issue, but it is something that needs to be accounted for.

One option is to code the link to check the current URL and adjust the generated link accordingly.

Another option is to create a separate “home” page as the application’s default page to launch in the browser and have the page redirect to whatever you want the default page to be, thus ensuring that the page name is always in the URL. Set the new page as the application default and have that page and route to the full page, by putting this code on the beforePageLoad event:

context.redirectToPage('MyPage.xsp');

Of course, this being XPages, there are sure to be numerous other solutions.

How have you worked around this issue?

Upcoming Webinar: Just the Facets, Ma’am

Join Paul Della-Nebbia of TLCC and me on Wednesday for a webinar all about facets in XPages.

In this demo-heavy session, we’ll start out by explaining what facets, keys, and editable areas are before showing how to create your own. Next, we’ll dig into several controls that make heavy use of facets. Finally, we’ll end with an in-depth look at the performance implications of the dynamic content control compared to the switch facet control.

The webinar will be delivered two times, so register for whichever works best for your schedule!

  • Wednesday, September 25th – 10:30 A.M. to 12:00 P.M., Eastern U.S. time
  • Wednesday, September 25th – 8:00 P.M. to 9:30 P.M., Eastern U.S. time (Sydney, Australia time is Thursday, Sept. 26th at 10:00 A.M.)

Article Published in The VIEW: Create Great-Looking, Reusable XPages Charting Controls with Kendo UI DataViz

My article on creating reusable XPages charting custom controls with Kendo UI DataViz in XPages has been published in The VIEW (subscription required).

Abstract

Dashboards are an increasingly common requirement in XPages applications because users want visual indicators of key business metrics. Dojo charts can get you up and running quickly, but Kendo UI’s DataViz charting library provides nicer-looking charts and a wider variety of charts (including radial gauges) that look great in a full browser or on a mobile device. This article explains how to implement three flexible charting custom controls that are easily reusable because they are configured by custom properties and driven by a URL parameter.

  • Bar and Column
  • Pie
  • Radial Gauge

Creating a Dojo Filtering Select Control in XPages

If you’d like to provide users the ability to type directly into an XPages combo box (like Dialog List field in the Notes client), you can easily convert combo boxes to dojo filtering select controls in XPages.

Combo Box

Let’s start with this straightforward combo box:

FilteringSelect_2

<xp:comboBox id="comboBox1">
  <xp:selectItem itemLabel="Acai"></xp:selectItem>
  <xp:selectItem itemLabel="Apple"></xp:selectItem>
  <xp:selectItem itemLabel="Apricot"></xp:selectItem>
  <xp:selectItem itemLabel="Artichoke"></xp:selectItem>
  <xp:selectItem itemLabel="Asparagus"></xp:selectItem>
  <xp:selectItem itemLabel="Avocado"></xp:selectItem>
</xp:comboBox>

Dojo Filtering Select

If you have the extension library, 8.5.3 with Upgrade Pack 1, or Notes 9, the Dojo Filtering Select control is available to you in the Dojo Form section of the Controls palette. When you drag it onto a page, it looks the same as the standard Combo Box on the Design tab.

FilteringSelect_1

The primary difference between the two is that you can type directly into the filtering select in order to narrow down the choices.

Easily Creating a Dojo Filtering Select

There’s also a major difference in Domino Designer when creating a filtering select — it doesn’t have the ‘Values’ subtab in its properties, so there isn’t a similar method of building the options for the list.

There are two simple ways to convert this to a dojo filtering select.

1) Manually change the xp:comboBox tag to xe:dojoFilteringSelect (along with the corresponding closing tag)
2) Drag a Dojo Filtering Select control onto the page and copy all of the xp:selectItem tags into it (then remove the combo box)

In fact, this is the best way that I know of to create a dojo filtering select easily. They can be enhanced to work with a different data store, but if your list of options is hard-coded or computed with SSJS, this is an easy way to go.

<xe:djFilteringSelect id="djFilteringSelect1">
  <xp:selectItem itemLabel="Acai"></xp:selectItem>
  <xp:selectItem itemLabel="Apple"></xp:selectItem>
  <xp:selectItem itemLabel="Apricot"></xp:selectItem>
  <xp:selectItem itemLabel="Artichoke"></xp:selectItem>
  <xp:selectItem itemLabel="Asparagus"></xp:selectItem>
  <xp:selectItem itemLabel="Avocado"></xp:selectItem>
</xe:djFilteringSelect>

UI Features

Even though it’s a combo box at its core, the filtering select control functions quite differently than the standard combo box.

1) The UI is a little different, as the filtering select picks up dojo styling. This is definitely something to keep in mind; you may need to add CSS to restyle it to keep it consistent with the rest of the page.

FilteringSelect_3

2) As you start typing, it will filter the list to only include the values that start with the characters that have been typed.

FilteringSelect_4

3) If the user types a value that is not valid in the list, an icon displays in the field and an error message pops up next to the field.
FilteringSelect_5

When this happens, no server-side code will execute, because it’s failing client-side validation that’s built into the control.

Tip: Finding All Properties and Methods Available for XPages Components

As any XPages developer (especially one with a history of Notes development) knows, the documentation isn’t as – (ahem) – thorough as it could be. However, there are two great resources that you may not be aware of that are very helpful in finding out the available properties and methods of XPages components.

XPages Controls Documentation

The XPages Controls Documentation on openNTF is an excellent way to find out about properties of XPages components, including Extension Library components. It even includes a hierarchical structure so you can see what properties are inherited.

When I’m looking for a method to access a property value, I generally follow these steps:

  1. Check the Domino Designer Help
  2. Check the XPages Controls Documentation and start guessing what corresponding method names might be, because they’re often consistent. For a property called foo, I’d try getFoo()
  3. Dig into the Java source for the component and review it’s provided and inherited methods via the class hierarchy

Using F4 to Locate Java Class Hierarchy

In this excellent NotesIn9 video (episode 34), Paul Withers shows an invaluable technique for locating the underlying Java objects generated by XPages components and how to track down the source to find the methods that are available.

You can open Package Explorer, review the source of an XPage and look for a reference to creating your component. Then look for the name of the Java class being created, highlight it, and hit F4, which opens that class in the hierarchy view. There, you can view the methods that it implements; you can also go up the hierarchy to find what it inherits from other classes.

It also shows how to use the class name that you’ve located in order to set a variable type so you can get content assist for that object.

Dojo Data Grids – Sample Database on OpenNTF

I’ve added a demo database with 14 dojo grid samples to OpenNTF.

http://www.openntf.org/Internal/home.nsf/project.xsp?action=openDocument&name=Dojo%20Data%20Grids%20in%20XPages

The application includes 14 demo grids that implement several features and variations of Dojo Data Grids in XPages.

  1. Basic Features
  2. Sorting – Only allow even-numbered columns to sort
  3. Opening Documents
  4. Full-Text Search
  5. Field-Specific Search
  6. Editable Columns – Including highlighting edited rows
  7. HTML and Icon Columns
  8. Enhanced Grid with Drag and Drop plugin
  9. Enhanced Grid with Filter plugin
  10. Enhanced Grid with Print plugin
  11. Enhanced Grid with Export plugin
  12. Enhanced Grid with Context Menu plugin
  13. Categorized Tree Grid
  14. Categorized Tree Grid with Totals