Back to Browse

Bubble Plugins - Part 2: Building a dropdown element

1.5K views
Jul 23, 2022
1:01:23

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

Download

1 formats

Video Formats

360pmp487.9 MB

Right-click 'Download' and select 'Save Link As' if the file opens in a new tab.

Bubble Plugins - Part 2: Building a dropdown element | NatokHD