Overlay/Override granite colorfield

4 replies
2313 views
Translate

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/api/jcr_root/libs/granite/ui/components/coral/foundation/form/colorfield/index.html

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

BrianKasingliAccepted solution

New Participant

@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

BrianKasingliAccepted solution

New Participant

@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

Translate

S

Shaheena_SheikhAuthor

Level 6

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?

Translate

Sign up

Login with SSO

Login to the community

Login with SSO