XPages hack – visualizing checkboxes that fail validation

2022-May-6Patrick KwintenLeave a comment

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!

Sticky headers in Bootstrap from ExtLib

2021-September-17Patrick KwintenLeave a comment

I received a request from a customer who would like to preserve the action buttons on an xpage when the user scrolls downs a very long form.

The application is already using the BS theme from the Extension Library with the sticky navbar option in use so this would implement a second ‘sticky element’.

Here is an example how the xpage looks like:

Note: I added some Lorem Ipsum content in stead of form elements for demo purpose, but you get the idea of a endless form to fill in.

So first I added a listener for the scroll event:

window.onscroll = function() {scrollFunction()};

The scrollFunction is as followed:

I also added some additional styling for style and transition effects:

<style> 
	#form-header-hidden{ 
	width:100%; 
	background-color:white; 
	height:0px; 
	padding:5px 150px; 
	box-shadow: 0px 3px 5px 0px rgba(182,182,182,0.75); 
	transition: all 0s, opacity 0.5s linear;
} 

#form-header{ 
	transition: all 0s, opacity 0.5s linear;
}

.navbar{
	transition: all 0.5s;
}
.navbar-brand img{
    transition: all 0.5s;
}
</style>

So I basically make 2 form-header elements, on for ‘normal’ display when focus is on the top and one when the user starts to scroll down from a certain point. The form elements are basically the same but more adapted on the height of their container.

One thing I would like to note is that I had to place the ‘smaller’ sticky header under the navbar so it can inherit the same with as its parent. Otherwise I would look not nice with a bit of displacement.

I also noted a small shaking effect when I would use the visibility option to show/hide which form-header to display. Choosing here to play mess with the z-index property solves that issue with shaking when scrolling slowly in the beginning.

Here is the result when the user starts to scroll down. The form header becomes small but sticky under the navbar. The buttons to interact with the form are available where ever the user is in the form:

A small new feature in the app but I think it will bring a lot of user satisfaction! Happy coding 🙂

Nice reversible cards in a IBM Verse style

2016-December-122016-December-11Patrick KwintenLeave a comment

In an application I am displaying objects with cards. Because the type of objects may differ in type and amount of data (text, images, tables, dates) the cards to display them differ.

Some cards have interaction (popup, dialogs, reversible) and some are just static. In this post I will discuss the reversible card type.

The reversible card has as features:

a front card with a folded corner, if you move over the fold an info icon appears which you can click to see the card’s back.
when you flip over to the back or front it is all nicely animated.
on the back of the card there is another icon to switch back to the card’s front.

The purpose of this reversible card is to save space in my UI, and to provide layout for secondary information, which is more important if you want to look at more detailed information.

It could also be a placeholder for data that, when placed in the front of the card, ask for too much landscape (e.g. a chart).

Things become much clearer with images so here are a few:

Image: Default presentation.

Image: Expand folding (animation) when mouse-over.

Image: animation when flipping over a card.

Image: the back of the card.

I use the cards within a repeat control and with Bootstrap they align nicely and are responsive:

I have no idea when Bootstrap 4 will be released with it’s card component but according to my experience cards are … less useful without interaction.

I made a small video to demonstrate the reversible cards feature:

If you want to implement the card yourself here is the code:

Most of the chemistry is performed with CSS so you also want that:

body{
padding:20px;
}

.flip {
-webkit-perspective: 800;
perspective: 800;
position: relative;
text-align: left;
min-height:200px;
margin-bottom:20px;
}

.flipped {
height: 100%;
background-color:#efefef;
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}

.card {
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
transform-style: preserve-3d;
transition: 0.5s;
}

.card .face {
-webkit-backface-visibility: hidden ;
backface-visibility: hidden ;
z-index: 2;
}

.front {
/*position: relative;*/
background-color: #FFF;

height:200px;
position: absolute;
width: 100%;
z-index: 1;
border: 1px solid #e3e3e3;
box-shadow: 5px 7px rgba(0, 0, 0, 0.15);
transition: background 0.4s ease;
}

