Hi,
I have a button for experience fragments defined in ../experience-fragments/.content.xml as
Solved! Go to Solution.
Hi @pnagy
If you want the button to appear only when you choose a specific version of the experience fragment or show a default version when you select the experience fragment itself, you can use a set of tools called Granite UI's JavaScript API. This set of tools helps you manage how things behave on the webpage. Specifically, you can use a part of these tools called actionContext from Coral UI foundation collection. This helps you look at what you've selected and decide whether to show or hide the button based on your choices.
(function ($, window, undefined) {
"use strict";
$(document).on("foundation-contentloaded", function (e) {
var selectedItems = $(".cq-siteadmin-admin-actions-edit-activator.foundation-collection-item.foundation-selections-item");
// Ensure only one item is selected
if (selectedItems.length === 1) {
var selectedItem = $(selectedItems[0]);
var variationName = extractVariationName(selectedItem);
// Check if the selected item is a variation
if (variationName) {
// Display the button and set the variation name in the path
showButtonAndSetVariationName(variationName);
} else {
// If the selected item is the experience fragment itself, set a default variation name
showButtonAndSetVariationName("defaultVariation");
}
} else {
// Hide the button when multiple items are selected or none are selected
hideButton();
}
});
function extractVariationName(selectedItem) {
// Extract the variation name from the selected item (adjust based on your structure)
var variationName = selectedItem.data("foundation-collection-item-id");
return variationName ? variationName : null;
}
function showButtonAndSetVariationName(variationName) {
$(".xf-edit-master-variation").show();
// Set the variation name in the URL template
var buttonHref = "/bin/wcmcommand?cmd=ue&_charset_=utf-8&path={item}&variation=" + variationName;
$(".xf-edit-master-variation [href.uritemplate]").attr("href.uritemplate", buttonHref);
}
function hideButton() {
$(".xf-edit-master-variation").hide();
}
})(jQuery, this);
Hi @pnagy
To display the button only if the experience fragment variation is selected, you can add a condition to the granite:rel property.
<universaleditor
granite:class="xf-edit-master-variation"
granite:rel="cq-siteadmin-admin-actions-edit-activator;variation={variationName}"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/collection/action"
action="cq.wcm.open"
actionConfigName="granite/ui/shell/actions/edit"
activeSelectionCount="single"
relScope="item"
target="\0"
text="Universal Editor"
variant="actionBar">
<data
jcr:primaryType="nt:unstructured"
cookiePath.url="/"
href.uritemplate="/bin/wcmcommand?cmd=ue&_charset_=utf-8&path={item}"/>
</universaleditor>
The granite:rel property includes a variation parameter that will be set to the name of the selected variation. This will cause the button to only be displayed when a variation is selected.
To pass a default web variation name in the path when the experience fragment itself is selected, you can modify the href.uritemplate property to include a default value for the variation parameter.
<universaleditor
granite:class="xf-edit-master-variation"
granite:rel="cq-siteadmin-admin-actions-edit-activator;variation={variationName}"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/collection/action"
action="cq.wcm.open"
actionConfigName="granite/ui/shell/actions/edit"
activeSelectionCount="single"
relScope="item"
target="\0"
text="Universal Editor"
variant="actionBar">
<data
jcr:primaryType="nt:unstructured"
cookiePath.url="/"
href.uritemplate="/bin/wcmcommand?cmd=ue&_charset_=utf-8&path={item}&variation=default"/>
</universaleditor>
The href.uritemplate property includes a variation parameter with a default value of default. This will cause the default variation to be used when the experience fragment itself is selected.
Thanks.
Hi @Raja_Reddy ,
Thanks for the suggestion, I tried to implement this and changed the rel attribute but the button was showing up anywhere afterwards.
Regards,
Peter
Hi @pnagy
If you want the button to appear only when you choose a specific version of the experience fragment or show a default version when you select the experience fragment itself, you can use a set of tools called Granite UI's JavaScript API. This set of tools helps you manage how things behave on the webpage. Specifically, you can use a part of these tools called actionContext from Coral UI foundation collection. This helps you look at what you've selected and decide whether to show or hide the button based on your choices.
(function ($, window, undefined) {
"use strict";
$(document).on("foundation-contentloaded", function (e) {
var selectedItems = $(".cq-siteadmin-admin-actions-edit-activator.foundation-collection-item.foundation-selections-item");
// Ensure only one item is selected
if (selectedItems.length === 1) {
var selectedItem = $(selectedItems[0]);
var variationName = extractVariationName(selectedItem);
// Check if the selected item is a variation
if (variationName) {
// Display the button and set the variation name in the path
showButtonAndSetVariationName(variationName);
} else {
// If the selected item is the experience fragment itself, set a default variation name
showButtonAndSetVariationName("defaultVariation");
}
} else {
// Hide the button when multiple items are selected or none are selected
hideButton();
}
});
function extractVariationName(selectedItem) {
// Extract the variation name from the selected item (adjust based on your structure)
var variationName = selectedItem.data("foundation-collection-item-id");
return variationName ? variationName : null;
}
function showButtonAndSetVariationName(variationName) {
$(".xf-edit-master-variation").show();
// Set the variation name in the URL template
var buttonHref = "/bin/wcmcommand?cmd=ue&_charset_=utf-8&path={item}&variation=" + variationName;
$(".xf-edit-master-variation [href.uritemplate]").attr("href.uritemplate", buttonHref);
}
function hideButton() {
$(".xf-edit-master-variation").hide();
}
})(jQuery, this);
Hi @Madhur-Madan ,
thanks for the idea. Trying to implement it but I am really new to AEM development and could not yet find out (even after googling some) where to place this JS snippet and how to refer it so that it gets loaded on the client side.
Can you please suggest on this?
Regards,
Peter
@pnagy 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.
Views
Replies
Total Likes
Hi @kautuk_sahni ,
no luck yet with loading the suggested .js as stated above in my reply, posted a new question on that at
https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/load-client-libs-with-sele...
as well.
Regards,
Peter
Views
Replies
Total Likes
Views
Likes
Replies
Views
Likes
Replies
Views
Likes
Replies