Recently I worked on a project where we were required to use the list builder. I usually shy away from this component for 2 reasons…

  1. It takes up a lot of screen real estate. While this is easily solved using dynamic visibility this is the minor issue.
  2. The clumsy user experience. When you make selections, you are required to click Update Filters to commit your selections. In this user control there is no need to save the user from them selves. Because you have to manually commit the filters it only causes headaches for end users.
  3. There is no ignore end blanks.

Here is how I went about addressing these issues to achieve the following result..

Download Source Files

There are a few things you can do to help reduce how much screen real estate takes up. The first is to replace the Add and Remove labels and replace them with “>“and “<“. The second is to simply reduce the size of all labels.

There is no way to trigger this functionality, but I did come up with some method of notifying the status of their filter usage. In this case, I simply put a label on top of the list builder stating how many filters have been selected. It serves as a reminder to click the update filters button. Hopefully one day we will see this component with the ability to auto-trigger the update filter functionality and save some screen real estate.

For the absence of ignore end blanks, there is nothing that you can do.


More posts by

Leave a Reply

All rights reserved Goodman Group LLC