Overlay/Override granite colorfield

Avatar

Avatar
Applaud 25
Level 2
Shaheena_Sheikh
Level 2

Likes

2 likes

Total Posts

97 posts

Correct reply

1 solution
Top badges earned
Applaud 25
Applaud 5
Affirm 1
Validate 10
Validate 1
View profile

Avatar
Applaud 25
Level 2
Shaheena_Sheikh
Level 2

Likes

2 likes

Total Posts

97 posts

Correct reply

1 solution
Top badges earned
Applaud 25
Applaud 5
Affirm 1
Validate 10
Validate 1
View profile
Shaheena_Sheikh
Level 2

19-01-2021

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

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

648 likes

Total Posts

608 posts

Correct reply

240 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

648 likes

Total Posts

608 posts

Correct reply

240 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
BrianKasingli
MVP

19-01-2021

@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

 

Answers (0)