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:
You can make the color picker any size
You can add/remove any components for the color picker and arrange them in any order (including Hue, Saturation, Transparency, Lightness/Darkness, Value, Temperature)
You can arrange your color picker components horizontally or vertically
You can place your color picker in Groups, Floating Groups, GroupFocus
You can customize the size of your color picker handle
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:
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.
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.
Hi @brett.miles thanks for reaching out! Here are some answers to your questions:
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?
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.
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.
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!
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:
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?)
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.
