<p>Core Components are recommended as a best practice in AEM. They are intended to speed up development time and reduce maintenance costs. In this post I demonstrate how it's possible to customize and extend the Java Script client library associated with the Core Image component in order to retain the selected Dynamic Media Image Preset and improve the authoring experience.&nbsp;</p>
<h3>Dynamic Media Use Case</h3>
<p>Assume that our WKND tutorial project has recently been configured to enable Dynamic Media. Images contain the necessary Dynamic Media metadata properties and we've configured multiple Image Presets for use in the authoring instance.</p>
<p>A content author submits an enhancement request ticket to improve the authoring experience:</p>
<ol>
<li>Retain the selected Image Preset within the Metadata dialog tab when toggling between the Image Preset and Smart Crop options</li>
<li>Limit the list of Image Preset options to only those that begin with the prefix <code>'wknd-'</code></li>
<li>Select the <code>'wknd-preset-1'</code> option by default</li>
</ol>
<p>The OOTB authoring experience is reflected in the video below:&nbsp;&nbsp;</p>
<div style="position: relative; height: 360px;"><iframe style="width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; overflow: hidden;" title="Video of Default Image Component Authoring Experience" src="https://streamable.com/e/acdjm3" width="100%" height="100%" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
<h3>Solution Development</h3>
<p>To begin, we should review the client library provided by the <a title="AEM Core Image Component Documentation" href="https://experienceleague.adobe.com/docs/experience-manager-core-components/using/components/image.html?lang=en" target="_blank" rel="noopener">Core Image</a> component. Specifically, we want to look at the JavaScript library that is loaded in the editor when content authors are making changes:</p>
<p><code>- core/wcm/components/image/v2/image/clientlibs/editor/js/image.js&nbsp;</code> [<a title="AEM Core Image Component Client Library" href="https://github.com/adobe/aem-core-wcm-components/blob/main/content/src/content/jcr_root/apps/core/wcm/components/image/v2/image/clientlibs/editor/js/image.js#L152-L167" target="_blank" rel="noopener">View on Github</a>]</p>
<p>In order to achieve the three objectives described above we start by defining a client library for the Image Proxy component associated with the WKND site.&nbsp;</p>
<p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.ibb.co/MCXZp0c/core-image-editor-client-library.png" alt="Core Image Editor Client Library" width="100%" /></p>
<p>Next, we write the logic required to achieve the three objectives defined as our acceptance criteria.&nbsp;</p>
<pre class="language-javascript"><code>/**
 * 
 * Set Default and Limit Preset Items
 * @desc:Responsible for setting responsive as the default preset select option and removing items that do not contain wknd- prefix
 *
 */
 (function($) {
  "use strict";

  var dialogContentSelector = ".cmp-image__editor";
  var $dialogContent;
  var $dynamicMediaGroup;
  var presetTypeSelector = ".cmp-image__editor-dynamicmedia-presettype";
  var smartCropRenditionDropDownSelector = ".cmp-image__editor-dynamicmedia-smartcroprendition";
  var imagePresetDropDownSelector = ".cmp-image__editor-dynamicmedia-imagepreset";


  $(document).on("dialog-loaded", function(e) {

      var $dialog = e.dialog;
      $dialogContent = $dialog.find(dialogContentSelector);
      $dynamicMediaGroup = $dialogContent.find(".cmp-image__editor-dynamicmedia");

      var $imagePresetDropDownSelector = $(imagePresetDropDownSelector);
      var $imagePresetDropDownSelectorItems = $imagePresetDropDownSelector.find('coral-select-item');
      var currentDefaultEl = $imagePresetDropDownSelector.find('[selected]');
      var currentDefaultText = '';
      var isDefaultInValid = false;

      // if presetTypeSelector does not exist return early
      if ($(presetTypeSelector).length &lt; 1) {
          return;
      }

       if (currentDefaultEl.length &gt; 0 &amp;&amp; currentDefaultEl[0].innerText) {
          currentDefaultText = currentDefaultEl[0].innerText.toLowerCase();
      }

      if (currentDefaultText.indexOf('wknd-') &lt; 0) {
          isDefaultInValid = true;
      }

      for (var i = 0; i &lt; $imagePresetDropDownSelectorItems.length; i++) {

          //remove non wknd- prefixed and responsive items
          if ($imagePresetDropDownSelectorItems[i].innerText.toLowerCase().indexOf('wknd-') &lt; 0) {
              $imagePresetDropDownSelectorItems[i].remove();
          }

          //set wknd-preset-1 as default
          if (isDefaultInValid &amp;&amp; $imagePresetDropDownSelectorItems[i].innerText.toLowerCase() == 'wknd-preset-1') {
              $imagePresetDropDownSelectorItems[i].selected = true;

          }

      }

  });


  $(document).on("change", dialogContentSelector + " " + presetTypeSelector, function(e) {

      switch (e.target.value) {
          case "smartCrop":
              //stop propagation of event in order to prevent core image client lib from detecting this event. 
              //necessary to prevent resetting of imagePresetDropDownSelector
              e.stopPropagation();
              e.stopImmediatePropagation();
              $dynamicMediaGroup.find(imagePresetDropDownSelector).parent().hide();
              $dynamicMediaGroup.find(smartCropRenditionDropDownSelector).parent().show();
              break;
          default:
              break;
      }
  });

})(jQuery);</code></pre>
<p>&nbsp;</p>
<p>It's important to understand that the client library created for our proxy component will load first, and then the client library included with the Core Image component will load.&nbsp;</p>
<p>By leveraging the same selectors and event listeners as the OOTB JavaScript, we can make sure these two files play nicely together. By leveraging the stopPropogation and stopImmediatePropogation functions, it's possible to control which events reach the OOTB JavaScript and which do not.</p>
<p>The video below captures the result of our efforts. The selected Image Preset is maintained when authors toggle between options, the Image Preset list is limited to only those items that begin with the 'wknd-' prefix, and the preferred default option is selected for an improved authoring experience.</p>
<p>&nbsp;</p>
<div style="position: relative; height: 360px;"><iframe style="width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; overflow: hidden;" title="Video of Improved Image Component Authoring Experience" src="https://streamable.com/e/0h4l26" width="100%" height="100%" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

