How to customize OOTB Experience Fragment component

[prithwi]

Hi,

I got a requirement to modify OOTB Experience Fragment component (not core component) to open it's picker on custom path. It means, by default this component opens picker box with /content/experience-fragments path, however I want to open this picker from /content/experience-fragments/brands path, so content author can select XF from this location only.

Basically, I'm looking for a way to initialize this root parameter with custom path but I'm not able to figure out which library to extends or overlay. 

Thanks.

[Imran__Khan]

@prithwi 

The root path is defined under below file 

/libs/cq/experience-fragments/editor/components/xffield/xffield.js --> Line 23

xffield folder is in blur color which means it is not allow to overlay this file

After making manual change in libs file 

[prithwi]

Thanks @Imran__Khan for looking into this. As you said this libs path is protected so we can't overlay it. Is there a way to hook granite foundation registry to achieve this? I was looking into below documentation but not sure if this can be used to achieve my requirement.

https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/...

Any suggestion would be appreciated. 

Thanks.

[Imran__Khan]

I don't know it will help as you don't want to overlay core component. But, overlay dialog is the only way and the recommended process and add rootPath property to /content or whichever path we wish.
Note: I looked into the OOTB library and it is not going to work to update path and it will create various issues while performing operations like copy, move, etc. Expeience fragment is tightly coupled to /content/experience-fragments folder.

/libs/core/wcm/components/experiencefragment/v2/experiencefragment 
Node: /libs/core/wcm/components/experiencefragment/v2/experiencefragment/cq:dialog/content/items/tabs/items/properties/items/columns/items/column/items/fragmentVariationPath

[Mahedi_Sabuj]

You need to overlay the experiencefragment _cq_dialog in your project and include the rootPath="/content/experience-fragments/brands" property within the fragmentVariationPath node.

<fragmentVariationPath jcr:primaryType="nt:unstructured"
  sling:resourceType="cq/experience-fragments/editor/components/xffield"
  granite:id="xfPicker"
  name="./fragmentVariationPath"
  fieldLabel="Variation"
  filter="folderOrVariant"
  propertyFilter="cq:xfShowInEditor"
  variant="web"
  rootPath="/content/experience-fragments/brands"
  fieldDescription="Choose the experience fragment variation to display."/>

[Imran__Khan]

@Mahedi_Sabuj As mentioned by @prithwi, he don't want to overlay anything from core components. 

[prithwi]

Actually OOTB component is already used in many pages. So, I have to implement this feature in already used component as well. 

Thanks.

[arunpatidar · Accepted solution]

Hi @prithwi 
One way is to write a clientlibs with category cq.dialog.authoring and based on your path(site), you can update the rootPath using javascript. 

Example of dialog ready event : https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/foundation-contentloaded-a... 

[prithwi]

Thanks @arunpatidar. I have tried it and found working. Pasting full code that worked for me. 

(function ($, $document) {
    "use strict";
  
    $document.on("dialog-ready", function (e) {
      let expFragmentField = $("#xfPicker");
      if (expFragmentField && expFragmentField.length > 0) {
        const parameters = {};
        let src=$(expFragmentField).attr("pickersrc");
        // console.log("xf-picker src >>>>> " + src);

        let urlArr = src.split("?");
        let queryParams = urlArr[1].split("&");
  
        queryParams.forEach((p) => {
          let tokens = p.split("=");
          if (tokens && tokens.length > 1) {
            if (tokens[0] === "root") {
              parameters[tokens[0]] = tokens[1] + "brands";
            } else {
              parameters[tokens[0]] = tokens[1];
            }
          }
        });
        // console.log(parameters);
  
        let pickerSrcUrl = urlArr[0] + "?";
        Object.keys(parameters).forEach((key) => {
          pickerSrcUrl += key + "=" + parameters[key] + "&";
        });
  
        // console.log(pickerSrcUrl);
        $(expFragmentField).attr("pickersrc", pickerSrcUrl);
      }
    });
  })(jQuery, jQuery(document));