Level 2

Solved

How to set value one authored component to another authored component

Forum|Forum|1 year ago
May 10, 2024
3 replies
949 views

suppose i have authored cta component i want this authored value into other component that cards. How i can achive this? as I am New to AEM please Help me on this.

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

Best answer by tushaar_srivastava

Hi @prachiat

solution:

Here are some sample snippet you can follow to achieve this.

1- Create Sling Model for your page

@Model(adaptables = Page.class)
public class PageModel{

    @Inject
    private String ctaText;

    public String getCtaText() {
        return ctaText;
    }
}

2- Create a Sling Model for Card component:

@Model(adaptables = Resource.class)
public class CardComponentModel {

    @Self
    private SlingHttpServletRequest request;

    @ScriptVariable
    private Page currentPage;

    public PageModel getPageModel() {
        return currentPage.adaptTo(PageModel.class);
    }
}

3- And by this you can use the page model in your card component HTL : This allows you to use the authored CTA text in your Card component.

<sly data-sly-use.model="com.project.aem.components.CardComponentModel">
    <div>${model.pageModel.ctaText}</div>
</sly>

Follow the same in squence to your requirement you will be able to achieve it..

DPrakashRaj

Community Advisor

You can’t directly pass a value from one component to another unless otherwise you are storing the value on page properties instead of components or uses cookie or local storage (not recommended)

P

prachiatAuthor

Level 2

i am storing as page property those authored value then how i can achieve

in other component

DPrakashRaj

Community Advisor

In other components html you can use pageproperties.fieldName to get the value authored on page. Something similar to ${pageProperties.jcr:title}

Rohan_Garg

Community Advisor

@prachiat - Page Properties as suggested by @dprakashraj is one way.
But make sure the property is relevant to the page - as coupling a component property to page property is not an ideal design use case.

You can also look at the Shared Component Properties if there is a coupling between 2 components for the data.

Shared Component Properties - ACS Commons

Blog for Reference - AEM Shared Content and Component Properties

Also, you can try out the blog AEM Sharing data between components wherein the parent component sets the data.
In order to access this data you need to very specifically ask for a specific CRX node of a specific resource type with a specific name.

Hope this helps!

Rohan Garg

tushaar_srivastavaAccepted solution

Level 6

Hi @prachiat

solution:

Here are some sample snippet you can follow to achieve this.

1- Create Sling Model for your page

@Model(adaptables = Page.class)
public class PageModel{

    @Inject
    private String ctaText;

    public String getCtaText() {
        return ctaText;
    }
}

2- Create a Sling Model for Card component:

@Model(adaptables = Resource.class)
public class CardComponentModel {

    @Self
    private SlingHttpServletRequest request;

    @ScriptVariable
    private Page currentPage;

    public PageModel getPageModel() {
        return currentPage.adaptTo(PageModel.class);
    }
}

3- And by this you can use the page model in your card component HTL : This allows you to use the authored CTA text in your Card component.

<sly data-sly-use.model="com.project.aem.components.CardComponentModel">
    <div>${model.pageModel.ctaText}</div>
</sly>

Follow the same in squence to your requirement you will be able to achieve it..

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded