In this video we walk step by step through creating a plugin element. From loading a javascript library, adding a unique html id, creating our own element, and processing the data from Bubble, we spend this hour going deep into the hows and whys of the plugin building process.
0:00 Recap of what we are building
2:30 What is a Javascript library?
3:35 The headers input and what it does
6:05 Installing the SlimSelectJS library
8:56 Overview of three plugin functions
12:12 The blank plugin element
13:13 Creating a unique html id
16:22 The instance variable
18:04 Adding the id directly to the plugin element
18:49 Setting the id on a custom html element we added to the plugin
21:30 Initializing the SlimSelect element
24:01 Getting and setting the options
25:20 Getting a list of Bubble things
37:15 Processing the list of Bubble things into an array of objects
41:23 Adding options to the dropdown
43:42 Setting a default selected value
52:13 Placeholder, deselection, and more
1:00:06 Final thoughts