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

Touch UI multifield with Image and Rich text

Avatar

Avatar
Boost 1
Level 2
VaraPrasad
Level 2

Like

1 like

Total Posts

13 posts

Correct Reply

0 solutions
Top badges earned
Boost 1
View profile

Avatar
Boost 1
Level 2
VaraPrasad
Level 2

Like

1 like

Total Posts

13 posts

Correct Reply

0 solutions
Top badges earned
Boost 1
View profile
VaraPrasad
Level 2

18-06-2018

Hi,

I am facing a typical issue i have a component with multifield which has image and Rich text when we use this we are not able to see image working properly and is is working like a browse button.

can any one help me to solve this issue, i tried many options but not working.

please find the touch Ui .content.xml

<?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="Experience AEM RTE Multifield"

    sling:resourceType="cq/gui/components/authoring/dialog"

    helpPath="en/cq/current/wcm/default_components.html#Text">

    <content

        jcr:primaryType="nt:unstructured"

        sling:resourceType="granite/ui/components/foundation/container">

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

                    <fieldset

                        jcr:primaryType="nt:unstructured"

                        jcr:title="Sample Dashboard"

                        sling:resourceType="granite/ui/components/foundation/form/fieldset">

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

                                    <pages

                                        jcr:primaryType="nt:unstructured"

                                        sling:resourceType="granite/ui/components/foundation/form/multifield"

                                        class="full-width"

                                        eaem-nested=""

                                        fieldDescription="Click '+' to add a new page"

                                        fieldLabel="URLs">

                                        <field

                                            jcr:primaryType="nt:unstructured"

                                            sling:resourceType="granite/ui/components/foundation/form/fieldset"

                                            name="./pages">

                                            <layout

                                                jcr:primaryType="nt:unstructured"

                                                sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"

                                                method="absolute"/>

                                            <items jcr:primaryType="nt:unstructured">

                                                <column

                                                    jcr:primaryType="nt:unstructured"

                                                    sling:resourceType="granite/ui/components/foundation/container">

                                                    <items jcr:primaryType="nt:unstructured">

                                                       

                                                        <text

                                                            jcr:primaryType="nt:unstructured"

                                                            sling:resourceType="cq/gui/components/authoring/dialog/richtext"

                                                            fieldLabel="Text"

                                                            name="./text"

                                                            required="{Boolean}true"

                                                            useFixedInlineToolbar="{Boolean}true">

                                                             <rtePlugins jcr:primaryType="nt:unstructured">

                                    <edit

                                    jcr:primaryType="nt:unstructured"

                                        features="*" />

                                    <findreplace

                                    jcr:primaryType="nt:unstructured"

                                        features="*" />   

                                    <undo

                                    jcr:primaryType="nt:unstructured"

                                        features="[undo,redo]" />

                                   

                                    <format

                                        jcr:primaryType="nt:unstructured"

                                        features="*"/>

                                      <subsuperscript

                                        jcr:primaryType="nt:unstructured"

                                        features="*"/>

                                   

                                    <justify

                                        jcr:primaryType="nt:unstructured"

                                        features="*"/>

                                   

                                    <paraformat

                                        jcr:primaryType="nt:unstructured"

                                        features="*">

                                        <formats jcr:primaryType="nt:unstructured">

                                            <paragraph

                                                jcr:primaryType="nt:unstructured"

                                                description="Paragraph"

                                                tag="p"/>

                                            <heading1

                                                jcr:primaryType="nt:unstructured"

                                                description="Heading 1"

                                                tag="h1"/>

                                            <heading2

                                                jcr:primaryType="nt:unstructured"

                                                description="Heading 2"

                                                tag="h2"/>

                                            <heading3

                                                jcr:primaryType="nt:unstructured"

                                                description="Heading 3"

                                                tag="h3"/>

                                            <heading4

                                                jcr:primaryType="nt:unstructured"

                                                description="Heading 4"

                                                tag="h4"/>

                                            <heading5

                                                jcr:primaryType="nt:unstructured"

                                                description="Heading 5"

                                                tag="h5"/>

                                        </formats>

                                    </paraformat>

                                    <links

                                        jcr:primaryType="nt:unstructured"

                                        features="*"/>

                                    <lists

                                    jcr:primaryType="nt:unstructured"

                                    features="*"/>

                                    <spellcheck

                                        jcr:primaryType="nt:unstructured"

                                        features="*"/>

                                       

                                    <table

                                        jcr:primaryType="nt:unstructured"

                                        features="*"/>

                                    <styles

                                jcr:primaryType="nt:unstructured"

                                features="*">

                                <styles jcr:primaryType="cq:WidgetCollection">

                                    <txt-caption

                                            jcr:primaryType="nt:unstructured"

                                            cssName="txt-caption"

                                            text="Caption"/>

                                    <txt-footnote

                                        jcr:primaryType="nt:unstructured"

                                        cssName="txt-footnote"

                                        text="Footnote"/>

                                    <txt-code

                                            jcr:primaryType="nt:unstructured"

                                            cssName="txt-code"

                                            text="code"/>

                                    <black

                                            jcr:primaryType="nt:unstructured"

                                            text="Slate Blue"

                                            cssName="font-slate-blue"/>

                                    <white

                                            jcr:primaryType="nt:unstructured"

                                            text="White"

                                            cssName="font-white"/>

                                    <primary1

                                            jcr:primaryType="nt:unstructured"

                                            text="CTA Blue"

                                            cssName="font-cta-blue"/>

                                    <primary2

                                            jcr:primaryType="nt:unstructured"

                                            text="CTA Pink"

                                            cssName="font-cta-pink"/>

                                    <accent1

                                            jcr:primaryType="nt:unstructured"

                                            text="Cyan"

                                            cssName="font-cyan"/>

                                    <accent2

                                            jcr:primaryType="nt:unstructured"

                                            text="Teal Green"

                                            cssName="font-teal-green"/>

                                    <accent3

                                            jcr:primaryType="nt:unstructured"

                                            text="CTA Violet"

                                            cssName="font-cta-violet"/>

                                    <accent4

                                            jcr:primaryType="nt:unstructured"

                                            text="True blue"

                                            cssName="font-true-blue"/>

                                    <accent5

                                            jcr:primaryType="nt:unstructured"

                                            text="Indigo"

                                            cssName="font-indigo"/>

                                    <accent6

                                            jcr:primaryType="nt:unstructured"

                                            text="Yellow Green"

                                            cssName="font-yellow-green"/>

                                </styles>

                            </styles>

                                </rtePlugins>

                                                        </text>

