I am a web developer for a small software company that provides ticketing for attractions, theme parks, zoos & aquariums, etc. For the past 5 years, I’ve made and contributed to some really great projects, but a lot of them are in our internal systems and I can’t write about these.
However, some of the things I do are public facing on our client’s sites. And the one I want to write about today is a custom select list (or is it dropdown list) that I made and is used by Hershey’s Chocolate World.
I was tasked to create a new dropdown list (or is it select list) that can show a variety of things based on a myriad of configurations. Previously, the system had a traditional dropdown list that stretched across the screen and many of the options were delimited by special characters, which wasn’t ideal.
The problem with select lists is that there’s not much you can customize and they seem to be the control that’s the most dependent on the user’s browser and even operating system.
I started by looking for libraries to do this, but I didn’t find one that would work for us. So I started designing the dropdown and didn’t think it would too hard to make a custom component to replace a browser built-in. If you’re ever thinking about doing this, don’t.
Actually, I think the end result turned out pretty good, but there was so much work that went into making this control. I don’t remember all of the challenges we faced, but here are some of them off the top of my head:
Is the list open, closed or pre-selected by default? When it’s open, how big is the list (when does it start scrolling)? What happens when the list is at the bottom of the page (will it get cut off)? When you have multiple instances on the page, does it keep one open at a time or can you open all of them (has to handle both cases). How does it handle indexing (does one appear on top of the other or other elements)? How will it be responsive and how will it work on the iPhone where it normally uses it’s custom scrolling wheel? And on and on.
Not to mention that it handles a complicated scheduling algorithm that tries to fit each of the options into a schedule and displays these on a visual timeline.
Here’s a screencast of it in use today. The video is a little choppy, but the actual experience is very smooth.
It was a lot more effort than any of realized, but it’s been used pretty extensively for the past few years without any know issues. And in fact, our company won an award for handling this complicated scheduling system at the largest convention for attractions (IAAPA).
Also, Hershey’s has told us that their lines are so much shorter (pre-COVID) and have processed many more sales compared to their previous system. So, it’s nice to be able to show something I worked on that’s being used by the public and has been received so well.
And if you’re ever thinking about making a trip to Hershey, PA, I hear it’s a great place to visit!