AEM React wont render title from dialog | Community
Skip to main content
S
stefanjank
July 6, 2022

AEM React wont render title from dialog

  • July 6, 2022
  • 1 reply
  • 991 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
July 6, 2022

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
    S
    stefanjankAuthor
    July 6, 2022

    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);
      S
      stefanjankAuthor
      July 6, 2022

      you need to use fileReference

       

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

       look for json properties.


      Where exactly

        Terms & ConditionsAccessibility statement

        Loading footer...