Adobe Experience Manager Sites & More

VaraPrasad · 6/18/18

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

<column

jcr:primaryType="nt:unstructured"

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

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

<column

jcr:primaryType="nt:unstructured"

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

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

<column

jcr:primaryType="nt:unstructured"

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

<text

jcr:primaryType="nt:unstructured"

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

fieldLabel="Text"

name="./text"

required="{Boolean}true"

useFixedInlineToolbar="{Boolean}true">

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

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

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

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

Hemant_arora · 6/18/18

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

VaraPrasad · 6/18/18

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

Techaspect_Solu · 6/18/18

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

VaraPrasad · 6/20/18

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.

smacdonald2008 · 6/20/18

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

VaraPrasad · 6/20/18

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

smacdonald2008 · 6/20/18

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.

smacdonald2008 · 6/20/18

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.

VaraPrasad · 6/21/18

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

</formats>

</paraformat>

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

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

</items>

</column>

</items>

</field>

</pages>

</items>

</column>

</items>

</fieldset>

</items>

</column>

</items>

</content>

</jcr:root>

VaraPrasad · 6/25/18

any update here?

Any Help eagerly waiting for this to complete.

Adobe Experience Manager Sites & More

Touch UI multifield with Image and Rich text

Learn

Documentation

Community

Support

Resources

Adobe account

Adobe