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 - What is the correct way to extend core component dialog and implement SPA ?

Avatar

Level 3

I am extending all core components, notably the Content Fragment Component, but am running into an issue where nothing is being displayed when I select my content fragment. 
Here is my .content.xml located in apps/cob-corp-acquisition/components/contentfragment

 

 

 

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    cq:styleElements="[div,section,article,main,aside,header,footer]"
    jcr:primaryType="cq:Component"
    jcr:title="Content Fragment"
    sling:resourceSuperType="core/wcm/components/contentfragment/v1/contentfragment"
    componentGroup="cob-corp-acquisition - Content"/>

 

 

 

and my _cq_editConfig.xml also located in apps/cob-corp-acquisition/components/contentfragment

 

 

 

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="cq:EditConfig">
    <cq:inplaceEditing
        jcr:primaryType="cq:InplaceEditingConfig"
        active="{Boolean}true"
        editorType="contentfragment"/>
    <cq:dropTargets jcr:primaryType="nt:unstructured">
        <contentfragment
            jcr:primaryType="cq:DropTargetConfig"
            accept="[application/vnd.adobe.contentfragment]"
            groups="[media]"
            propertyName="./fragmentPath">
            <parameters
                jcr:primaryType="nt:unstructured"
                displayMode="multi"
                elementNames=""
                paragraphHeadings=""
                paragraphRange=""
                paragraphScope=""
                variationName=""/>
        </contentfragment>
    </cq:dropTargets>
    <cq:listeners
        jcr:primaryType="cq:EditListenersConfig"
        afterdelete="function (properties) { $(document).trigger('cq-contentfragment-delete'); }"
        afteredit="function (properties) { $(document).trigger('cq-contentfragment-edit'); }"
        afterinsert="function (properties) { $(document).trigger('cq-contentfragment-insert'); }"/>
</jcr:root>

 

 

 

 

And here is my SPA implementation located in ui.frontend/src/components/ContentFragment

 

 

 

import React, {PropsWithChildren} from 'react';
import {MappedComponentProperties, MapTo} from '@adobe/aem-react-editable-components';

interface IProps extends MappedComponentProperties {
    displayMode ?: string;
    elementNames ?: string;
    variationName ?: string;
    fragmentPath ?: string;
}

const EditConfig = {
    emptyLabel: 'Content Fragment',
    isEmpty: (props: PropsWithChildren<IProps>) => {
        return !props || !props.fragmentPath;
    }
};

const ContentFragment = (props: PropsWithChildren<IProps>): JSX.Element => {
    console.log(props)
    return (
        <>
            <div>
            </div>
        </>
    )

}


export default MapTo('cob-corp-acquisition/components/contentfragment')(ContentFragment, EditConfig);

 

 

 

 

Am i supposed to create my own JAVA model/implementation similar to com.adobe.cq.wcm.core.components.internal.models.v1.contentfragment.ContentFragmentImpl or can i just use this existing implemenation? With what I have above I am able to see the component rendered 

goonmaniangooner_0-1662590122634.png

 

and it appears to grab the correct information via http://localhost:4502/content/cob-corp-acquisition/us/en/test.model.json

 

 

 

