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
BedrockMission!

Learn More

View all

Sign in to view all badges

How to use multiple color picker fields in the same tab in a dialog?

Avatar

Avatar
Ignite 1
Level 1
mandak21904112
Level 1

Likes

0 likes

Total Posts

2 posts

Correct Reply

0 solutions
Top badges earned
Ignite 1
View profile

Avatar
Ignite 1
Level 1
mandak21904112
Level 1

Likes

0 likes

Total Posts

2 posts

Correct Reply

0 solutions
Top badges earned
Ignite 1
View profile
mandak21904112
Level 1

25-01-2021

I have installed the color picker package provided by Adobe helpx document and I need to use two color pickers in the same tab of a page properties dialog that I'm creating. I have given the following structure for the color pickers.

First item in the multifield the color picker is rendering fine.
but in the second item of the multifield the color picker is rendering as a text field could you please help me in resolving this issue.

 

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

591 likes

Total Posts

572 posts

Correct Reply

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

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

591 likes

Total Posts

572 posts

Correct Reply

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

26-01-2021

@mandak21904112,

This works for me outside of a multifielld... Take a look at the screenshot and my cq_dialog.xml example below. Also please share with us your cq_dialogue.xml, there may be a problem. 

I have experienced some weird behaviors in the past where sometimes double colorpicker does not work as expecting when it sits inside one of the pre-defined Granite UI layouts, https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/granite-ui...; it is rare.

BrianKasingli_1-1611666418316.png

 

 

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Double Color"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/container">
        <layout
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/layouts/tabs"
            type="nav"/>
        <items jcr:primaryType="nt:unstructured">
            <general
                jcr:primaryType="nt:unstructured"
                jcr:title="General Options"
                sling:resourceType="granite/ui/components/foundation/section">
                <layout
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
                <items jcr:primaryType="nt:unstructured">
                    <column
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/container">
                        <items jcr:primaryType="nt:unstructured">
                            <colorfield-swatch-example-brandColor
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/colorfield"
                                autogenerateColors="off"
                                disabled="{Boolean}false"
                                emptyText="Please choose a color"
                                fieldLabel="Brand Color"
                                name="./brandColor"
                                required="{Boolean}true"
                                showDefaultColors="{Boolean}false"
                                showProperties="{Boolean}false"
                                showSwatches="{Boolean}true"
                                variant="swatch">
                                <items jcr:primaryType="nt:unstructured">
                                    <color1
                                        jcr:primaryType="nt:unstructured"
                                        value="#FF4136"/>
                                    <color2
                                        jcr:primaryType="nt:unstructured"
                                        value="#0077D9"/>
                                </items>
                            </colorfield-swatch-example-brandColor>
                            <colorfield-swatch-example-brandColor2
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/colorfield"
                                autogenerateColors="off"
                                disabled="{Boolean}false"
                                emptyText="Please choose a color"
                                fieldLabel="Brand Color2"
                                name="./brandColor2"
                                required="{Boolean}true"
                                showDefaultColors="{Boolean}false"
                                showProperties="{Boolean}false"
                                showSwatches="{Boolean}true"
                                variant="swatch">
                                <items jcr:primaryType="nt:unstructured">
                                    <color1
                                        jcr:primaryType="nt:unstructured"
                                        value="#FF4136"/>
                                    <color2
                                        jcr:primaryType="nt:unstructured"
                                        value="#0077D9"/>
                                </items>
                            </colorfield-swatch-example-brandColor2>
                        </items>
                    </column>
                </items>
            </general>
        </items>
    </content>
</jcr:root>

 

 

Answers (1)

Answers (1)

Avatar

Avatar
Establish
MVP
Anudeep_Garnepudi
MVP

Likes

271 likes

Total Posts

320 posts

Correct Reply

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

Avatar
Establish
MVP
Anudeep_Garnepudi
MVP

Likes

271 likes

Total Posts

320 posts

Correct Reply

87 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
Anudeep_Garnepudi
MVP

25-01-2021

@mandak21904112 

Can you share dialog.xml