AEM SPA

[Rahul17]

Hello, after authoring tags through the dialog box how will we be able to access it using react will it be loading through the props or are we supposed to have a specific API call for the same

[Jvenkat]

Hello @Rahul17 

When you are using React with AEM, data from AEM is passed to the React components as properties (props). Specifically for tags, once you have authored them using the AEM dialog box, these tags will be stored as properties of the resource. In your React component, you would have access to these tags through props by their property name. No specific API call will be needed to access these properties provided the mapping has been correctly set up.

Eg:

const MyReactComponent = (props) => {
const tags = props.tags;
// Do something with tags
}

Thanks,

Venkat

[Mahedi_Sabuj]

To expose dialog properties to the React component, need to implement a Sling Model. 

Refer to the Adobe documentation for guidance on creating a custom SPA component
https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/s...

[Raja_Reddy · Accepted solution]

Hi @Rahul17 

To access tags authored through the AEM dialog box in a React component in AEM, you can use the AEM Content Services API to fetch the tags from the AEM server. Here's an example of how you can do this:

First, you need to create a tag namespace in AEM. This can be done by navigating to the AEM Tags console (/libs/cq/tagging/gui/content/tags.html) and creating a new namespace.

Once you have created a tag namespace, you can author tags using the AEM dialog box. These tags will be stored in the AEM repository and can be accessed using the AEM Content Services API.

In your AEM component, you can use the ModelManager to fetch the tags from the AEM server. Here's an example:

import React, { useState, useEffect } from "react";
import { ModelManager } from "@adobe/aem-spa-page-model-manager";

function MyComponent(props) {
  const [tags, setTags] = useState([]);

  useEffect(() => {
    // Fetch the tags from the AEM server
    ModelManager.getData("/content/my-page/jcr:content/root/responsivegrid/my-component")
      .then((data) => {
        // Extract the tags from the data
        const tags = data["cq:tags"];

        // Set the tags in the component state
        setTags(tags);
      })
      .catch((error) => {
        console.error(error);
      });
  }, []);

  return (
    <div>
      {tags.map((tag) => (
        <span key={tag}>{tag}</span>
      ))}
    </div>
  );
}

export default MyComponent;

In this example, we use the ModelManager.getData method to fetch the data for the component from the AEM server. We then extract the tags from the data and set them in the component state using the useState hook. Finally, we render the tags as a list of span elements.

Thanks.

[kautuk_sahni]

@Rahul17 Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.