In summary, the key difference lies in the purpose and scope of these hooks. useQuery is for fetching data for a single query, while useQueries is for handling multiple queries concurrently. Depending on your use case, you can choose the hook that best fits your requirements. React Query’s documentation provides comprehensive information on both hooks and how to configure them for optimal use.
In this article we will try out a custom Coral UI Javascript in AEM and all a functionality to a dropdown where, dropdown will have n number of values and will have Select All and De-select All option as well in the dropdown. This is really helpful when you have lot’s of options in a dropdown and you have to select all and de-select all.
First create a simple AEM dropdown field with multiselect functionality and add some 5-6 options in the dropdown and then add two option with following text and value combination which will help us select all fields in dropdown as well as de-select all fields in dropdown.
NOTE: The name property used in this article is ./country for the dropdown.
Select All option:
text: Select All (You can keep any name as it just shows on the UI). value: all (We are keeping all here because we will be using the same value in JS)
Deselect All option:
text: De-Select All (You can keep any name as it just shows on the UI). value: none (We are keeping none here because we will be using the same value in JS)
Now create a clientlibrary in AEM with category name as cq.myproject.select-deselect. And then attach this clientlib at the cq:dialog node of the component by adding the following property at cq:dialog node.
And once you are done installing the Java 11 successfully you can check for the Java version in your terminal using java -version and check if it shows the correct Java version.
Now download the latest or required maven version from https://maven.apache.org/download.cgi and unzip it at any of your local system location. (In my case I have kept it at /Users/NikhilKumar/Downloads/apache-maven-3.9.0).
Now once you are done with the above placement of the unzipped apache-maven-3.9.0 folder, you can open a new terminal which point to the users location (in my case it’s /Users/NikhilKumar).
Now next thing is to check for /.bash_profile file in the users path or you can simply open the terminal of macOs and type vi ~/.bash_profile. Now you will get an empty vi editor and now just add the below set of lines which will set the maven path to the path of the dowloaded maven version.
Now once you are done adding the above code just press Esc then Shift + Colon(:) and then type wq and press enter. (This means we are saving the piece of lines that we have added in bash_profile).
Once you are done with above steps you can either re-open a new terminal to check for maven version or just do source .bash_profile and then check for maven version and it should show you the corresponding maven version.
Now we can go ahead to our AEM Maven project and give a maven build and it should successfully download the dependencies and build should be success.
The Core Components implement several patterns that allow easy customization, from simple styling to advanced functionality reuse.
The Core Components were designed from the beginning to be flexible and extensible. A look at an overview of their architecture reveals where customizations can be made.
Now let’s see how we can customise our AEM Core components business logic. We will try to customise the OOTB image core component. And the customisation that we are going to do is that, if image alt text is not authored, we will pick up the image alt text from the image name.
In above java class we have used the adapter for Image.class and implemented the OOTB functionality for Image Component and using @Self annotation we have created a object of Image class so that we will go ahead and update the image.{{variable}} with model.image.{{variable}} to load the untouched functionality of the OOTB java class. whereas the customized altText here can be referred by model.alt.
No we can go ahead and replace the data-sly-use.image=”com.adobe.cq.wcm.core.components.models.Image” with data-sly-use.model=”com.myproject.core.components.models.ImageComponent”.
Now we can replace the custome altText which was image.alt to model.alt and rest of the image variable with model.image.{{variable}}.
As we all know that when it comes to apply the maxlegth property to a richtext field in AEM, it doesn’t actually work. Because RTE in dialog uses the concept of validation from the Form Validation in Granite UI. And, since, Inline-editing does not behave as a form, it can’t use that validation concept.
So we will make use of Granite UI api to create our custom validator which will help us to add validation of maxlength even on the richtext field in AEM TouchUI.
Create a validator.js in clientlibs with following Jquery: Here we are targeting the richtext-container and inside that container we are targeting a class that we will provide to the richtext field i.e rich-custom using Granite UI Api.
;(function (window, $) {
'use strict';
var RichTextMaxLengthValidation= function () {
var CONST = {
TARGET_GRANITE_UI: '.coral-RichText-editable',
ERROR_MESSAGE: 'Your text length is {0} but character limit is {1}!',
};
function init() {
// register the validator which includes the validate algorithm
$(window).adaptTo('foundation-registry').register('foundation.validation.validator', {
selector: CONST.TARGET_GRANITE_UI,
validate: function (el) {
var $rteField = $(el);
var $field = $rteField.closest('.richtext-container').find('input.rich-custom');
var maxLength = $field.data('maxlength');
var textLength = $rteField.text().trim().length;
if (maxLength && textLength > maxLength) {
return Granite.I18n.get(CONST.ERROR_MESSAGE, [textLength, maxLength]);
}
return null;
}
});
// execute Jquery Validation onKeyUp
$(document).on('keyup', CONST.TARGET_GRANITE_UI, function (e) {
executeJqueryValidation($(this));
});
}
function executeJqueryValidation(el) {
var validationApi = el.adaptTo('foundation-validation');
if (validationApi) {
validationApi.checkValidity();
validationApi.updateUI();
}
}
return {
init: init
}
}();
RichTextMaxLengthValidation.init();
})(window, Granite.$);
2. Now add this validator.js in your js.txt and give the category of your clientlibs as cq.author.maxvalidator
#base=js
validator.js
3. Now once we have our validator.js ready now we will create our AEM dialog which will have a richtext field and we will give two properties to this richtext field in dialog.
maxlength – {String} – 60 //This is the maxlength of the richtext text.
class – {String} – rich-custom //This is the custom class that is used in validator to target the richtext field.
Also we need to add the extraClientlibs property on the cq:dialog to load the custom validator that we created in Step 1.
Following the dialog.xml of one my component where this custom validator is used to restrict the character count based on maxlength.
4. Now go ahead and check the authoring dialog for the maxlength validation for the richtext. It should look something like below:
NOTE: This is tested for AEMaaCs and should work for AEM TouchUI dialogs in other versions too. Also this works perfectly fine with the richtext in multifield too.
AEM Queries & Solutions 