Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Overlay/Override granite colorfield

Shaheena_Sheikh
Level 4
Level 4

I have a dialog box where i have used colorfield in 3 different fields. But all the fields should show only 4 colors. Which means i have to add the following node to each colorField node:

--

items

color1

color2

color3

color4

--

This is difficult to maintain as i have to add these nodes to each place wherever i have colorField component. I am looking for a way where i can keep these nodes at one place from where all the colorfield nodes can refer to the items.

Overlay/override is not an option as colorfield is having mixingType: granite:FinalArea

 

https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/granite-ui...

1 Accepted Solution
BrianKasingli
Correct answer by
Community Advisor
Community Advisor

@Shaheena_Sheikh, your question is confusing, but if you are looking for a way to only show swatches of pre-selected colors, you can use this.

 

<textColor
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/colorfield"
    autogenerateColors="off"
    fieldLabel="Text Color"
    name="./textColor"
    showDefaultColors="{Boolean}false"
    showProperties="{Boolean}false"
    showSwatches="{Boolean}true">
    <items jcr:primaryType="nt:unstructured">
        <color1
            jcr:primaryType="nt:unstructured"
            value="000000"/>
        <color2
            jcr:primaryType="nt:unstructured"
            value="FFFFFF"/>
    </items>
</textColor>

 

Or you can use ACS Common's Generic List Feature to create shared configurations - https://sourcedcode.com/re-usable-color-select-in-touch-ui-dialogs-w-acs-commons-generics-list

 

View solution in original post

4 Replies
BrianKasingli
Correct answer by
Community Advisor
Community Advisor

@Shaheena_Sheikh, your question is confusing, but if you are looking for a way to only show swatches of pre-selected colors, you can use this.

 

<textColor
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/colorfield"
    autogenerateColors="off"
    fieldLabel="Text Color"
    name="./textColor"
    showDefaultColors="{Boolean}false"
    showProperties="{Boolean}false"
    showSwatches="{Boolean}true">
    <items jcr:primaryType="nt:unstructured">
        <color1
            jcr:primaryType="nt:unstructured"
            value="000000"/>
        <color2
            jcr:primaryType="nt:unstructured"
            value="FFFFFF"/>
    </items>
</textColor>

 

Or you can use ACS Common's Generic List Feature to create shared configurations - https://sourcedcode.com/re-usable-color-select-in-touch-ui-dialogs-w-acs-commons-generics-list

 

View solution in original post

Shaheena_Sheikh
Level 4
Level 4
the section of your code which has color options (all items), can that be maintained separately and referred by all colorfield nodes? Instead of having to write the items section for every colorfield node?