Forum Academy Marketplace Showcase Pricing Features

How to create a dynamic color selector and save hex color code to database

I have put this guide together after seeing @Bradluffy’s question about a color wheel. Ideally this would be a plugin, but for now I have combined @mishav’s Toolbox plugin and JSColor (http://jscolor.com) to do the task. Expect to spend about 10-20 minutes getting your own implementation up and running. I chose to use a simple input format (hex-only, click to activate) in order to make this easy for end users as well as Bubble creators.

You can preview the above example here: https://sandboxthings.bubbleapps.io/version-test/html_colors

If you want to jump right in, check out the editor here: https://bubble.io/page?type=page&name=html_colors&id=sandboxthings&tab=tabs-1

Let’s start:

We’ll be piecing together 9 core components, each having its own purpose and should be built out on the same page.

1) HTML element containing JSColor script. Note: you do not have to include ‘JSColor Embed Code’ at the beginning, it is there to help you see the element on the page. This element should be small and out of the way, it’s simply here to embed the code on your page. Alternatively, you could embed this in the SEO & Metadata Script input in your Settings tab so that it loads on every page.

The forums have a 35,000 character limit, so I can’t embed the JS. Go and download the latest JSColor library (http://jscolor.com/release/latest.zip), unzip, and open the jscolor.js file in a text/code editor. Copy->paste this code into the HTML block on your page or into the SEO & Metadata Advanced Settings panel.

2) Toolbox JavascripttoBubble element which connects your actions in the JSColor popup to the hex input field in [3]. You will need to install Toolbox from plugins tab in your app, this is just the plugin descriptor page: https://bubble.io/plugin/toolbox-1488796042609x768734193128308700

This is added to the page by selecting the element in the editor Visual Elements sidebar

You’ll notice the suffix is set to ‘jscolor’, this can be anything but it must match up with the JavaScript in [5]

3) Input field which is a background element that allows you to save the generated hex code from [2] to your database. Since JSColor generates a 6 character hex code you will need to prepend the generated value with #

4) Text element used for resetting hex value of your database thing on click, see workflow [5]. This can be any element that is clickable, such as a button, instead of text.

5) HTML element containing JSColor front-end HTML/JS code which renders the color selector upon click. The width, height and other parameters of this element are set in the style="" attribute, you can customize this as much as you want with CSS. You will notice the suffix from [2] is used in the JS function bubble_fn_jscolor. I have added additional JS to color the input background prior to the user saving the hex code, this way it acts as a sort of preview prior to making a decision to save.

[details=Show Code]

<p id="rect" style="border:none; width:0; height:0;">

<script>
function update(jscolor) {
    // 'jscolor' instance can be used as a string

bubble_fn_jscolor(jscolor.toString());

document.getElementById('rect').style.backgroundColor = '#' + jscolor;
}
</script>

[/details]
6) Button element which, upon clicking, sends the JSColor hex code to the input field [3]. Bubble can not read the hex code from this custom HTML input, so we have to send the hex to a Bubble element in order to reference its value in a workflow [7]. You’ll notice in the preview I am setting some conditions to update this button’s text description, text color and clickability. You’re obviously welcome (and encouraged!) to expand on this UX :slight_smile: By setting the default text color as the generated hex code from input [3] prior to saving, the user can again see a preview of the color they’ve selected prior to saving.

7) Workflow that updates the appropriate database thing after clicking Set Color button [6], in my case I have chosen to modify a text field on the current user. For whatever color you are trying to customize in your app/database, you will need to modify the database text thing in a workflow referencing the input value generated [3]

8) Workflow that resets the data thing’s hex color after clicking Clear [4]. This isn’t entirely necessary but I found it nice to have a single-click reset.

9) Background that contains our saved hex color as a dynamic value. This can be anything you wish, now that Bubble allows dynamic colors (Thanks @vascolucci! [New Feature] Dynamic colors) the color you just generated can be used on most of Bubble’s core elements (in this case, a page background).


I hope this has been helpful, let me know if I might’ve missed an opportunity to make this even better or if you’re confused at any specific step in the process and I’ll jump back in to make adjustments. Happy Bubbling!

9 Likes

Pretty nice work there, @philip!

If you want to skip the interim steps of using an input element to capture the hex code, you could prefix the “#” to the hexcode while sending it to bubble_fn_jscolor.

bubble_fn_jscolor('#' + jscolor.toString());

Also there is an event triggered by JavascriptToBubble, to know when the new value is available. This would be useful if you wanted the save to database to be initiated by the controls in the javascript.

1 Like

Thanks @mishav! I actually did set up v1 of this color selector the way you outline above, but the problem I ran into is that every 1/4 pixel you drag the mouse/selector cursor over generates a workflow and my apps ended up freezing with hundreds of workflows in the queue (clicking and dragging to find the color you want ends up hovering over hundreds of unique colors). I guess this is a good thing to bring up: By setting the secondary input and forcing a user to click to save, you limit yourself to 1 workflow per color change. If there is a way to counteract this and save only when the mouse cursor is ‘declicked/mouse up’ I’d definitely think that would be the better user experience.

Edit: Thanks for sharing the hashtag shortcut [quote=“mishav, post:2, topic:15079”]
bubble_fn_jscolor(’#’ + jscolor.toString());
[/quote]
I’ll add this in to the instructions soon!

1 Like

Thank you @philip for this effort. I really like it, this is essential and really complement the dynamic color feature. Super Helpful.
Thanks for sharing.:thumbsup:

@mishav ToolBox plugin is becoming a fundamental piece for JS custom work. Love it.

2 Likes

Haha I can imagine hundreds of database updates at once, what a mess!

So there are two events of interest from the javascript control …

  • onFineChange, which is based on continuous event, the mouse movement, happens lots of times per second. I agree that this is a good place to set the background colour of the visible element.
  • onchange event, which is based on mouse up, this is a good time to send the value to Bubble.

Even then I think you are on track with having a button to make the database change.

Ah, just now seeing that on the examples page! I suppose this is nice to have as an option if your app UX is better off with an immediate color update. I also noticed you can prepend the hashtag with {hash:true} on the input class, but when I attempted this just a few minutes ago I could not get the value to save to the database even though the hashtag did appear in the input. Strange. Thanks for the insights!

1 Like

This is a great help buddy. Appreciate you putting this together!!!