How to render root path in React | Community
Skip to main content
S
stefanjank
New Participant
July 13, 2022
Solved

How to render root path in React

  • July 13, 2022
  • 1 reply
  • 636 views

How to render this via Java and show in react?

 

<linkURL
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
        fieldLabel="Link"
        nodeTypes="cq:Page"
        name="./linkURL"
        required="{Boolean}true"
        rootPath="/content/demoproject"/>
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 SantoshSai

Hi @stefanjank ,

  1. You can either directly render linkURL by AEM objects in HTL like
    ${properties.linkURL}
  2. or Implement Sling Model 
    Java
    import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.Model;

import javax.inject.Inject;

@Model(adaptables = Resource.class)
public class LinkURLModel {
    
    @Inject
    private String linkURL;
    
    public String getLinkURL() {
        return linkURL;
    }
}
    HTL
    <div data-sly-use.url="com.training.osgi.core.models.LinkURLModel">
Link URL: ${url.linkURL}
</div>
  3. For React Please Visit these links:
    1. https://experienceleague.adobe.com/docs/experience-manager-64/developing/headless/spas/spa-implementing-react-component.html
    2. https://www.dlighthouse.co/2020/02/creating-aem-component-using-reactjs.html

Hope that helps!

Regards,

Santosh

 

1 reply

SantoshSai
SantoshSaiAccepted solution
New Participant
July 13, 2022

Hi @stefanjank ,

  1. You can either directly render linkURL by AEM objects in HTL like
    ${properties.linkURL}
  2. or Implement Sling Model 
    Java
    import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.Model;

import javax.inject.Inject;

@Model(adaptables = Resource.class)
public class LinkURLModel {
    
    @Inject
    private String linkURL;
    
    public String getLinkURL() {
        return linkURL;
    }
}
    HTL
    <div data-sly-use.url="com.training.osgi.core.models.LinkURLModel">
Link URL: ${url.linkURL}
</div>
  3. For React Please Visit these links:
    1. https://experienceleague.adobe.com/docs/experience-manager-64/developing/headless/spas/spa-implementing-react-component.html
    2. https://www.dlighthouse.co/2020/02/creating-aem-component-using-reactjs.html

Hope that helps!

Regards,

Santosh

 

Santosh Sai
    Terms & ConditionsAccessibility statement

    Loading footer...