During a recent project I was once again faced with this requirement: We want people using the form to be able to add CC email addresses to the case. I didn’t want to build the same clunky solution to capture email addresses where we have little control over the input.

I wanted to see if I could use AI to build a solution for this since I couldn’t find one. I was really surprised that this didn’t already exist as a component on unofficialsf.com! It’s a feature that seems so obvious for capturing email addresses in a form.

Heads up: there are a lot of media in this post to show all of the functionality. If you’re reading this on your phone, you may want to save it for later and check it out on your computer.

Install

Sandbox

Production

Easy method: copy and paste this after your org URL to run the installer. packaging/installPackage.apexp?p0=04tHo000000tCz0IAE

Github

The basics

Multi Email Input is an LWC that works in screenflows. After installing the package, you can find the LWC in the Custom section of a Screen.

Entering email addresses is as easy typing them in! Pressing the return, space, or tab key after typing and address will add it to your list. It also supports copying and pasting lists, which will be shown later.

Email inputs are stored in a collection and as text so that you have flexibility with using the outputs. I specifically designed the outputs to work with the Send Email action in a flow.

Flow Settings

There are quite a few settings available for this component! For most settings I have included an input for a custom error message that overrides the default message that is included in the component.

Allowed Domains

Allowed domains gives you the ability to restrict your domains to just the ones you want to allow. If you’re creating this form for internal users, you may want to require that they use a specific email domain only. Allowed Domains also supports wild cards, so if you have a variety of internal domains that have slightly different formatting, you can use wildcards to make this easier to use.

Blocked Domains

Want to block domains or domains from certain countries? Maybe you don’t want to allow domains from certain free domains, you could enter those into this field to block those from being entered.

Disabled

This value can be controlled by a formula so that it only shows if the value equals true. Maybe you need other fields completed before allowing someone to enter multiple emails. Create a formula that handles that and only makes the field active once a certain criteria met.

Duplicate Email Error Message, Help Text, Invalid Email Error Message, Label

If you want to replace any of these error messages, you can enter a custom message in these fields. Otherwise the default message will be shown.

Maximum Emails

Enter a number between 1 and 150 if you need to limit how many addresses can be entered. The 150 max limit comes from Salesforce’s current limit on the Send Email flow action.

Placeholder Text, Required, Value

If you need to show a custom placeholder, replace this value. You can also make the component required if necessary. Value is used to prefill addresses. If you want to use email addresses from earlier in your flow, you can put in that resources here. Validation rules from other settings will apply when the flow runs.

Enter emails with copy/paste

Do you have a bunch of email addresses that you want to copy into the form? Maybe you’re copying a list of emails from gmail or some other email app. That works!

SLDS 2 ready

Multi Email is ready to go as soon as you upgrade to an SLDS 2 theme!

The plugin was great, but Warren is a busy guy and his focus has understandably been on his other projects, like his Salesforce Developer course. There were quite a few outstanding feature requests from users and from his own personal list that had been lingering for some time. I thought about just working on some updates to this plugin, but I knew that I wanted to totally overhaul it with a new UI and new functionality, so it made more sense to build a new plugin.

And by build, I mean vibe code prompt engineering.

I fired up Claude and went to work. I started from a blank slate and started guiding the build process. Rather than give all my instructions at once, I started small. I added one feature at a time so that I could track changes in github and keep an eye on the plugin to make sure it was working properly.

It was a lot of work! Claude generally did a really good job not messing things up when I added new features, but it did get stuck a few times. When that happened, ChatGPT was able to clarify a fix and then I could get back to using Claude.

I’m really proud of what I was able to achieve with sf tabs and how robust all the features feel. There are still some quirks with a couple features that depend on Salesforce, like setting the active tab styling, but everything else is really solid.

Install

sf tabs is available for Firefox and for Chrome. It will also soon be available for Edge. There are no plans to make it available for Safari unless someone wants to sponsor the $99/year developer fee. If you are already an Apple developer, the code is open source on github and you can fork it to release it for Safari if you want to release a version.

On Chrome, if you have configured Enhanced protection (Settings > Privacy and security > Security), you may see a warning when you try to install the plugin. This is automatic in Chrome for new plugins. The plugin is safe to install!

After Installing

When you first install sf tabs you will have a default list of tabs: Flows, Installed Packages, Users, Profiles, Permission Sets. You will also need to grant permission for the plugin to run on each Salesforce instance you use since it is access information about tabs and browser storage.

Adding Tabs

There are two ways to add a new tab to the plugin. The first is my favorite feature in the plugin: Quick Add. Click on the cloud with the lightning bolt and instantly get a new tab!

The second method is by clicking on the plus button and manually adding the name and URL that you need. For sf tabs, you only need to include the page slug. Quick Add handles this for you so that you don’t get it wrong.

Here is a brief demo of the Quick Add function. I navigated to the Profiles page in setup and then clicked on Quick Add to add a new tab for that page. I also set it to open in a new tab.

In addition to Setup tabs, sf tabs also supports adding tabs for Objects and special Setup pages, like Flow Trigger Explorer.

Tabs can be re-arranged by clicking on the drag handle on the left of the tab in the plugin popup window. Click the toggle to open a tab in a new window. Click the track can to delete it.

Settings

sft tabs also has a few settings that you can configure. Click on the gear icon to open/close Settings.

I included light and dark modes, as well as system mode so that you can decide how you want the plugin to look on your computer. There is also a Compact Mode which makes the tabs in the plugin smaller, allowing you to see more of them at a time.

When you delete a tab, you are prompted with a confirmation dialog. If you prefer to skip that confirmation step, you can enable the option for “Don’t prompt when deleting”.

If you’ve added a bunch of tabs and want to get back to the default configuration, just click “Reset to Defaults”.

Import/Export Settings

The Import/Export Settings feature makes it easy for you to backup your settings, install on another, or share your tab set with coworkers. When you click on the button a new browser tab will open where you can choose to Export Confirmation of Import Configuration. sf tabs uses JSON to import and export all of your tabs and settings, including your preferences for light and dark mode.

Tab Design

I mentioned earlier that tabs can follow the active tab design. This is actually even better than just that! It also uses the theme branding color for active and hover state on tabs.

A few things are happening in the screenshot above. As you can see, the Home tab no longer has the active tab setting that you normally see. Instead, it has moved to the Flows tab. I’m hovering over the Contact tab to show the hover state of a tab, which is using the same tab color. This is able to pick up the branding color for tabs so that it always matches the org you’re working in.

And as always…

If you’re using sf tabs, please consider leaving a quick review on the extension page in your favorite browser. This will help the plugin rank better and encourage more people to install it. And if you really find the plugin useful, please share it on LinkedIn and tag me in your post.

Found a bug or have a feature request

If you come across a bug or have a feature request, you can message me on LinkedIn or add an issue to the project on github.