Suraj Kamdi, Author at Perficient Blogs

Enabling Dynamic Media Feature For AEM Custom Components

Suraj Kamdi — Tue, 28 May 2024 11:50:17 +0000

Dynamic Media is one of the versatile tools provided by Adobe. Previously, it was known as Scene7. It has strong Asset editing and authoring tools capabilities. It is based on a Cache delivery network, which loads the contents to improve page load time and renders the right image renditions correctly resized and optimized. Dynamic Media allows requesting devices to request exactly what type of rendition, version, and exact image size is needed by that device at the moment of request.

Have you wondered about the benefits of integrating the Dynamic Media feature in custom components? In this blog, I will demonstrate how to integrate Dynamic Media with custom components and the benefits it provides by doing so.

When we integrate dynamic media with AEM, it enables various Dynamic Media functionalities like image/video profiles, DM metadata, DM workflows, and some set of out-of-the-box Dynamic Media Components. Also, some core components like Image provide Dynamic Media functionality.

If you have not integrated Dynamic Media with AEM, please go through the documentation provided by Adobe on how to Configure the Dynamic Media for AEM.

Loading Dynamic Media Library

First, we need to load dynamic media clientlibs on every page to render Dynamic Media Assets through AEM Components.

Paste the following code into the head section page component i.e. customheaderlibs.html

Custom Sling Model Implementation

Then create one custom sling model common utility for reading Dynamic Media assets metadata properties which is required to load any AEM assets through dynamic media functionality.

Sling model Implementation

