How to store color swatches in the database

Need help Database
1

I want to make a color picker that adds color swatches to the database.
I’m playing around with the Zeroqode color picker plugin, however i’m a bit unsure how to save a color selection to the database.
Does anyone know what format the data should have to be able to be rendered as a color?
And then how do I render the input back as color swatch in a repeating group?

2

@ZeroqodeSupport

1 Like
3

Hey, @kim3!

Sorry for a late reply :pray:

At a present functionality, the plugin doesn’t have such an event, however, we’ve found a workaround for you. Kindly refer to the video below.
Just a point to mention: there is a new Data Type created called Testcolourpicker with the field “colour” (type text) for your reference. You can use it as an example for your own idea of the data type.

Please, let us know if there is anything else we can assist with.

Best regards.

1 Like
4

Thank you so much, I’ll try this tmr.

1 Like
5

Hey, @kim3!

Happy to help! :slightly_smiling_face:

If there will be any questions, drop us a line here.

Best regards.

6

Hi, I know this is an old post but I’d like to do this too, and the video isnt working. Can you help? Thank you!

1 Like
7

Hello,
I’m glad to hear you’re exploring the Zeroqode Color Picker plugin for your application. Here’s a step-by-step guide to help you save color selections to your database and render them as color swatches in a repeating group in Bubble:

  1. Data Type Setup:
  • In your Bubble database, create a new field in the relevant data type where you want to store the color. This field should be of type ‘text’.
  1. Saving Color Selection:
  • When a user selects a color using the Color Picker, the plugin typically generates a color value in a standard format like hexadecimal (e.g., #FF5733).
  • Use a workflow in Bubble to save this color value to the database. For instance, when the color is selected, trigger a workflow that creates a new thing or updates an existing thing in your database with the color value.
  1. Rendering Color Swatches:
  • To display the color swatches, use a Repeating Group element in Bubble.
  • Set the Repeating Group’s data source to the list of items containing your color data.
  • Inside the Repeating Group, add a shape or a group that will represent the color swatch.
  • Set the background color of this shape/group to dynamically change based on the current cell’s color data. This is done by setting the background color’s dynamic expression to the current cell’s color field.
  1. Data Format:
  • Ensure that the color data is stored in a format recognizable as a color by CSS (like hexadecimal, RGB, or named colors). This will allow Bubble to render the color correctly in the UI.
  1. Testing and Tweaking:
  • Test the color picker and the displaying of the color swatches in the repeating group. Make adjustments as needed to ensure that the colors are displayed correctly.

Also, for your convenience i have recorded a loom video: Loom | Free Screen & Video Recording Software | Loom
If you encounter any specific issues or need further clarification on any step, feel free to ask. I’m here to help you make the most out of your Bubble development experience with Zeroqode plugins.
Best regards.

1 Like