.front-content, .back-content {
padding: 20px;
}
.front-content:before {
content:””;
width: 80px;
height: 80px;
float: right;
}
.corner-tip:before, .corner-tip:after {
background-color: #FFF;
position: absolute;
display: block;
z-index: 2;
border-top-right-radius: 60%;
width: 50%;
height: 50%;
content: “”;
}
.corner-tip:before {
right: 100%;
top: 0%;
background: -webkit-radial-gradient(-180% 200%, circle, rgba(255,255,255,0) 80%, rgba(0,0,0,.2) 100%);
}
.front:hover .corner-tip:before {
border-right: solid 1px #fff;
}
.front div.corner:hover .corner-tip:before {
border-right: solid 2px #fff;
}
.corner-tip:after {
top: 100%;
right: 0%;
background: -webkit-radial-gradient(-250% 320%, circle, rgba(255,255,255,0) 80%, rgba(0,0,0,.2) 100%);
}
.front:hover .corner-tip:after {
border-top: solid 1px #fff;
}
.front div.corner:hover .corner-tip:after {
border-top: solid 2px #fff;
}
.corner { /* edit these sizes for the default revealing corner size */
height: 20px;
width: 20px;
right: 0;
top: 0;
position: absolute;
overflow: visible;
}
.front:hover .corner { /* edit corner size (First animation, when the whole page is rollovered) */
height: 30px;
width: 30px;
}
.front div.corner:hover { /* edit corner size (Second animation, when the corner itself is rollovered) */
height: 50px;
width: 50px;
}
.corner:before {
position: absolute;
top: 0;
right: 0;
content: “”;
display: block;
width: 133%;
height: 133%;
}
.corner-contents:after {
position: absolute;
top: 0;
right: 0;
content: “”;
background: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0) 37%, #DDD 62%, rgba(230, 230, 230, 0.1) 64%, rgba(255, 255, 255, 0) 67%), -webkit-radial-gradient(-50% 150%, circle, transparent 74%, rgba(0, 0, 0, 0.2) 74%, transparent 81%);
display: block;
width: 133%;
height: 133%;
}
.corner-tip {
position: absolute;
top: 0;
right: 0;
content: “”;
background: -webkit-linear-gradient(45deg, #ddd 17%, #dfdfdf 18%, #f5f5f5 30%, #f8f8f8 34%, #eee 39%, rgba(200,200,200,0) 41%);
display: block;
width: 100%;
height: 100%;
}
.corner-button {
position: absolute;
top: 0;
right: 0;
color: #fff;
text-align: center;
padding:5px;
display: inline-block;
font-size: 1.6em;
color:black;
}
.corner-contents {
width: 125%;
position: absolute;
display: block;
overflow: hidden;
-webkit-mask: -webkit-linear-gradient(45deg, transparent 49%, #000 53%);
top: 0;
right: 0;
height: 125%;
}
._corner-contents:before {
content: “”;
position: absolute;
top: 0;
right: 0;
content: “”;
display: block;
width: 100%;
height: 100%;
background-color: #eeeef4; /* Match this background color to #fpc_effect-back */
}
.corner, .corner-contents, .corner-tip {
-webkit-transition-property: all;
-webkit-transition-duration: .3s;
-webkit-transition-timing-function: cubic-bezier(0, 0.35, .5, 1.7);
}

.back {
height:200px;
width: 100%;

-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
border: 1px solid #e3e3e3;
box-shadow: 5px 7px rgba(0, 0, 0, 0.15);
transition: background 0.4s ease;
}

.imgThumb{
width:66px;
height:66px;
}

.card blockquote {
border-left: none;
margin: 0;
}

.card blockquote img {
margin-bottom: 10px;
}

.card blockquote p:before {
content: “\f10d”;
font-family: ‘Fontawesome’;
float: left;
margin-right: 10px;
}

Okay, you are now all powered to impress your customers. Happy development 🙂

FlipSwitch style for your checkboxes

2016-August-52016-August-4Patrick KwintenLeave a comment

A flip switch is an alternative look for a checkbox or the two-option select menu. It can be toggled by a click or a swipe.

I am not sure if it’s originated from mobile interfaces, at least it is there where they are most common. So if you modernize an application and optimize it for mobile access you might consider adding flip switch behaviour to these form elements.

Here is an example how to do this with XPages:

Ofcourse you have to provide the CSS. The CSS depends on your theme. There are handy sites that might help you with it.

Here is my CSS:

.onoffswitch {
position: relative; width: 90px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: “ON”;
padding-left: 10px;
background-color: #34A7C1; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: “OFF”;
padding-right: 10px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 18px; margin: 6px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 56px;
border: 2px solid #999999; border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}

I hope you find this tip useful…

Add 20 years of experience to your workforce

You can 20 years of experience within IBM Notes and Web development to your workforce by hiring me.

Interested? Read my curriculum vitae on LinkedIn: http://www.linkedin.com/in/patrickkwinten and get in contact.

I am happy to work WITH you !

Applying some golden ratio to my XPages app

2015-October-30Patrick KwintenLeave a comment

Introduction

A Friday XPages and beer tonight and I decided to tackle a beauty-contest problem I was confronted with earlier this week.

In an XPages application I am mixing material design principles and bootstrap together, more specific I am using the CSS grid system in Bootstrap to display collections of data in a tiled display format (better known as cards).

Golden ratio

Bootsrap enables me to make the tiled display responsive so for xs devices I display max 1 card per row, sm devices max 2 cards, md or lg max 4 cards. This works well for the width of a card BUT to make the cards look more aesthetic/ecstatic I want to apply some golden ratio or divine proportions.

Gold Bootstrap

First I thought to look if there is something available out there and I came along Gold Bootstrap, since I am already using Bootstrap, but this did not help me.

DIY

So I decided to pop open a beer and do it myself. This turned out to be rather simple… with the help of the responsive bootstrap toolkit.

The code below will check the viewport and depending on which viewport change the height style property of a card. Since I do not want large cards for xs and sm devices I set a width of 90 pixels then. For md and lg devices the cards may grow in size (width & height) but respect this golden ratio:

(function($, document, window, viewport){
$(document).ready(function() {
console.log(‘Current breakpoint:’, viewport.current());

if( viewport.is(“<md”) ) {
$( ‘.card-holder .list-item’ ).css( ‘height’, ’90px’);
}

if (viewport.is(‘>sm’)){
var firstCard = $( “.card-holder” ).first();
var firstCardWidth = firstCard.width();
$( ‘.card-holder .list-item’ ).css( ‘height’, (firstCardWidth/1.618) + ‘px’);
}
});

$(window).resize(function(){
console.log(‘Current breakpoint:’, viewport.current());
if( viewport.is(“<md”) ) {
$( ‘.card-holder .list-item’ ).css( ‘height’, ’90px’);
}
if (viewport.is(‘>sm’)){
var firstCard = $( “.card-holder” ).first();
var firstCardWidth = firstCard.width();
$( ‘.card-holder .list-item’ ).css( ‘height’, (firstCardWidth/1.618) + ‘px’);
}
});

})(jQuery, document, window, ResponsiveBootstrapToolkit);

As a result I get smaller cards in xs and sm devices:

and bigger cards in a 4 column layout on md and lg devices which resize really nice:

Now I just need to fill up this additional landscape on a card with some usefull information…

fix for down caret icon in dijit.TitlePane when using Bootstrap from ExtLib

2015-October-12Patrick Kwinten4 Comments

For unknown reason the dijit.TitlePane is not part of the Dojo controls in the ExtLib. You can implement your own version and Mark Roden posted a nice description how to achieve this. HOWEVER in case you are using the Bootstrap theme in the Extension Library you will notice when opening a pane the down caret icon can not be displayed.

Here is the build up for 2 TitlePanes dijits:

<xp:div id=”titlePaneGemCars” dojoType=”dijit.TitlePane” title=”German Cars”>
Audi
BMW
Mercedes
<xp:this.attrs>
<xp:attr name=”open” value=”false”></xp:attr>
<xp:attr name=”toggleable” value=”true”></xp:attr>
</xp:this.attrs>
</xp:div>
<xp:div id=”titlePaneJapBikes” dojoType=”dijit.TitlePane”
title=”Japanese Bikes”>
<xp:this.attrs>
<xp:attr name=”open” value=”false”></xp:attr>
<xp:attr name=”toggleable” value=”true”></xp:attr>
</xp:this.attrs>
Honda
Suzuki
Yamaha
</xp:div>

Here is how it looks like in the browser:

In case you choose another theme e.g. oneUI (*cough*) the panes are displayed as followed:

Note the display of carets is different (no carets for closed panes).

So how are we going to fix this? Via your friend CSS! Include the following CSS snippet at your page/stylesheet/theme:

.xsp.dbootstrap .dijitTitlePane .dijitArrowNode::before {
color: #428bca;
font-family: “Glyphicons Halflings”;
content: “\e114”;
font-size: 12px;
padding-left: 10px;
position: relative;
top: -1px;
}

The definition is similar for a closed dijit but the content is set here to specific Glyphicon (the chevron down icon). The content is set to a hexidecimal value for an icon? On the glyphicons site you can search for halflings and it will tell for the chevron-down icon the value is UTF+e114.

As a result your opened titlepane wil have the correct icon displayed:

Happy coding!

Ps I assume there is someone smart here to register this break as a request at IBM?

context.getProperty(‘xsp.resources.aggregate’).equals(‘…’) working for resource and not resources definition

2015-October-92015-October-9Patrick Kwinten2 Comments

In a previous post I described a problem when implementing Font Awesome in conjunction with the Use runtime optimized JavaScript and CSS resources XSP property. The solution can be summarized as followed:

– Move the @font-face part in the font-awesome.min.css into 2 new CSS e.g.

./font-awesome-4.2.0/css/font-awesome-fontFamily.css
./font-awesome-4.2.0/css/font-awesome-fontFamily.min.css

adapt for minified version the paths to the fonts e.g.

url(‘../fonts/fontawesome-webfont.eot’)
url(../../../fonts/fontawesome-webfont.eot)

load in a Theme design element the correct version based upon your XSP property setting:

context.getProperty(‘xsp.resources.aggregate’).equals(‘…’) //true or false

This works for a resource definition but apparently not for a resourceS definition.

The following code

will load both files in optimized / non optimized runtime. Perhaps IBM can fix this?

Kwintessential Notes

My contribution to the Notes & Domino community

css