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… 😉
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.
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 🙂
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 created a repository of my bubble/social speech layout, so if you want to have a closer look and implement it yourself then you are free to go.
I updated the @mention implementation so you get a nice icon in front of the name:
In order to have icons I updated my LotusScript agent to add a URL to an image in the PhotoURL field of the Person form in the FakeNames.nsf. For now I stored the icons in the NSF but in case you have a directory you use the reference to images from there.
I have also added an updated version to Like/Unlike comments, in stead of SSJS now most of the logic resides in the LikeController class. When you hover over the icon you get a list presented with people who have liked the comment.
Ofcourse nothing is stress-tested but I have not seen major issues so far. I hope you like it and get inspired to modernize your IBM Notes applications !
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.
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.
For a project a request was to make a Bootstrap modal (a Dialog control in the Extension Library) as draggable. By default, the modal does not have that feature. So can you make it draggable again?
In xsp-mixin stylesheet the class xsp-responsive-modal is using !important for the left and top properties which prevents that the modal is draggable. A work-around can be achieved by replacing these class properties with your own that does not use !important.
To replace the default class add for the onShow event of the dialog:
Many of us are acquainted with  Bootstrap in our XPages application. However if you place a Pager control on your XPage it does not render according bootstrap style.
So what can you do?
If you have the option to install the Extension Library with Bootstrap in it: DO IT.
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:
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.
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?