In this post I demonstrate how it's possible to customize and extend the Java Script client library associated with the Core Image component to retain the selected Dynamic Media Image Preset and improve the authoring experience.

Retain Selected Dynamic Media Image Preset within AEM Core Image Component Dialog

<p>In this post, I provide an overview of the UI.Frontend module in AEM, describe my thoughts on why frontend developers will love it, and step through how to get started by adding the UI.Frontend module to an existing AEM multi-module project.</p>
<h2>Overview</h2>
<p><img src="https://i.ibb.co/2thWCwX/AEM-UI-Frontend-Module.png" alt="AEM UI.Frontend Module" width="100%" /></p>
<p>The UI.Frontend module was released with <a title="AEM Archetype" href="https://github.com/adobe/aem-project-archetype/blob/master/VERSIONS.md" target="_blank" rel="noopener">AEM Archetype</a> <a title="AEM Archetype 20" href="https://github.com/adobe/aem-project-archetype/releases/tag/aem-project-archetype-20" target="_blank" rel="noopener">20</a>. Source code for all front-end assets now resides within the UI.Frontend directory.&nbsp; <span style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;">Within the UI.Frontend module,&nbsp; </span><a style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;" title="WebPack" href="https://webpack.js.org/" target="_blank" rel="noopener">WebPack</a><span style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;"> is used to bundle JavaScript and transform front-end assets before distributing the output into the appropriate AEM <em>client libraries</em> of your project.</span></p>
<h2>Benefits</h2>
<p>As it is with many aspects of web application development, front-end technologies tend to evolve and change quickly. Browser vendors, consortiums, and committees regularly work to introduce new features while industry and developer communities look for new ways to improve on existing techniques. These (and other) factors make it challenging to define a <em>one size fits all</em> front-end development process. This is where WebPack comes in handy.</p>
<p>WebPack introduces a build step into the front-end development process. WebPack loaders &amp; plugins support efficiency, code reuse, and maintainability by providing useful NodeJS utilities for doing things like:</p>
<ul>
<li>Compiling JavaScript (ES6) or TypeScript into JavaScript (ES5)&nbsp;</li>
<li>Transforming SASS or LESS into CSS stylesheets</li>
<li>Testing</li>
</ul>
<p>The UI.Frontend module in AEM provides a WebPack build step that is pre-configured to perform all of the tasks needed to convert front-end assets into AEM <em>client libraries </em>via a customizable, modern front-end development process.</p>
<h2>Getting Started</h2>
<p>The UI.Frontend module provides three options to choose from: General, React, or Angular. New AEM projects are generated with the General option by default. This can changed using the &nbsp;<em><span style="background-color: #fbeeb8;">frontendModule="&lt;option&gt;"</span> </em>flag to specify the option. e.g.</p>
<pre class="language-markup"><code>mvn -B archetype:generate \
    -D archetypeGroupId=com.adobe.aem\
    -D archetypeArtifactId=aem-project-archetype \
    -D archetypeVersion=26 \
    -D appTitle="AEM Tutorials Project" \
    -D appId="tutorials"  \
    -D frontendModule="general" \
    -D groupId="com.tutorials.aem" \
    -D artifactId="tutorials.aem" \
    -D version="0.0.1-SNAPSHOT" \
    -D aemVersion="6.5.5"</code></pre>
