How to call the result template in a custom component that is part of the template structure? | Community
Skip to main content
A
anasustic
Level 6
February 15, 2024

How to call the result template in a custom component that is part of the template structure?

  • February 15, 2024
  • 4 replies
  • 1396 views

NotificationBar is a custom component that is fixed configured in template structure:

 

 

<root
        jcr:primaryType="nt:unstructured"
        sling:resourceType="aaa/components/structure/container">
    <notification
            jcr:primaryType="nt:unstructured"
            sling:resourceType="aaa/bbb/components/structure/notificationBar">
    </notification>
    <header
            jcr:primaryType="nt:unstructured"
            sling:resourceType="aaa/frankly/components/structure/header">
    </header>

 When the page loads I do an axios call in the notificationBar.ts to load the result.html. 

 

 

Problem is that I can only access the result.html in the same component using http://localhost:4502/conf/something/settings/wcm/templates/home/structure/_jcr_content/root/notification.result.de.html.

@Model(adaptables = SlingHttpServletRequest.class,
        resourceType = Constants.ResourceTypes.NOTIFICATION_BAR,
        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class NotificationBarResultModel extends AbstractComponentModel {

 

 

The goal is to access it through /content/something and not through /conf/something

 

How can I do that?

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

4 replies

Imran Khan
Community Advisor
Imran KhanCommunity Advisor
Community Advisor
February 15, 2024

@anasustic Please check below post to fetch content from template using sling model. provide service user /conf/project access to access the resource. This needs to be done with the help of resource API as position is fixed:

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-read-dynamic-template-structure-content-in-sling-model-of/m-p/625193

 

    A
    anasusticAuthor
    Level 6
    February 15, 2024

    Hi @imran__khan 

    Thanks but I do not think this answers my question. I corrctly load the notificationBar.html and its Model. In front end using the notificationBar.ts I do an axios call to load the result.html in the same component. This second call should not use /conf/${project-name}/settings/wcm/templates/${template-name}/structure but instead /content/....

      EstebanBustamante
      Community Advisor and Adobe Champion
      EstebanBustamanteCommunity Advisor and Adobe Champion
      Community Advisor and Adobe Champion
      February 15, 2024

      Hi,

       

      I don't understand what you are trying to do, but in general terms, you can invoke a model that matches the ResourceType, Selectors, and extension declared in its signature. In other words, you can invoke the Sling Model only from the component it is registered for.

      In your case, it seems the issue is that the component is not included (copied) from the template to the page itself (which is under content). Therefore, you cannot invoke the model in any other way. I think the easiest way to accommodate this would be to ensure that the component node is part of each page, something like this

      You can refer to the wknd project to see how the above components were included: https://github.com/adobe/aem-guides-wknd/blob/main/ui.content/src/main/content/jcr_root/conf/wknd/settings/wcm/templates/article-page-template/structure/.content.xml OR you can read the official documentation for this: https://experienceleague.adobe.com/docs/experience-manager-65/content/implementing/developing/platform/templates/page-templates-editable.html?lang=en#structure 

       

      Once you have the component under "/content" then you could infer the path to be invoked by your js

       

      Hope this helps

      Esteban Bustamante
        A
        anasusticAuthor
        Level 6
        February 15, 2024

        Hi @estebanbustamante 

        Thanks a lot for answering.

         

        The component notificationBar has its own template notificationBar.html and its own frontend TypeScript. It is not configured through its dialog. It renders that based on some business logic.

        When a page with a template that contains notificationBar in its structure loads, it will use the notificationBar.html that only loads the TypeScript which based on some business logic does an axios call that should load the result.html and its model. 

        The problem is that the only way to access the result.html is through /conf/${project-name}/settings/wcm/templates/${template-name}/structur and that is not desired since the dispatcher does not allow it. The dispatcher allows only what under /content/ is. I hope I explained better my use case.

          Raja_Reddy
          Community Advisor
          Raja_ReddyCommunity Advisor
          Community Advisor
          February 15, 2024

          Hi @anasustic 

          1. Move the Result Template: Move the result.html file from the /conf/something path to the /apps/something path. This can be done by copying the file to the appropriate location in the /apps folder of your AEM project.

          2. Update the Resource Type: In the NotificationBar component's sling:resourceType property, update the resource type to reflect the new location of the component. For example, if the component is now located at aaa/components/structure/notificationBar, update the sling:resourceType property to aaa/components/structure/notificationBar.

          3. Update the Model Class: In the NotificationBarResultModel class, update the resourceType property in the @Model annotation to reflect the new resource type of the component. For example, if the component's resource type is aaa/components/structure/notificationBar, update the resourceType property to aaa/components/structure/notificationBar.

          4. Adjust the Axios Call: In the notificationBar.ts file, update the Axios call to load the result.html file from the new location. Update the URL in the Axios call to point to the correct path of the result.html file in the /apps folder. For example, if the result.html file is located at /apps/something/notificationBar/result.html, update the Axios call to load from that path.

          By following these steps, you should be able to access the result.html file in the NotificationBar component through /content/something instead of /conf/something. 

           
            kautuk_sahni
            Community Manager
            kautuk_sahniCommunity Manager
            Community Manager
            February 16, 2024

            @anasustic 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.

            Kautuk Sahni
            A
            anasusticAuthor
            Level 6
            February 16, 2024

            Thanks for getting back to me. I was able to solve the case with a Servlet.

              Terms & ConditionsAccessibility statement

              Loading footer...