Just want to start off by saying that UI Macros do not work in Workspaces, so proceed with caution.
Anyhow, I’ve been searching the community for a color picker UI Macro and couldn’t find anything so I created my own.
This can be added to any string field and will populate the field based on the color picker input.
UI Macro:
Name: colorPicker
JavaScript
<?xml version="1.0" encoding="utf-8" ?><j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null"><g2:evaluate var='field' object="true"> var field = '${ref}'.split('.')[1]; var currentVal = current.getValue(field); currentVal;</g2:evaluate> <input type="color" class ='${ref}' id='${ref}' name='${ref}' value="$[currentVal]" onchange="popField('${ref}',this.value)" > </input><script>function popField(reference,value) { var referenceField = reference.split('.')[1]; g_form.setValue(referenceField, value); } </script></j:jelly>
On your Dictionary Entry, add this attribute to display the macro next to the field.
ref_contributions=colorPicker
And that’s it. Simple as that.