XPages hack – visualizing checkboxes that fail validation

In an application I have added some CSS to highlight fields that fail validation. The css looks as followed:

Basically I an looking for the aria-invalid=true attribute on input elements. Works great but not on all input elements. For example re-styling of checkboxes requires some work. But what if you would re-style the element that contains the checkbox?

In the following example I have captured a checkbox control inside a table data cell of 1% width:

For the checkbox control I have defined a custom validator that gets only triggered when a certain element send the xpage to the server (an button control with id btnSendToCommittee)). When the validation fails the checkbox also gets the aria-invalid=true attribute.

To apply a visual indication if a certain checkbox fails I have setup a simple JS function:

This function scans the page for inputs with the aria-invalid=true attribute and for all matches checks if the found item is a checkbox. If so, the parent, containing element (the table data cell) will be applied some styling.

Besides a listing in the xp:messages control I also have a visual indicator for the checkbox on the location of the xpage:

I have not managed to write a single-line css selector therefor I still loop through the found inputs that match the aria-invalid=true attribute. Here your assistance comes in… 😉

Happy coding!

Fixing the Tooltip function in XPages

A colleague noticed that the tooltip function on a Xpage stopped working after submitting the page to the server and when the validation did not pass. The same behaviour occurred when I added a computed text control that would spit out an anchor reference using a tooltip. Odd.

I found an old post of mine where I described the use of the xe:tooltip control. This control seems to keep working even when the XPage fails to validate. So that is a win.

However, in my case I would have to apply the control on many places which does not make me happy.

I also wanted to alter the layout of the tooltip a bit via a template so I found this piece of code. To my delight I noticed that the tooltip also kept working after a failed validation!

So a simple bit of code can fix tooltip again:

So after applying a template for the tooltip and applying some CSS my tooltip looks a bit more readable and less boring:

Note that I have to set the xp:this.title property for the inputTextArea control. Adding an additional attribute for the placeholder won’t do for the template.

Presentations from EntwicklerCamp 2014 – Track 1

Track Session Subject Download Presentation
Track1 Session1 XPages – 1 – Notes-Daten auf das Smartphone oder Tablet – Datenaustausch zwischen nativen mobilen Anwendungen und Domino mit Hilfe von XPage http://www.entwicklercamp.de/konferenz/ent2014.nsf/bc36cf8d512621e0c1256f870073e627/8138c341016c7bd7c1257be200295caa/$FILE/T1S1-Notes-Daten-1.pdf
Track1 Session2 XPages – 1 – Notes-Daten auf das Smartphone oder Tablet – Datenaustausch zwischen nativen mobilen Anwendungen und Domino mit Hilfe von XPage http://www.entwicklercamp.de/konferenz/ent2014.nsf/bc36cf8d512621e0c1256f870073e627/79e482848e630069c1257be200295cc2/$FILE/T1S2-Fehlerbehandlung%20in%20Notes.pdf
Track1 Session3 XPages – 3 – Schick mit Grid – DataGrids in XPages http://www.entwicklercamp.de/konferenz/ent2014.nsf/bc36cf8d512621e0c1256f870073e627/2c36b5afac8bdf4dc1257be200295cbc/$FILE/T1S3-SchickMitGrid.pdf
Track1 Session4 Notes-Daten auf das Smartphone oder Tablet – konkrete Code-Beispiele und Erfahrungen aus echten Projekten http://www.entwicklercamp.de/konferenz/ent2014.nsf/bc36cf8d512621e0c1256f870073e627/d42e0cf2eb36d7f2c1257be200295cae/$FILE/T1S4-Notes-Daten-2.pdf
Track1 Session5 Domino Designer – Tips, Tricks and Enhancements for Maximum Productivity! http://www.entwicklercamp.de/konferenz/ent2014.nsf/bc36cf8d512621e0c1256f870073e627/ac0e74d455d9a323c1257be200295cb0/$FILE/T1S5-Designer%20EntwicklerCamp%202014.pdf
Track1 Session6 Composit apps – Fange ich noch an? http://www.entwicklercamp.de/konferenz/ent2014.nsf/bc36cf8d512621e0c1256f870073e627/6ca59f95e7f3d483c1257be200295cbe/$FILE/T1S6-CompositApps-fange-ich-noch-an-Anleitung.pdf
Track1 Session7 Sicherheit in Notes (Anwendungen) http://www.entwicklercamp.de/konferenz/ent2014.nsf/bc36cf8d512621e0c1256f870073e627/7993118a31677646c1257be200295caf/$FILE/T1S7-Sicherheit%20in%20der%20Notes%20Entwicklung.pdf
Track1 Session8 dynamisches Maskendesign http://www.entwicklercamp.de/konferenz/ent2014.nsf/bc36cf8d512621e0c1256f870073e627/2bd25c7c9c26a652c1257be200295cc4/$FILE/T1S8-DynamischesMaskendesign-V2.pdf