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
Bedrock Mission!

Learn more

View all

Sign in to view all badges

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

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.