Add Color Picker to field – UI Macro

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

<?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.