Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.

AEM React wont render title from dialog

Avatar

Level 2

I have this in model

static final String RESOURCE_TYPE = "sample/components/header";

@ValueMapValue
private String title;

@Override
public String getTitle() {
return title;
}

@Override
public String getExportedType(){
return HeaderModelImpl.RESOURCE_TYPE;
}

This is content from dialog

<content
granite:class="cmp-container__editor"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<tabs
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/tabs"
maximized="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<uploadBackground
jcr:primaryType="nt:unstructured"
jcr:title="Background"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<columns
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
fieldLabel="Layout"
margin="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<file
granite:class="cmp-image__editor-file-upload"
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
class="cq-droptarget"
fileNameParameter="./fileName"
fileReferenceParameter="./fileReference"
mimeTypes="[image/gif,image/jpeg,image/png,image/tiff,image/svg+xml]"
name="./file"/>
</items>
</columns>
</items>
</uploadBackground>
<title
jcr:primaryType="nt:unstructured"
jcr:title="Title"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Header title"
name="./title"/>
</items>
</tabs>
</items>
</content>

 React part

class Header extends Component {

get content() {
return (
<div>
{this.title}
</div>
);
}

get title() {
if (this.props.title) {
return <h4>{this.props.title}</h4>;
}

return null;
}


render() {
if (HeaderEditConfig.isEmpty(this.props)) {
return null;
}
return (<div className="text">
{this.title}
</div>);

}

}

export default MapTo("sample/components/header")(Header, HeaderEditConfig);

 But when I add that component on page and submit some text in dialog nothing is happening, blank page

4 Replies

Avatar

Community Advisor

Hi,

Have you added your react component in /ui.frontend/src/components/import-components.js

e.g.

import './Page/Page';
import './Text/Text';
import './CustomComp/CustomComp';


Arun Patidar

Avatar

Level 2

Hi, I have that, anyway I fixed it, can you help me how to render image?

 

I have next stuff for image

@ValueMapValue
private String fileReference;

 

@Override
public String getFileReference() {
return fileReference;
}
<file
granite:class="cmp-image__editor-file-upload"
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
class="cq-droptarget"
fileNameParameter="./fileName"
fileReferenceParameter="./fileReference"
mimeTypes="[image/gif,image/jpeg,image/png,image/tiff,image/svg+xml]"
name="./file"/>

But how to render it react? For title I created like this and title is rendering, but dont know about image

 

import React, {Component} from "react";
import {MapTo} from "@adobe/aem-react-editable-components";


export const HeaderEditConfig = {
emptyLabel: "Header",

isEmpty: function (props) {
return !props || !props.title || !props.file;
},
};

class Header extends Component {

get content() {
return (
<div>
<img src={this.props.file}/>
{this.title}
</div>
);
}

get title() {
if (this.props.title) {
return <h4>{this.props.title}</h4>;
}

return null;
}


render() {
if (HeaderEditConfig.isEmpty(this.props)) {
return null;
}
return (<div className="text">
{this.title}
</div>);

}

}

export default MapTo("sample/components/header")(Header, HeaderEditConfig);

Avatar

Community Advisor

you need to use fileReference

 

<img src={this.props.fileReference}/>

 look for json properties.



Arun Patidar