Custom xfpage component/template for Experience fragment

Experience fragment(XF) is a page in AEM, like we have our project site pages of the type cq:Page. 
Given that it is a page, it is backed by a template and hence a page component. 

Site specific XF Page component(inheriting from OOB xfpage component) -> Template Type -> Editable Template -> XF page -> Use in site pages via OOB "Experience fragment" component(from the componentGroup - General)

When we develop a new site, we do create page component with supertype as OOB page component(wcm/foundation/components/page) or core v1/v2 page component(core/wcm/components/page)
Likewise, for XF specific to our site, we are creating one inheriting from OOB XF page component. 

OOB XF page component : /libs/cq/experience-fragments/components/xfpage.

Site specific XF page component:
  • Create a component with super type being /libs/cq/experience-fragments/components/xfpage.
  • We need to override two files customheaderlibs.html and customfooterlibs.html as we need to use our project clientlibs. (We can use the same that we already have in page component used for site pages)
  • Other than this, if it calls for any other customizations, we can override the respective files accordingly.

Site specific XF page template:
Creating template type, editable template, defining policies are detailed in separate posts. It is the same thing as we do for our site pages. Below highlights the slight change specific to XF.
  • While creating template type for XF page component, initial/jcr:content and structure/jcr:content will point to xf page component that we created above specific to site.
  • Additionally, add a property named "cq:xfVariantType" of type "String" with value "web" on initial/jcr:content node.
  • This property will then be available in all XF pages that we create out of this.  It indicates our XF page variation to be of type web variation.
  • Reason for adding the same is explained little later as we proceed below.

XF creation :
  • Navigate to General -> Experience Fragments -> create project specific folder.
  • In order to use the newly created editable template for XF creation, allow this template in XF folder. (Allow at root project specific folder. 
    • Eg. /content/experience-fragments/learnings-xf-pages)
  • We can create meaningful folders under main project folder with respect to the project content structure. 
    • I have created two more folders named "language-masters" and "en"
  • Being on the desired folder("en" in this case), Click Create -> Experience fragment -> Newly created XF editable template should be available. 
  • Select and then create. (In this case, Title given for XF : XF Header)
  • As we create XF page, the page that we land in is considered as a "master" variation as evident from the URL - /content/experience-fragments/learnings-xf-pages/language-masters/en/xf-header/master.html. 



With this, we are done with XF creation using project specific xfpage component/template. We are good to author site specific components as desired to be part of XF(site specific components would have already been allowed while defining policies, as part of editable template creation.)

Usage in page. 
  • We have component titled "Experience Fragment" from componentGroup "General". We can make use of the same or we do have one from core components(core/wcm/components/experiencefragment) -> Can create proxy component out of it and use it in site pages. 
  • Component has the option to let us provide XF page variation.
Need for cq:xfVariantType property inclusion:
  • Experience Fragment component from "General" group(/libs/cq/experience-fragments/editor/components/experiencefragment) has a dialog field named "Variation" which looks like a pathfield whose resource is /libs/cq/experience-fragments/editor/components/xffield (supertype as Coral UI 3 pathfield)
  • If we observe this dialog field, it has a property named "variant" with value as "web"
  • As we select the pathfield, it has to display all the XFs available under the root "/content/experience-fragments" along with its variation. Per the above property, pathfield will list all the XFs variation which has the variant type to be "web"
  • In the example we considered,  master will be displayed only if we have cq:xfVariantType(web variant property), Else, it will display paths till "/xf-header"
      • /content/experience-fragments/learnings-xf-pages/language-masters/en/experience-fragment-content-components/master.html. 

 (Property that we added in template type will be available in master variation)

 XF variation availability in pathfield picker.

 Use case:
  • Most common is for Header and Footer of the site (Site logo component + Navigation and related components can be part of XF)
Other related screenshots for reference:
 We can cross check by removing this property at XF variant level and observe the behavior in pathfield picker. 

 cq:xfVariantType property is removed from master variation. 

 master variation is not available in pathfield picker.


Comments

Post a Comment

Popular posts from this blog

Embedding Third party dependency/OSGi bundle in AEM application hosted in AEMasCS

Image
This post illustrate the ways of embedding third party dependency in AEM maven project. Steps are mentioned considering the project structure to be followed for AEMasCS while the same can be followed for classic versions too.  Before we begin, I would like to explain the scenario of including a dependency in our AEM maven project.  When we would like to make use of an API that is not already available in our project, we look for that in maven-central repository and specify the dependency in main pom.xml and desired module's pom.xml file. (Lets say, AWS S3 Java SDK V2 dependency) Upon updating the project in the IDE, we would see our class files (making use of those APIs) are compiled/build successfully without any errors.  Now, in the context of AEM/OSGi environment, when the same package and hence the bundle is deployed to AEM instance, dependencies that we added new might not be resolved/available in the OSGi as a bundle. Something like the below This indicates that the added dep
Read more

OSGI Factory Configuration implementation

OSGI Factory configuration is used to have many instances of an OSGI config (represented/identified via an identifier) for the single OSGI service/PID. Most often used OOB Factory configurations for example: Logger Factory/writer configuration (for log statements) Service user Mapper service Amendment (for using service resource resolver in projects) Few sample real time use case for the need of OSGI factory config: For multi tenant projects, if we have generic service used across tenants with properties/attributes specific to tenant. For single tenant, generic service targeting all locales with properties/attributes specific to locale. (where generic service -> holds logic in the lines of calling third party service for retrieving/updating information.) Implementation: ( In terms of OSGI R6 annotations ): Create Object Class Definition(OCD) defining desired properties for the OSGI service. - OSGIFactoryConfigOCD.java OSGI Service/Factory service to retrieve
Read more

Creation of Template Types for Editable templates

Image
In this post, we will create templates types which is the base for creating editable templates. Before getting to the subject directly, have added an introduction about templates in general. Template is the base for creating pages. Starting AEM 6.2, we have categorisation for templates - Static and Editable templates. Static templates :  This has been available for several versions of AEM/CQ Created using "Create Template" option with base page component as resourceType (which is responsible for rendering the page structure).  Template ( base page component as resourceType ) -> Page This cannot be edited as such. Since it just holds a reference to base page component, any changes to the page (other than authorable components), would need a change in base page component which is ultimately a work of developer. (calls for a code change) Allowed components are configured using Design mode (list being saved to etc/designs/projectfolder/templatename/jcr:content)
Read more