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
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
Views
Likes
Replies
Views
Likes
Replies