Forum Academy Marketplace Showcase Pricing Features

[New Plugin] Customizable Color Picker

Hey Bubblers, I just released “Color Picker - Customizable” — a plugin that lets you add a Color Picker to your app and customize it in several helpful ways:

  1. You can make the color picker any size
  2. You can add/remove any components for the color picker and arrange them in any order (including Hue, Saturation, Transparency, Lightness/Darkness, Value, Temperature)
  3. You can arrange your color picker components horizontally or vertically
  4. You can place your color picker in Groups, Floating Groups, GroupFocus
  5. You can customize the size of your color picker handle
  6. The plugin fire an event every time the color is changed, so you can initiate workflows when the color is changed

Here are some example screenshots of how you can configure the color picker:

Color Picker #1

Color Picker #2
Screen Shot 2020-03-25 at 11.15.05 AM

Color Picker #3

Don’t hesitate to reach out with questions or comments at [email protected]

Enjoy!
Alex

6 Likes

Hi @alex4
I purchased the plugin. However, I placed it on my page, but it just simply won’t show up.
Could you assist?

Hi @david29 thanks for reaching out. Yes, happy to assist. Could you message me a screenshot of your editor setup? That will help me diagnose the issue here.

Hi @alex4 I was able to figure out the issue, thanks very much for the prompt reply though.

Looks great Alex. 2 quick questions. First, can it be set up so a user also has the option to enter a specific hex or rgb code? Second, not sure if the last button and group in your demo app is broken or if I couldn’t figure out how to use it. Either way, I couldn’t get the background colour of the group to change.

Cheers,

BM

Hi @brett.miles thanks for reaching out! Here are some answers to your questions:

  1. You can currently dynamically refer to a hex string when setting up the custom color picker, but cannot yet enter a hex/rgb code to update the value of the color picker – thanks for the suggestion thought! I’d be open to building this into the plugin. What’s the use case?
  2. Thanks for pointing out that the demo has a bug. I’ve just updated it an you can view the demo on the plugin demo page here.

Looking forward to your response to Question 1!

Best,
Alex
TechBlocks

Thanks Alex, my use case is I provide the admins of my SaaS customers with the ability to customise various parts of the UI to match their company branding etc. At the moment I don’t use a colour picker, I give them the option to select from a couple of pre-set themes or to enter their own Hex codes.

I see, thanks for describing the use case @brett.miles

I’ll take a look and see what I can do about building this feature in the next few days. Keep you posted. I appreciate the feedback!

Alex
TechBlocks

1 Like

Great to hear @david29 – don’t hesitate to reach out with other feedback!

Alex
TechBlocks

Hi @brett.miles – I just published an update that enables you to set the color of the color picker via a workflow action. You can see an example on the demo page under Example #2. Let me know if you have any questions!

Here’s a quick video of the update in action:

Enjoy!
Alex
TechBlocks

1 Like

Hi all - I just pushed an update for the Custom Color Picker plugin. You can now refer to the color pickers RGBA and Hex color codes (they are states associated with the plugin element that get updated every time the color picker’s value is changed).

This should be helpful when you’re hoping to display or save the color specifically in a certain color code. Example here:

Screen Shot 2020-06-15 at 10.09.00 AM

Enjoy!

Alex
TechBlocks

2 Likes

Hi @alex4

I’m using this plugin and it’s amazing. thank you very much.

i encounter just one issue…
I’m showing it on the popup, and users can select the color on the popup.
on the first time users open the popup, it works perfect, and it always sync with the hex code on input or the default color palette we made.
but when we open again, the hex of the color picker is still synced but the position of the color picker won’t be synced anymore and it stacks.
Please watch the video below to get what I meant and let me know if you have idea how I can fix it!

Even if i reset the group or not, it’s the same…
But I just realized if i disable the workflow, which save the color when closing the popup, it works even when we open 2nd time. that might give us the hint to fix it… (if we save it on database and show it again, the default color will be changed to the new saved color. that might be the cause of the issue?)


Hey @yukiar34, thanks for reaching out!

The color picker in your popup should maintain the value you change it to unless you use the “Set Color Picker Value” workflow action. Let me know if I misunderstood your question here, if so, please DM me a link to your editor so I can take a closer look at the issue you’re reporting.

Thanks!
Alex