Extend Experience fragments of core using delegation pattern | Community
Skip to main content
Level 3
December 19, 2023
Solved

Extend Experience fragments of core using delegation pattern

  • December 19, 2023
  • 2 replies
  • 2459 views

Hello Members,

 

We are trying to extend Core Experience fragment to meet our client needs where each page can have its own header and footer.

The approach we are trying now is to unlock the experience fragment in the structure so that the author can configure per page which works fine.

 

However, on top of this we need same Experience fragment header to be set for all the child pages below . I am using Delegate pattern for the same and unfortunately this seems to not work .

 

Note: We are using aem-react-editable-components so the mapping happens in import-component.js and not the usual way with html. 

 

 

Below is my Implementation

 

@Model(adaptables = { Resource.class, SlingHttpServletRequest.class }, adapters = { ExperienceFragment.class }, resourceType = CustomExperienceFragmentImpl.RESOURCE_TYPE, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL) @Exporter(name = ExporterConstants.SLING_MODEL_EXPORTER_NAME, extensions = ExporterConstants.SLING_MODEL_EXTENSION) @Getter public class CustomExperienceFragmentImpl implements ExperienceFragment { protected static final String RESOURCE_TYPE = "myproject/components/core/experiencefragment"; @Self @Getter(AccessLevel.NONE) private SlingHttpServletRequest request; private String fragmentVariationPath; @PostConstruct void init() { InheritanceValueMap properties = new HierarchyNodeInheritanceValueMap(request.getResource()); fragmentVariationPath = properties.getInherited(ExperienceFragment.PN_FRAGMENT_VARIATION_PATH, String.class); } @Self // Indicates that we are resolving the current resource @Getter(AccessLevel.NONE) @Via(type = ResourceSuperType.class) // Resolve not as this model, but as the model of our supertype (ie: CC Image) @Delegate(excludes = DelegationExclusion.class) // Delegate all our methods to the CC Image except those defined below private ExperienceFragment delegate; @Override public String getLocalizedFragmentVariationPath() { return fragmentVariationPath!=null ? fragmentVariationPath : delegate.getLocalizedFragmentVariationPath(); } private interface DelegationExclusion { String getLocalizedFragmentVariationPath(); // Override the method which determines the source of the asset } }

 

Kindly share your views

 

Thanks

Arun

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 Jeevan-Eranti

Hi @user70744 

 

Please refer to the article below for instructions on configuring dynamic headers and footers. Additionally, explore extending the Experience Fragment model to support localized headers/footers with a custom site structure using the delegation pattern.

https://www.albinsblog.com/2021/10/extend-aem-experience-fragment-localization.html

 

2 replies

Jeevan-ErantiAccepted solution
Level 2
December 19, 2023

Hi @user70744 

 

Please refer to the article below for instructions on configuring dynamic headers and footers. Additionally, explore extending the Experience Fragment model to support localized headers/footers with a custom site structure using the delegation pattern.

https://www.albinsblog.com/2021/10/extend-aem-experience-fragment-localization.html

 

user70744Author
Level 3
December 19, 2023

hi @jeevan-eranti yes this is the same approach i have implemented unfortunately the delegation does not seem to work for me.

 

The same code is attached as well

 

Thanks

Arun

Level 2
December 19, 2023

@jeevan-eranti  thank you for clear explanation it works for my side

 


@user70744 

You need to define the static fragmentVariationPath in the editable template's structure. There is an option to override the fragment variation (for the header and footer) at the page properties level.

if (fragmentVariationPath.contains(XF_HEADER_VARIATION)) { InheritanceValueMap ivm = new HierarchyNodeInheritanceValueMap(currentPage.getContentResource()); String headerOverrideXF = ivm.getInherited("headerFragmentPath", String.class); if (StringUtils.isNotEmpty(headerOverrideXF) && resourceExists(headerOverrideXF) && isValidExperienceFragmentVariation(headerOverrideXF)) { LOGGER.debug("Handling the header variation. XF Variation Path - {} ", headerOverrideXF); return headerOverrideXF; } } // If the specified XF path is not found or is invalid, fallback to the template's default variation return Objects.nonNull(delegate) ? delegate.getLocalizedFragmentVariationPath() : StringUtils.EMPTY;

 

In the above code, the if condition checks whether the fragmentVariationPath configured in the current page contains the header variation (XF_HEADER_VARIATION). If so, it attempts to retrieve an overridden header XF path from the page properties. If a valid and existing XF path is found, it is returned; otherwise, the code falls back to the default XF path specified in the editable template's structure using the delegate.getLocalizedFragmentVariationPath().

arunpatidar
Community Advisor
Community Advisor
December 19, 2023
user70744Author
Level 3
December 19, 2023

Thanks @arunpatidar but this post uses slightly. however i would need to do in Model so that its available in model.json and react would pick the path