{
  "componentsResourceTypes": [
    "cob-corp-acquisition/components/contentfragment",
    "wcm/foundation/components/responsivegrid",
    "nt:unstructured",
    "cob-corp-acquisition/components/creditonebank/page-templates/corporate"
  ],
  "brandSlug": "",
  "cssClassNames": "corporate page basicpage",
  "designPath": "/libs/settings/wcm/designs/default",
  "templateName": "cob-corporate",
  "lastModifiedDate": 1662588257614,
  "title": "Test",
  "language": "en",
  ":items": {
    "root": {
      "columnClassNames": {
        "responsivegrid": "aem-GridColumn aem-GridColumn--default--12"
      },
      "gridClassNames": "aem-Grid aem-Grid--12 aem-Grid--default--12",
      "columnCount": 12,
      "allowedComponents": {
        "applicable": false,
        "components": [
          
        ]
      },
      ":items": {
        "responsivegrid": {
          "columnClassNames": {
            "contentfragment": "aem-GridColumn aem-GridColumn--default--12"
          },
          "gridClassNames": "aem-Grid aem-Grid--12 aem-Grid--default--12",
          "columnCount": 12,
          "allowedComponents": {
            "applicable": false,
            "components":[...]
          },
          ":items": {
            "contentfragment": {
              "id": "contentfragment-7db61cc5b3",
              "description": "",
              "title": "Test",
              "elements": {
                "description": {
                  "dataType": "string",
                  "title": "Description",
                  "value": "<p>PP TEXT</p>\n<p>HELLO</p>\n<p>BYBY</p>\n",
                  "multiValue": false,
                  ":type": "text/html"
                }
              },
              "elementsOrder": [
                "description"
              ],
              ":items": {
                
              },
              ":itemsOrder": [
                
              ],
              ":type": "cob-corp-acquisition/components/contentfragment",
              "model": "cob-corp-acquisition/models/rte",
              "dataLayer": {
                "contentfragment-7db61cc5b3": {
                  "@type": "cob-corp-acquisition/components/contentfragment",
                  "repo:modifyDate": "2022-09-07T22:04:17Z",
                  "dc:title": "Test",
                  "elements": [
                    {
                      "xdm:text": "<p>DISPLAY TEST TEXT</p>\n",
                      "xdm:title": "Description"
                    }
                  ]
                }
              }
            }
          },
          ":itemsOrder": [
            "contentfragment"
          ],
          ":type": "wcm/foundation/components/responsivegrid"
        }
      },
      ":itemsOrder": [
        "responsivegrid"
      ],
      ":type": "wcm/foundation/components/responsivegrid"
    }
  },
  ":itemsOrder": [
    "root"
  ],
  ":path": "/content/cob-corp-acquisition/us/en/test",
  ":hierarchyType": "page",
  ":type": "cob-corp-acquisition/components/creditonebank/page-templates/corporate"
}

 

 

 

 

But I cannot select a content fragment and display the information. How do I fix this? Please and thank you

7 Replies

Avatar

Community Advisor

Hi,

Check if your react component is loading or not.

You may need to add at ui.frontend/src/components/import-components.js 

 

e.g.

import './Page/Page';
import './Text/Text';
import './Custom/Custom';

Avatar

Level 3

Hello @arunpatidar,

I am importing then via the MapTo within my import-components.js

 

import { MapTo } from '@adobe/aem-react-editable-components';

import {
    ContainerV1, ContainerV1IsEmptyFn
} from '@adobe/aem-core-components-react-spa';

(function importAllComponents() {
    // eslint-disable-next-line
    const componentsContext = require.context('./', true, /^(?!.*import-components).*\/(?!.*test).*\.(js|tsx)$/);
    componentsContext.keys().forEach((key) => componentsContext(key));
})();

MapTo('cob-corp-acquisition/components/container')(ContainerV1, { isEmpty: ContainerV1IsEmptyFn });

and it appears to be loaded correctly within the contextFrame

goonmaniangooner_0-1662653049605.png

Is there another step I can take?

Avatar

Level 2

Hi @goonmanian-gooner, I've had a similar issue when I created a custom react component.

All we have to do is, create a component, sling model exporter, react component in ui-frontend module and inclusion of this in import-components.js

Initially after I installed the package, the component didn't load for me. The page was empty, although I could see the component added in crx. But it took sometime, probably after I restarted. 

 

Avatar

Level 3

@kirthi_murali Thanks for responding, I have created several custom components and all work but I cannot manage to get the core components to work correctly for my site. If you have any example of core components sling exporter I would very much appreciate it. Thank you. 

Avatar

Level 2

 

@goonmanian-gooner , if you're extending the core component in your project and reusing it, it is not necessary to create a model class for this as the json is already rendered.

 

Avatar

Level 3

@arunpatidar Also while looking within the system console found 

goonmaniangooner_0-1662653545002.png

Does this need to be filled out? I wouldn't think so as the components work fine for Wknd and weRetail

Avatar

Community Advisor

Hey,

I am also not sure, you can check wknd and we-retail example, to check how they did it.