For a project I received a request to enable to enter multiple emails in a field. These emails are not all registered in the Names & Address Book (NAB) but they come from a ‘concurrent’ email system e.g. helpdesk@domain.com or groupXYZ@domain.com so a standard names picker was no option.
I feared already a support nightmare without any entry validation, because the field was going to be used to send notifications. Here is the list of requirements:
- Easy to write email.
- Display of default value(s) or default list options (provided by the application).
- Support to enter multiple emails.
- Easy to remove email(s).
- Validation of the provided emails.
For the validation there are requirements of allowed top-level and sub domains. Initially there were requirements regarding the part before the @ like a construction firstname.lastname but this was later skipped because group emails were allowed later.
To make it easy to remove entered emails my first thought was to display entered emails kinda like the select2 ‘tags’ or bootstrap ‘pills‘ with an x in them to be able to remove an entry with a single click.
I also found out that select2 allows entries not in the provided list and validation. So for my prototype I gave it a try. Other search terms on some kind of jquery plugin to enter multiple emails did not give satisfying results.
So below are UI examples of my solution:
Image 1, an entered email is displayed as a (bootstrap) pill, a new entry becomes blue and selectable (via enter) when it passes the validation:
Image 2, multiple emails are displayed and each entry is easy to remove by clicking on the x in the pill:
Image 3, in read mode the emails are displayed as a list:
Image 4, the most important part: the code:
Some code highlights:
- I needed to hide the search field because the list will not have so many items in it, so I start with a little bit of CSS to minimize the search field in the select2 plugin.
- I set property multiple to true because multiple entries is a requirement.
- I set property disabledValidators to true. I added later a custom validator for the back-end similar to the ‘Email Address Validator for XPages‘ to ensure the entries submitted to the server are valid.
- I provide a list with default options to select from, that are the emails that come from another related document the emails are inherited from.
For the select2 plugin:
- variable noResults is a text that will be displayed when no results are found. This is helpful as helper text e.g. “Enter a valid email and press Enter”.
- allowClear to true to make it easy to remove entries via the x in the pills.
- createTag to allow to create new tags when an entry is not available in the list. This option is bound to the validateEmail function that will validate the entered text before a tag (or pill, mind the terminology) can be created. This ensures only emails from the pre-defined domains will be allowed or that respect the firstname.lastname construction.
That’s about it. Now emails from the concurrent email system can be entered and addressed too by the application. Happy development 