Thread by @shikuwangombe

Hey no-coders,

Here's the thread on how I made my custom icons work in Bubble.

I will note, this process would be easier to do with a plugin, but since I don't know how to build plugins in Bubble (yet) I've figured out a way to do it without a plugin.

#nocode #buildinpublic

Preface: As with all my other 'how-to' threads, this will be posted here:

threadsby.me/its/shikuwango…

Pro-tip: If you sign up with your email, I can send these to you directly to your inbox and you'll never miss one :).

Will start sending via email when I reach 10 subs.

1/ Bubble has a set of icons that are native to the platform, and you're more than welcome to use those.

If you do so, this process will be much more straightforward.

However, not all the icons there are great for my use case or my aesthetic, so I uploaded my own.

2/ The first step is to upload the icons as an option set.

I created an option set called 'icons' and added an 'image' type attribute for the icons themselves.

After that, upload every icon you have and name it accordingly. All my icons have a very tiny file size

3/ The next step is to create a data 'field' for the icon in your database. I created one in my User Categories Data type, and labeled the field 'category icon'. Then set that field to be an 'image' type. This is where the icon will be stored for each category a user creates.

4/ Now we can upload the icons in the front end of the app. In my case, I have a categories section in the app, where a user can create their own custom categories, then link the category to an icon. The icons are placed as svg image files that I grouped together.

5/ Here's where things get interesting:

In order to get the icons to link to a category, I created a custom state on the *GROUP* of icons, and set that to be the 'icons' option set I'd created earlier.

So the state for that group should be an icon from the icon options set.

5/ From the different methods I tried, this seems most straightforward because you have fewer workflows. As opposed to creating super-long workflows for each individual icon, and creating 'only when' conditions. That would work but would be incredibly long and inefficient.

6/ After you've made the custom state, you must create a workflow that will store the selected icon into the group's custom state. This is temporary; it doesn't store anything in the database. It simply sets the state of the GROUP. It's a one-action workflow applied to each icon.

7/ So to further explain with the above example, when the wallet icon image is clicked I want the state of the group of icons to be set to the option 'wallet' from the 'icons' option set. You set this in the 'workflow' tab.

8/ The group of icons can only ever be one thing at a time. So if a user clicks the 'wallet' icon, the state is set to 'wallet'. If they change their mind and click the 'fuel' icon, the state of the group will change to 'fuel'. That'll make sure you don't store multiple icons.

9/ Linking the icons to the category the user creates happens in the workflow of the 'Submit' button. Once a user clicks 'submit', the app will store data from all the inputs, including the icons. The icon specifically will be derived from the option state of the GROUP.

10/ So when a user clicks 'submit', you 'create a new thing' (in this case, create a new budget category), and set the icon field in the database to be the GROUP's icon. As shown in the screenshot, this evaluates to an image. The data field in the database is also an image

11/ The icon will now be in the database under that data type. To get it to show, go to the section of the app in which you want it shown (in my case, the repeating group that shows the user categories). Place an image element, set it to be dynamic, then link it to your data type

12/ For this to work, you have to set the data source for the parent group to the data type in which the icon is stored (in this case, the user categories data type I had already created).

13/ Last note, when selecting the icon, in order to make it clear that the icon the user clicked has been selected, you can add a conditional statement to the icon image that says when the GROUP state is 'x' (where 'x' is the same as the icon that has been clicked, e.g. 'wallet')

14/ ... add a border, shadow, etc. Whatever tickles your fancy. I should note, there isn't a way to change the color of the svg (but if you use bubble icons that does work). However, you can alternate between two different-color images if you want.

15/ Summary

Create option set -> Create image data field for icon -> Place icons and group them -> Create custom state for icons that is linked to option set -> Set workflows for individual icons to link to GROUP -> Set workflow for submit button -> Set conditionals for icons

16/ If you found value in this thread, I would love for you to like and retweet the first tweet. And follow @shikuwangombe for more #nocode tips/threads and #buildinpublic projects :)

https://twitter.com/shikuwangombe/status/1406684640392351744?s=20

17/ Lastly if you have any questions or suggestions on how to improve on this method, feel free to comment below. We can all learn in public together!