Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events

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