<image

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/form/fileupload"

autoStart="{Boolean}true"

class="cq-droptarget"

fieldLabel="Background Image"

fileNameParameter="./fileName"

fileReferenceParameter="./fileReference"

mimeTypes="[image]"

multiple="{Boolean}false"

name="./file"

title="Background Image"

uploadUrl="${suffix.path}"

useHTML5="{Boolean}true"/>

                                                        <altText

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/foundation/form/textfield"

fieldLabel="Alt Text"

name="./text"/>

                                                    </items>

                                                </column>

                                            </items>

                                        </field>

                                    </pages>

                                </items>

                            </column>

                        </items>

                    </fieldset>

                </items>

            </column>

        </items>

    </content>

</jcr:root>

Answers are appreciated as soon as possible.

Thanks

Prasad

Replies

Avatar

Avatar
Validate 1
Level 7
Hemant_arora
Level 7

Likes

92 likes

Total Posts

290 posts

Correct Reply

54 solutions
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 1
Give Back 50
View profile

Avatar
Validate 1
Level 7
Hemant_arora
Level 7

Likes

92 likes

Total Posts

290 posts

Correct Reply

54 solutions
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 1
Give Back 50
View profile
Hemant_arora
Level 7

18-06-2018

Change image resource type to granite/ui/components/coral/foundation/form/fileupload

Avatar

Avatar
Boost 1
Level 2
VaraPrasad
Level 2

Like

1 like

Total Posts

13 posts

Correct Reply

0 solutions
Top badges earned
Boost 1
View profile

Avatar
Boost 1
Level 2
VaraPrasad
Level 2

Like

