In this post we’ll create a custom Lightning component which breaks down the input and utilizes Salesforce lightning:pill components to display the results. You can see a sample of this component in the image below:
The component will also be able to validate the provided input upon entering, and will prepare it for saving to database. So, let’s get to it.
NOTE: Updated source code is provided in the following GitHub repo
First of all, the implementation will use some utility code for generating random GUID and validating the input pattern with regular expressions. This code is stored as a static resource and you’ll need to upload it to your org for this implementation to work. You can find the static resource here.
We’ll call this custom component pillsInput, so go ahead create it and set the following markup and code in their respective component files:
Let’s go over the attributes. The label, placeholderText, name, and value attributes are pretty much standard for any Salesforce Lightning component used for data input. The more interesting attributes are the following bunch:
delimiter - this is a character that is going to be used to split the inputted string into pills. This approach, for example, enables the user to copy/paste a long list of IP Addresses separated by space (or by any other specified delimiter value), which would then be separated into individual pills.
delimiterInDatabase - this is a character used to split the pills when they are stored in a text field in database. Consider this as a semi-colon separator used to split the multi-picklist values.
validationTypes - here we can specify what type of pattern the input needs to be in. If the pattern isn’t matched, the pills are shown in red.
We have a couple of more private attributes in the component but their function is trivial and self explanatory. Let’s move to the controller part.
The controller is handling various events that occur within the component. The most important handler is the onKeyUpInput. This handler will evaluate if the latest key captured by the pillsInput component is a specified delimiter or an enter key. If one of those is true, then the inputted text will be added as a pill, and the input element will be cleared.
handleValueChanged function is there to parse the initially binded value attribute (e.g. - binded with a sObject field) into pills. After that initial action we need to set the valueDataLoaded flag in order to avoid calling this code when we add new pills. Now let’s see what is in the component’s helper.
Inside the helper the functions parseFieldToPills and parsePillsToField are parsing the binded field’s inital value into pills, and then parsing those pills into a string that can be safely stored into database.
isInputValid function is using the regexUtil object to validate the input. This object is stored in the static resources that are provided at the beginning of this blog post.
Finally, the addNewPills function is used to convert the list of strings to pills. This function also utilizes an object from the static resources called lexUtil, which has a function to generate a unique GUID. The reason why I haven’t used a label to identify individual pills is because I wanted to keep the option for users to input pills with same values.
How to use it?
Using the component is rather easy - just paste the below code snippet to your Lightning Component, bind the value attribute to your appropriate object (or leave it blank "" for a quick test), and you are ready to go.
The end result should look something like this:
There are a couple of possible improvements & optimizations that I can think of right now. The one would be to add a class attribute to provide additional styling to the component. The validation logic could also be improved to optionally prevent users from saving the input if there are invalid pills.
I hope that somebody will find this component useful, and, as always, feel free to leave your comments below.