AEM SPA

Question

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

Raja_Reddy · Accepted Answer

Hi @rahulva4

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.

{tags.map((tag) => ( {tag} ))}

);}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.

JagarlamudiVe · Answer

Hello @rahulva4

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

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded