Does colorpicker works for AEM6.1?

[murilod74686477]

My team is having problems regarding the color picker (/libs/granite/ui/components/foundation/form/colorpicker) using AEM 6.1 in the touch ui.

We can't add properties: editMode and freestylePallete.

The jsp rendering the the colorpicker sends the settings in an object called "modes", but the js file uses a variable called "pickerModes".

Is there a fix for this?

[Sham_HC · Accepted solution]

See this article: 

http://experience-aem.blogspot.com/2015/10/aem-61-touchui-rich-text-editor-color-picker-plugin.html

[murilod74686477]

Thanks from the article Sham.

We tried that, but we still can set the color picker to display edit mode and freestyle.

It only display using classic mode

Do we need to do something else beside setting the properties: freestylePaletteType="{Boolean}true" and editType="{Boolean}true"

Thanks

[smacdonald2008]

Did you check the granite reference for this data type? 

[EsteBusta]

This is not a clear answer, the refered article (in the answer marked as 'solved') uses the properties as the documentation indicates, somehow in AEM 6.1 setting this properties don't work, so this is bug isn't it? there Is some solution for this?

Regards.

[smacdonald2008]

Are you able to set the property in classic mode - as stated by another user? 

[murilod74686477]

Hello smacdonald2008,

I am the original author of this post and the problem wasn't fixed.

When I set the property, it is ignored and the component is rendered without it.

I sent in the above answers the javascript problem, but no solution was offered.

[EsteBusta]

Nop, in classic mode neither. After a lot time trying to use the colorPicker, i just decided to implement my own colorPicker by using HTML5, check this post: http://conexiogroup.com/custom-colorpicker-in-aem-6-1-touch-ui-dialog/

[Clemente-3SHARE]

I just found a simple workaround for this issue in case you have extended the Color Picker component.

If you look into the /libs/granite/ui/components/foundation/form/colorpicker/render.jsp file you'll find in the line 130 this:

colorpickerJson.put("modes", pickerModes);

The problem there is that the coralui2.js file is looking for this key "pickerModes". So, when you extend this Color Picker in your /apps folder make sure to change the previous line to this:

colorpickerJson.put("pickerModes", pickerModes);

That should do the trick!

Cheers!

[EsteBusta]

That's right, changing the "modes" by "pickermodes" solves the selecting mode with the component, ANYWAY, i found another bugs, i.e. the pagination in the colorPicker is broken too. When you add more than 20 colors, (you add 20 nodes in the mappings folder) the pagination just crash.

After a lot time trying to do work well the colorPicker i just decided to implement my own colorPicker by using HTML5, check this post:

http://conexiogroup.com/custom-colorpicker-in-aem-6-1-touch-ui-dialog/

[bryanl39870608]

http://experience-aem.blogspot.com/2015/10/aem-61-touchui-rich-text-editor-color-picker-plugin.html

This article has been suggested several times, but refers to adding the color picker to the RTE. What about dialogs. The documented settings don't seem to have any effect. 

How do we use freestylePaletteType? 

https://docs.adobe.com/docs/en/aem/6-0/develop/ref/granite-ui/api/jcr_root/libs/granite/ui/component...

[smacdonald2008]

We are releasing a new article on this use case: 

http://scottsdigitalcommunity.blogspot.ca/2016/03/how-to-create-aem-touch-ui-color-picker.html

[Anthony_McLin]

Here's some more wonderfully bad news. Besides requiring an override to a core lib as mentioned previously (which, BTW, is a reported issue that Adobe has not yet issued a hotfix for).... the Granite UI field saves hex values with the leading #, whereas Classic UI color picker does not. End result, you can't have the same JCR property get used in both Classic UI and Touch UI using out-of-the box color pickers.

[renjuk15125523]

Hi Scot,

But this is not working in multicomposite fields.