Level 2

Solved

ColorField issue in dialog AEM 6.5

4 replies
1030 views
Translate All

Hi Everyone,

I am using colorfield in my custom component dialog. In 6.5 version the color palette field looks different compare to sdk version, is there any reason? I need UI looks like sdk version which looks better.

AEM SDK:

AEM 6.5:

resourceType:

granite/ui/components/coral/foundation/form/colorfield

AmitVishwakarmaAccepted solution

Community Advisor

To match the ColorField UI from AEM SDK version in AEM 6.5:

Override Styles: Add custom CSS to adjust the ColorField appearance to match the SDK version.
Use Granite UI version: Try using the older granite/ui/components/coral/foundation/form/colorpicker resourceType if possible.
Coral UI Customization: Explore Coral UI customization options to modify the default appearance in AEM 6.5.

Custom CSS is the quickest approach if you're aiming for a visual match.

Amit Vishwakarma - Adobe Commerce Champion 2025 | 17x Adobe certified | 6x Adobe SME

kapil_rajoria

Community Advisor

Hi @jooca, please check if the granite.ui version is same for both of them by going to:
http://localhost:4502/system/console/bundles and search granite.ui
Check the version for com.adobe.granite.ui.clientlibs

The colorfield in AEM SDK one is looking fine.

Also, please make sure you are using the latest AEM service package.

Translate

J

joocaAuthor

Level 2

it looks like granite.ui versions are different in 6.5 & sdk.
6.5 - 1.0.92.CQ650-B0006

sdk - 1.1.20

Translate

MukeshYadav_

Community Advisor

Hi @jooca ,

You are right, colorfield has different look & feel in AEM cloud sdk and 6.x.

However in general we use swatch variant to discourage author to use any random color selection.

You may use swatch variant & set other properties with a minor css code to maintain look similar to could.

For ex

<picker
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/colorfield"
name="./color"
showDefaultColors="{Boolean}false"
showProperties="{Boolean}false"
showSwatches="{Boolean}true"
variant="swatch">
<items jcr:primaryType="nt:unstructured">
    <empty
            jcr:primaryType="nt:unstructured"
            name="No Color"
            value=""/>
    <grey
            jcr:primaryType="nt:unstructured"
            name="Grey"
            value="#474747"/>
    <orange
            jcr:primaryType="nt:unstructured"
            name="Orange"
            value="#d04a02"/>
    <red
            jcr:primaryType="nt:unstructured"
            name="Red"
            value="#e0301e"/>
</items>
</picker>

You can put below css to hide hex color code which can be redundant if color are easily distinguishable

.coral3-ColorInput--swatch label {
    display: none;
}

Thanks

Translate

AmitVishwakarma

Accepted solution

Community Advisor

To match the ColorField UI from AEM SDK version in AEM 6.5:

Override Styles: Add custom CSS to adjust the ColorField appearance to match the SDK version.
Use Granite UI version: Try using the older granite/ui/components/coral/foundation/form/colorpicker resourceType if possible.
Coral UI Customization: Explore Coral UI customization options to modify the default appearance in AEM 6.5.

Custom CSS is the quickest approach if you're aiming for a visual match.

Translate

Amit Vishwakarma - Adobe Commerce Champion 2025 | 17x Adobe certified | 6x Adobe SME

Sign up

Login with SSO

Login to the community

Login with SSO