Thursday, 11 June 2009

ADF Faces RC: turning off the browser's autocomplete functionality

(Post edit - customers should note that for JDev/ADF 11.1.2.X controls such as af:inputText now include an autoComplete property that determines "whether previous values of text fields in the form should be remembered and offered for auto completion.")

Modern browsers include an autocomplete function, effectively a poplist that shows the user's most recent entries for a set field in a list, for the user to choose from.

There are times when this functionality isn't desirable, such as credit card numbers, password fields and similar.

As detailed in the following Mozilla Developer Center page, both IE and FF support an autocomplete="off" attribute on form and input controls to suppress the browser's autocomplete functionality. Unfortunately this feature is not part of the HTML standards, and in turn is not a property of the equivalent tags in ADF Faces RC for JDeveloper 11g build 5188 (ER with Oracle Support pending).

There is a JavaScript solution that readers may be interested to see, and I thought this a good post because it shows the mechanism for calling JavaScript through the ADF Faces RC tags, something that I seem to be doing more and more.

The following example shows how to turn the autocomplete off at the form level:

  
  
  
  ...so on...

Points to note:

* The use of the "load" clientListener at document level to call the disableAutoComplete. This is the equivalent of the HTML body tags onLoad attribute.

* The use of the clientComponent="true" attribute in the form tag. This forces ADF Faces RC to generate a HTML form component with the same id in the resulting HTML page to be rendered. This is essential as the disableAutoComplete method requires the form id in the DOM in order to find the form via it's call to getElementById and turn off the autocomplete function.

2 comments:

Anonymous said...

Good use of javascript to do some thing which JSF does not support!

However,I would prefer using AdfPage.PAGE.findComponent("server-side-id-of-the-form-component") as it would return the complete javascript instance of the ADF form component.

It is a best practice to use ADF Javascript API to keep the code change as little as possible if you later need to add some features which will only be possible with ADF JS

Chris Muir said...

In this case I don't believe using the ADF JS will work, as the findComponent command returns an AdfUIComponent object which doesn't have access to all of the properties of the underlying HTML components, in this case the autocomplete property of the form tag. As such you need to rely on common JS. I'm happy for you to prove otherwise.

I'm also unsure what your last paragraph means, you need to give an example, the sentence is currently nonsensical.

CM.