


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
Views
Replies
Sign in to like this content
Total Likes
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';
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);
you need to use fileReference
<img src={this.props.fileReference}/>
look for json properties.
Where exactly