Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

Touch UI multifield with Image and Rich text

Avatar

Level 2

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

10 Replies

Avatar

Level 8

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

Avatar

Level 2

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

Level 7

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

Level 2

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

Level 10

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

Level 2

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

Level 10

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

Level 10

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

Level 2

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>

Avatar

Level 2

any update here?

Any Help eagerly waiting for this to complete.