Bookmarklet: Theme Colour Picker

Only of the features lacking in the current CRM Theme form is colour picker. I logged issue 1197446 in Connect regarding this. But, it seems this is not really a priority at the moment. You can use Guido’s CRM Theme Generator to get around this and it is really excellent, as it also gives you instant feedback on how the theme will look. But I still like to see a colour picker in the theme form. So, I developed a bookmarklet to do this.

Copy paste this code into your favorites/bookmarks bar and execute this when you have opened the theme form.

javascript: var contentPanel=$('#crmContentPanel > iframe');if(contentPanel&&contentPanel.length>0){var targetFrame=contentPanel[0].contentDocument;var Xrm=contentPanel[0].contentWindow.Xrm;Array.from(targetFrame.querySelectorAll('.ms-crm-ColorValueDirection')).forEach(function(d,i){var c=targetFrame.createElement('input');c.setAttribute('id',d.getAttribute('id')+'_colorpicker');c.setAttribute('type','color');c.setAttribute('style','display: block; width: 50px; height: 16px; right: -54px; top: 1px; position: absolute;');c.value=targetFrame.querySelectorAll('#'+d.getAttribute('id')+' span')[0].textContent;d.appendChild(c);});targetFrame.getElementById('tdAreas').addEventListener('change',function(e){var targetIdParts=e.target.id.split('_');if(targetIdParts[1]!=='colorpicker')return;var mainDiv=targetIdParts[0];targetFrame.querySelectorAll('#'+mainDiv+' span')[0].textContent=e.target.value;targetFrame.getElementById(mainDiv+'_colord').style.background=e.target.value;targetFrame.getElementById(mainDiv+'_i').value=e.target.value;Xrm.Page.getAttribute(mainDiv).setValue(e.target.value);},false);}
else
{alert('Cannot locate theme IFrame');} void 0;

Here in the unminified source.

var contentPanel = $('#crmContentPanel > iframe');
if (contentPanel && contentPanel.length > 0) {
	var targetFrame = contentPanel[0].contentDocument;
	var Xrm = contentPanel[0].contentWindow.Xrm;
	Array.from(targetFrame.querySelectorAll('.ms-crm-ColorValueDirection')).forEach(function(d,i){
		var c = targetFrame.createElement('input');
		c.setAttribute('id',d.getAttribute('id')+'_colorpicker');
		c.setAttribute('type','color');
		c.setAttribute('style','display: block; width: 50px; height: 16px; right: -54px; top: 1px; position: absolute;');
		c.value = targetFrame.querySelectorAll('#'+d.getAttribute('id')+' span')[0].textContent;
		d.appendChild(c);
	});

	targetFrame.getElementById('tdAreas').addEventListener('change', function(e) {
		var targetIdParts = e.target.id.split('_');
		if(targetIdParts[1] !== 'colorpicker') return;
		var mainDiv = targetIdParts[0];
		targetFrame.querySelectorAll('#'+mainDiv+' span')[0].textContent = e.target.value;
		targetFrame.getElementById(mainDiv+'_colord').style.background = e.target.value;
		targetFrame.getElementById(mainDiv+'_i').value = e.target.value;
		Xrm.Page.getAttribute(mainDiv).setValue(e.target.value);
	},false);
}
else
{
	alert('Cannot locate theme IFrame');
}

Here is how it looks after you have executed the bookmarklet.

Colour Picker

I have tested this only in Firefox 43 and Chrome 47.

EDIT (27/01/16): Fixed hardcoded navbarbackgroundcolor in getAttribute. Apologies.

Advertisements

One thought on “Bookmarklet: Theme Colour Picker

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s