1 like

Total Posts

13 posts

Correct Reply

0 solutions
Top badges earned
Boost 1
View profile
VaraPrasad
Level 2

18-06-2018

Thanks for the reply but i am not not able to open the dialog when we replace to granite/ui/components/coral/foundation/form/fileupload, But when we replace back the to old "granite/ui/components/foundation/form/fileupload" it is opening the dialog.

still not working

Avatar

Avatar
Boost 50
Level 6
Techaspect_Solu
Level 6

Likes

63 likes

Total Posts

150 posts

Correct Reply

79 solutions
Top badges earned
Boost 50
Boost 5
Boost 3
Boost 25
Boost 10
View profile

Avatar
Boost 50
Level 6
Techaspect_Solu
Level 6

Likes

63 likes

Total Posts

150 posts

Correct Reply

79 solutions
Top badges earned
Boost 50
Boost 5
Boost 3
Boost 25
Boost 10
View profile
Techaspect_Solu
Level 6

18-06-2018

Hi Prasad,

We could replicate your issue using your dialog.xml. Issue got resolved after changing the sling:resourceType of the image. Try replacing the sling:resourceType of an image to "cq/gui/components/authoring/dialog/fileupload". It should work. Let us know if it doesn't work, we will be more than happy to help you.

Regards,

TechAspect Solutions

Avatar

Avatar
Boost 1
Level 2
VaraPrasad
Level 2

Like

1 like

Total Posts

13 posts

Correct Reply

0 solutions
Top badges earned
Boost 1
View profile

Avatar
Boost 1
Level 2
VaraPrasad
Level 2

Like

1 like

Total Posts

13 posts

Correct Reply

0 solutions
Top badges earned
Boost 1
View profile
VaraPrasad
Level 2

20-06-2018

Thanks for the reply but  Image is seen but when we are saving as json this is not getting saved in json and also not populated when we open the dialog. Seeing issue with image and rich text data saving as json.

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

20-06-2018

You are not using latest mutifield. You are using granite/ui/components/foundation/form/multifield.

Change to granite/ui/components/coral/foundation/form/multifield as discussed in this artilce - -Building Experience Manager Components using Granite/Coral Resource Types

Avatar

Avatar
Boost 1
Level 2
VaraPrasad
Level 2

Like

1 like

Total Posts

13 posts

Correct Reply

0 solutions
Top badges earned
Boost 1
View profile

Avatar
Boost 1
Level 2
VaraPrasad
Level 2

Like

1 like

Total Posts

13 posts

Correct Reply

0 solutions
Top badges earned
Boost 1
View profile
VaraPrasad
Level 2

20-06-2018

I did the changes but no luck yet not able to save the rich text and text value but not image path in json apart form this when we open the dialog the data of richtext is not populated, i am able to see only the text field value.

Thanks

Prasad

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

20-06-2018

WHen you say change - are you referring to updating your resource types to granite/Coral ones. Once done, the MF data is stored as nodes, not JSON Data.

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

20-06-2018

We will be developing a Guided Journey of the granite/coral resource types and show use of the latest ones to use - including the Multi-field.

Avatar

Avatar
Boost 1
Level 2
VaraPrasad
Level 2

Like

1 like

Total Posts

13 posts

Correct Reply

0 solutions
Top badges earned
Boost 1
View profile

Avatar
Boost 1
Level 2
VaraPrasad
Level 2

Like

1 like

Total Posts

13 posts

Correct Reply

0 solutions
Top badges earned
Boost 1
View profile
VaraPrasad
Level 2

21-06-2018

yes i have done what have been told please see the updated .content xml

<?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="Experience AEM RTE Multifield" sling:resourceType="cq/gui/components/authoring/dialog" helpPath="en/cq/current/wcm/default_components.html#Text" >

<content jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/container">

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

<fieldset jcr:primaryType="nt:unstructured" jcr:title="Sample Dashboard" sling:resourceType="granite/ui/components/foundation/form/fieldset" >

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

<pages jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/multifield" class="full-width" eaem-nested="" fieldDescription="Click '+' to add a new page" fieldLabel="URLs" >

