XPages and Me

My Journey into XPages Development

Tag Archives: UI

Splitting up: Another Way to Handle Large Forms – Introduction

When dealing with large forms with lots and lots of fields on them, be it as a user or developing an application with large forms, you’ve probably encountered the issue of validation and ease of navigation:

  • As a user, if the form is poorly designed, you’ll have to scroll thru it to find the fields, for which the validation failed. This can become rather frustrating, if it is not immediately clear, where the validation failed and you have to try and submit a form multiple times in order to get it done
  • As a developer, you have to come up with an innovative way to display validation errors that make sense and are easy to rectify for the potential user

Read more of this post

Diving into Bootstrap and Font Awesome – Part 5: Checkbox Group

If you want to style your XPages Checkbox Group with Bootstrap, simply wrap it inside a div with the class “checkbox”

Read more of this post

Dabbling in Bootstrap and Font Awesome Series Overview

I’ve pretty much wrapped up my “Dabbling in Bootstrap and Font Awesome” series, so, I wanted to give you a list with links to all the topics covered:

Read more of this post

Diving into Bootstrap and Font Awesome – Part 2: Enhancing the Bootstrap Panel Custom Control

As I’ve mentioned in my post “Dabbling in Bootstrap and Font Awesome Part 7: All these shiny new toys! What now?”, using responsive UI frameworks and creating web apps for mobile devices, forces us developers to rethink the way we set up an application’s UI.

With Bootstrap’s grid system, you can put content pretty much wherever you like and using Bootstrap panels, you can organize your content in a way that makes sense and looks good, be it on a desktop or a mobile device.

If you have used the Bootstrap Panel yet, you might have noticed, that it expands to the height of the content inside. That can be problematic:
Read more of this post

Dabbling in Bootstrap and Font Awesome Part 7: All these shiny new toys! What now?

When I first started dabbling in Bootstrap and Font Awesome, I was very excited and loved the look and feel of the framework. When I say dabbling, I mean that at the beginning, I didn’t really think about, how I am actually going to use it. I was just playing around with, getting a feel for how it all works and how I can integrate it with XPages.

But eventually I was faced with the question: What am I going to do with this shiny, new framework; How do I apply it to my daily development work?

I realized, I’ll have to rethink the way I develop my applications. Not necessarily the coding itself, but how do I set up the front-end, the UI, the part that the user will eventually see and will have to deal with on a daily bases.

I was always determined to design the UI of my applications in a way, that would aide the users in completing their daily work, even in the Notes Client (I guess it can be considered a job well done, if a user asks you, if your application is a web application, even though it is plain Notes Client). I was a big fan of Chris Blatnick’s blog Interface Matters and a lot of my UI designs had been inspired by his posts.

I think what I am trying to say is, we as XPages developers need and should also always think about the UI, to make it easy for the users to do their job.

If you don’t know how or what to do, talk to your users; sit down with them and observe them doing their daily work and it might give you ideas as to how to make it even better and easier for them.

The code in the background can be as sophisticated as can be, if the UI makes it hard for users to use an application, they will hate it and those users won’t make good advocates for Domino and XPages.

What is your opinion on this matter?

Dabbling in Bootstrap and Font Awesome Part 6-2: (re)Use Me!

In Part 6-1 of my XPages and Bootstrap / Font Awesome series, I showed you how to create reusable custom controls in order to make XPages development easier and quicker again.

I know I’ve promised to show you in this part, how to use these custom controls. However, I thought I am going to add a few more reusable custom controls that might be helpful and in part 6-4, I will show you how to use them all (promise!).

So, in this part, I’ll enhance the Control Wrapper custom control I’ve created in part 6-1 and add another reusable Custom Controls: One for using Font-Awesome Icons

In part 6-3 I will show you how to create two reusable custom controls for Input Groups.

So, lets get started

Read more of this post

So, you got your Web application’s Home Page done, what about the Lotus Notes Client (Part 3)?

In part 1 and part 2 I showed you how to prepare our form and create the custom colors and icons for the outline. In part 3, we will talk about the logo, create the outline and further modify the form.

Read more of this post

So, you got your Web application’s Home Page done, what about the Lotus Notes Client (Part 1)?

I came across many Lotus Notes applications that had been developed to be accessed thru the browser only, which is perfectly fine, until a user opens the application in the Notes Client. What they usually see is the default view of your app (I hope you have one, otherwise you might run into some issues with certain things) and a list of views on the left-hand side.

The user might be confused by what he / she sees, not knowing that the application is actually a web application. Therefore, I think it is good practice to have a home page available that:

  • Informs the user that the application is a web application
  • Provides a link / button to the user to open the application in the browser

even if the possibility of a user opening the application in the Notes Client might be small.

Read more of this post