Displaying custom button for a web variation of an experience fragment

[pnagy]

Hi,

I have a button for experience fragments defined in ../experience-fragments/.content.xml as

<universaleditor
granite:class="xf-edit-master-variation"
granite:rel="cq-siteadmin-admin-actions-edit-activator"
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&amp;_charset_=utf-8&amp;path={item}"/>
</universaleditor>

The button is displayed when I select
- an experience fragment or
- a variation of the experience fragment (e.g. myfragment/master).

My goal is to pass a variation name in the item path every time when the button is clicked (this is not happening when it's not the variation selected - of course).
How can I
- display the button only if the experience fragment variation is selected or
- pass some default web variation name in the path when the experience fragment itself is selected?

Thanks,
Peter

[Raja_Reddy]

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&amp;_charset_=utf-8&amp;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&amp;_charset_=utf-8&amp;path={item}&amp;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.

[pnagy]

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

[Madhur-Madan · Accepted 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);

[pnagy]

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

[kautuk_sahni]

@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.

[pnagy]

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