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.
Solved! Go to Solution.
Topics help categorize Community content and increase your ability to discover relevant content.
Views
Replies
Total Likes
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...
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
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.
Any suggestion would be appreciated.
Thanks.
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
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."/>
@Mahedi_Sabuj As mentioned by @prithwi, he don't want to overlay anything from core components.
Actually OOTB component is already used in many pages. So, I have to implement this feature in already used component as well.
Thanks.
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...
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));
Views
Likes
Replies
Views
Likes
Replies