public interface DynamicMedia extends BaseModel { 

String getCurrentPagePath(); 

String getPageLocale(); 

String getAssetName(); 

String getAssetPath(); 

String getDynamicMediaViewerPath(); 

String getDynamicMediaImageServerPath(); 

boolean isWcmModeDisabled(); 

@Slf4j 

@Model( 

adaptables = SlingHttpServletRequest.class, 

adapters = DynamicMedia.class, 

defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL 

) 

public class DynamicMediaImpl implements DynamicMedia { 

private static final String DM_IMAGE_SERVER_PATH = "is/image/";  

private static final String DM_VIEWERS_SERVER_PATH = "s7viewers/"; 

@SlingObject 

private SlingHttpServletRequest request; 

@ScriptVariable 

private Page currentPage; 

@RequestAttribute 

private String imageReference; 

@Getter 

private String assetName; 

@Getter 

private String assetPath; 

@Getter 

private String dynamicMediaViewerPath; 

@Getter 

private String dynamicMediaImageServerPath; 

@PostConstruct 

protected void init() { 

if (StringUtils.isNotEmpty(imageReference)) { 

final Resource assetResource = request.getResourceResolver() 

.getResource(imageReference); 

if (assetResource != null) { 

final Asset asset = assetResource.adaptTo(Asset.class); 

if (asset != null) { 

this.id = getId() + "-" + asset.getID(); 

assetName = asset.getName(); 

assetPath = asset.getMetadataValue(Scene7Constants.PN_S7_FILE); 

final String dynamicMediaServer = asset.getMetadataValue( 

Scene7Constants.PN_S7_DOMAIN); 

dynamicMediaImageServerPath = dynamicMediaServer + DM_IMAGE_SERVER_PATH; 

dynamicMediaViewerPath = dynamicMediaServer + DM_VIEWERS_SERVER_PATH; 

} 

} 

} 

} 

@Override 

public String getCurrentPagePath() { 

return currentPage.getPath(); 

} 

@Override 

public String getPageLocale() { 

return LocaleUtils.generateLocaleFromPath(getCurrentPagePath()); 

} 

@Override 

public boolean isWcmModeDisabled() { 

return (WCMMode.fromRequest(request) == WCMMode.DISABLED); 

} 

}

Once we are done with the Sling model implementation part then create one HTL template inside directory /apps/Driectory>/components/atoms/dynamicmedia/image.html  to provide reusability within the component whenever we want to load any image using dynamic media for a specific component. Paste the following code in the image.html file.

Now refer to this HTL template file anywhere in the component HTML where we want to load any authored Image through dynamic media CDN.

Make sure to pass a value for imageReference property which is mandatory. We can also pass the values with other objects named aspectRatio, altText as per the need or extend the functionality as per the requirement.

See the image above for the final output. Look at the URL of the image rendered by the custom component. It is delivered from Dynamic Media provided CDN. That is the benefit you achieve with this. This way the images will be served much faster to the user based on the region they are in.

If you have any questions or comments, drop them in the chat below!

AEM Customization: How to Add a Custom Action Button to the AEM Assets Action Bar Menu

Suraj Kamdi — Fri, 06 Oct 2023 05:01:53 +0000

Recently, a client approached us with a requirement to update content fragment elements data, Assets metadata, and Folder metadata via an Azure-based API. Our initial solution was to implement a JMX script, which could be started by an admin user group with valid parameters. However, this was a rather limiting solution, as normal AEM authors did not have the necessary permissions to perform these operations.

To solve this problem, the client requested us to provide a custom action button in the AEM Assets Menu. This button would enable AEM authors who have permission to modify the AEM Asset metadata to update the AEM assets by triggering the action button for the selected AEM assets. This custom implementation proved to be very helpful to the client, as they could easily access the AEM Assets Menu and trigger the custom action button.

AEM Asset – Preview Custom Action Button

This blog post will discuss how we implemented this custom action button.

Overlay the Node

Go to AEM’s CRXDE.

Jump on /libs/dam/gui/content/assets/jcr:content/actions/selection Path

Right-click on the Selection node and select the Overlay Node option from the pop-up menu.
AEM – Overlay Node Pop-Up Menu

AEM – Overlay Node setup

Make sure the Overlay location is under /apps/ folder, and the Match Node Types option should be checked.

This will look as follows.
AEM- Overlay Path location in CRDEX

Add Custom Action Bar Node

To add a custom action button in the Action menu, we need to create one action bar child node below Selection Now. Let’s do that!

Create a node named custom-action-btn (you can put any name here) and set the following properties on a node.
AEM CRXDE – Custom Action Button Node

XML Format

You can also set granite:rendercondition if you want to handle specific scenarios in order to display this custom action button (example Provided in the above code to display this action button to the AEM user who has modify_property permission)

we are done with the overlay part. The next step is to write a custom action using Ajax call, or else you can also use custom wizards to perform any operation using this action button. But here, I will be handling custom actions using Ajax calls.

To show the action button for specific conditions, let’s consider action button should only display when the AEM author selects the Content Fragment; in that case, we need to write a custom JS code to enable and disable the visibility for the action button.

Create a JS file inside the client library folder by specifying clientlib categories as dam.gui.actions.coral

Asset-editor-action-btn-visibility.js
(function(document, $) { "use strict"; //initially hide the refresh asset button $(document).trigger("foundation-contentloaded"); $(".suraj-custom-action-btn").addClass("foundation-collection-action-hidden"); // hide/show refresh asset btn when author select CF asset. $(document).on("foundation-selections-change", ".foundation-collection", function(e) { let view = $("body").data("shell-collectionpage-view-layoutid"); if (view === "list" || view === "column") { let selectedItem = $(this).find(".foundation-collection-item.foundation-selections-item"); let itemType = $(selectedItem).data("editorkey"); if (itemType?.trim() === "contentfragment") { var contentFragmentPath = $(selectedItem).data("foundation-collection-item-id"); if(contentFragmentPath.includes("/sample-cf/")){ $(".suraj-custom-action-btn").removeClass("foundation-collection-action-hidden"); } } } else if (view === "card") { let selectedItem = $(this).find(".foundation-collection-item.foundation-selections-item"); let itemType = $(selectedItem).find("[data-editorkey]").data("editorkey"); if (itemType?.trim() === "contentfragment") { var contentFragmentPath = $(selectedItem).data("foundation-collection-item-id"); if(contentFragmentPath.includes("/projects/")){ $(".suraj-custom-action-btn").removeClass("foundation-collection-action-hidden"); } } } }); })(document, Granite.$);

Now create another JS file to handle the custom action when the Author triggers the custom action button.

Trigger-custom-action-btn.js
(function(document, $) { "use strict"; // On click of Refresh Asset button update the selected CF $(document).on("click", ".foundation-collection-action.suraj-custom-action-btn", function(e) { let selectedElements = $(".foundation-collection-item.foundation-selections-item.is-selected"); var items = []; $(selectedElements).each(function(e) { let data = $(this).data("foundation-collection-item-id"); items.push(data); }); let message = "
Updating data for following Selected CF
" + items.toString().replaceAll(",", "
"); //Show wait ticker untill response is received from ajax call. const $UI = $(window).adaptTo("foundation-ui"); var $waitTicker = $UI.waitTicker("Updating Asset", message); // Ajax to update selected CF. $.ajax({ type: 'POST', url: '', data: JSON.stringify(items), contentType: "application/json", dataType: "json", success: function(response) { if (response.status === 200) { // do some additional stuff with response as per requirement. $UI.alert("Success", response.message, "success"); $waitTicker.clear(); } else { $UI.alert("Error", "Failed to update selected Content Fragments", "error"); $waitTicker.clear(); } }, error: function() { $UI.alert("Error", "Failed to update selected Content Fragments", "error"); $waitTicker.clear(); } }); }); })(document, Granite.$);

Include both the JS files in the js.txt file of your client library folder.

We are done with the implementation part. Now go to the Asset folder and select any Content Fragment. The action button named Refresh Asset Data item appears in the top action bar asset Menu Navigation. Click the Refresh Asset data button to see the following pop-up window for trigger action!

AEM – Final Output of Custom Action Button

Checkout my Adobe AEM-related perficient blogs here…

Beyond Embed Component: Integrate Web Code Editor

Suraj Kamdi — Mon, 09 Aug 2021 17:02:14 +0000

After the introduction of AEM Core Components, custom component development has been drastically changed. In some use cases, there is zero customization and core components can be directly used for authoring. Even in those situations, the custom component is needed. It can be quickly built by extending the existing core components. Thus, the development cost and time to production are reduced.

Embed Component

In this era of social networking, we have faced the use case of embedding media or HTML from other social media sites. For these instances, OOTB AEM Core – Embed Component comes in handy.

Embed Component helps authors to embed three types of external content within a page:

URL-based – This feature supports the URL-based resource which is as per oEmbed Standards. This is used for use cases like embedding Facebook, Twitter, Instagram, etc.

HTML – This feature allows the author to directly add HTML content to the AEM page.

Embeddable – This feature allows customization of embedded resources like YouTube. Whereas, it provides flexibility for the author to provide additional information and parameters to embed the resource to the page. This functionality uses a backend pre-processor.

All the above-mentioned options can be configured using component design dialog for enabling or disabling the feature.

Security

Embedding content dynamically can lead to security vulnerability. AEM uses XSS Protection using the Anti Samy. For more information on XSS Protection, do AEM documentation on Security.

That said, what if embedded content needs custom dynamic behavior using JS or style changes using CSS? If XSS Protection config.xml file does not have