<field jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/fieldset" name="./pages">

<layout jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns" method="absolute" />

<items jcr:primaryType="nt:unstructured">

<column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/container" >

<items jcr:primaryType="nt:unstructured">

<text jcr:primaryType="nt:unstructured" sling:resourceType="cq/gui/components/authoring/dialog/richtext" fieldLabel="Text" name="./text" required="{Boolean}true" useFixedInlineToolbar="{Boolean}true" >

<rtePlugins jcr:primaryType="nt:unstructured">

<edit jcr:primaryType="nt:unstructured" features="*" />

<findreplace jcr:primaryType="nt:unstructured" features="*" />

<undo jcr:primaryType="nt:unstructured" features="[undo,redo]" />

<format cr:primaryType="nt:unstructured" features="*" />

<subsuperscript  jcr:primaryType="nt:unstructured" features="*" />

<justify jcr:primaryType="nt:unstructured"  features="*" />

<paraformat jcr:primaryType="nt:unstructured" features="*" >

<formats jcr:primaryType="nt:unstructured">

<paragraph jcr:primaryType="nt:unstructured" description="Paragraph" tag="p" />

<heading1 jcr:primaryType="nt:unstructured" description="Heading 1" tag="h1" />

<heading2 jcr:primaryType="nt:unstructured" description="Heading 2" tag="h2" />

<heading3  jcr:primaryType="nt:unstructured" description="Heading 3" tag="h3" />

<heading4 jcr:primaryType="nt:unstructured" description="Heading 4" tag="h4" />

<heading5 jcr:primaryType="nt:unstructured" description="Heading 5" tag="h5" />

</formats>

</paraformat>

<links jcr:primaryType="nt:unstructured" features="*" />

<lists jcr:primaryType="nt:unstructured" features="*" />

<spellcheck jcr:primaryType="nt:unstructured" features="*" />

<table jcr:primaryType="nt:unstructured" features="*" />

<styles jcr:primaryType="nt:unstructured"  features="*" >

<styles jcr:primaryType="cq:WidgetCollection">

<txt-caption jcr:primaryType="nt:unstructured" cssName="txt-caption" text="Caption" />

<txt-footnote jcr:primaryType="nt:unstructured" cssName="txt-footnote" text="Footnote" />

<txt-code jcr:primaryType="nt:unstructured" cssName="txt-code" text="code" />

<black jcr:primaryType="nt:unstructured" text="Slate Blue" cssName="font-slate-blue" />

<white jcr:primaryType="nt:unstructured" text="White" cssName="font-white" />

<primary1 jcr:primaryType="nt:unstructured" text="CTA Blue" cssName="font-cta-blue" />

<primary2 jcr:primaryType="nt:unstructured" text="CTA Pink" cssName="font-cta-pink" />

<accent1 jcr:primaryType="nt:unstructured" text="Cyan" cssName="font-cyan" />

<accent2 jcr:primaryType="nt:unstructured" text="Teal Green" cssName="font-teal-green" />

<accent3 jcr:primaryType="nt:unstructured" text="CTA Violet"cssName="font-cta-violet" />

<accent4 jcr:primaryType="nt:unstructured" text="True blue" cssName="font-true-blue" />

<accent5 jcr:primaryType="nt:unstructured" text="Indigo" cssName="font-indigo" />

<accent6 jcr:primaryType="nt:unstructured" text="Yellow Green"  cssName="font-yellow-green" />

</styles>

</styles>

</rtePlugins>

</text>

<image jcr:primaryType="nt:unstructured"  sling:resourceType="cq/gui/components/authoring/dialog/fileupload" autoStart="{Boolean}true" class="cq-droptarget" fieldLabel="Background Image" fileNameParameter="./fileName" mimeTypes="[image]"

multiple="{Boolean}false" name="./file" title="Background Image" uploadUrl="${suffix.path}" useHTML5="{Boolean}true" />

<altText jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/textfield" fieldLabel="Alt Text" name="./text" />

</items>

</column>

</items>

</field>

</pages>

</items>

</column>

</items>

</fieldset>

</items>

</column>

</items>

</content>

</jcr:root>