<h4>Including the UI.Frontend module into an existing project can be done in a few simple steps.</h4>
<ol>
<li>Use the maven command above to generate a new temporary project using the same appTile, groupId, and artifactId as your existing project.<br /><br /></li>
<li>Copy the ui.frontend directory from the new project into the existing project directory alongside the ui.apps and core directories.<br /><br /><img src="https://i.ibb.co/68YW4yZ/clone-ui-frontend-module-from-tmp.png" alt="" width="100%" /><br /><br />
<ul>
<li>Make sure the ui.frontend/pom.xml project references reflect the existing project&nbsp;</li>
<li>Make sure the ui.frontend/clientlib-config.js project references reflect the existing project<br /><br /></li>
</ul>
</li>
<li>Add ui.frontend module to parent pom.xml modules list.<br />
<pre class="language-markup"><code> &lt;modules&gt;
        ...
        &lt;module&gt;core&lt;/module&gt;
        &lt;module&gt;ui.frontend&lt;/module&gt;
        &lt;module&gt;ui.apps&lt;/module&gt;
       ...
&lt;/modules&gt;</code></pre>
<p>&nbsp;</p>
</li>
<li><span style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;"><span style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;">Copy frontend maven plugin from the newly created temporary project's parent pom.xml file into the existing project's parent pom.xml file<br /></span></span>
<pre class="language-markup"><code>&lt;plugin&gt;
   &lt;groupId&gt;com.tutorials.aem&lt;/groupId&gt;
   &lt;artifactId&gt;frontend-maven-plugin&lt;/artifactId&gt;
   &lt;version&gt;1.7.6&lt;/version&gt;
   &lt;configuration&gt;
      &lt;nodeVersion&gt;v10.13.0&lt;/nodeVersion&gt;
      &lt;npmVersion&gt;6.9.0&lt;/npmVersion&gt;
   &lt;/configuration&gt;
   &lt;executions&gt;
      &lt;execution&gt;
         &lt;id&gt;install node and npm&lt;/id&gt;
         &lt;goals&gt;
            &lt;goal&gt;install-node-and-npm&lt;/goal&gt;
         &lt;/goals&gt;
      &lt;/execution&gt;
      &lt;execution&gt;
         &lt;id&gt;npm install&lt;/id&gt;
         &lt;goals&gt;
            &lt;goal&gt;npm&lt;/goal&gt;
         &lt;/goals&gt;
      &lt;/execution&gt;
   &lt;/executions&gt;
&lt;/plugin&gt;</code></pre>
</li>
<li>Navigate into ui.frontend directory and run: <em>npm install</em>
<ul>
<li>Note: <em>NodeJS v10</em> is defined in the configuration above<br /><br /></li>
</ul>
</li>
<li>Using the terminal run<strong> </strong><span style="background-color: #ffffff;">mvn clean install</span> from your existing project's root directory and verify a successful build.<br />
<ul>
<li>Note: Ensure <em>ui.apps/src/main/content/META-INF/vault/filter.xml</em> reflects paths to the newly generated client libraries<br /><br /></li>
</ul>
</li>
<li>From within the ui.frontend directory, you should now be able to run the npm run dev<em> command</em></li>
</ol>

An overview of the AEM UI.Frontend module describing what it is and how it improves the frontend developer process