Add field description property dynamically to the dialog through JS

Avatar

Avatar

Shaheena_Sheikh

Avatar

Shaheena_Sheikh

Shaheena_Sheikh

09-03-2021

I have a JS file for my validation of colorfield. In the process of validation, if any inaccessible color is added to the colorfield, then i want to add the field description with a msg for the user. 

i have a granite:data node as a child node to the colorfield. The granide:data node is having selector : contain. I am also able to successfully fetch and validate the color values that are getting selected in the swatch. I am also able to show the coral alert. But the problem is that it keeps coming one after the other. How can that fade away? or how can hi have only a single alert?

Below is my JS code:

$(window).adaptTo("foundation-registry").register("foundation.validation.validator", {
selector: "[data-contain]",
validate: function(el) {
var input = el.value;

var id = $(".cq-dialog").find("#colorId")[0]; //added ID to my colorfield, in case this can be used to get field description
if (input !== "#000000") //checking for inaccessible colors
{
var alert = new Coral.Alert();
alert.variant = "error";
alert.id="erroralert";
alert.header.textContent = Granite.I18n.get("ERROR");
alert.content.innerHTML = Granite.I18n.get("Failed to load log content.");
$("#colorId").append(alert);
}
});

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

Anudeep_Garnepudi

MVP

Avatar

Anudeep_Garnepudi

MVP

Anudeep_Garnepudi
MVP

09-03-2021

@Shaheena_Sheikh 

Coral Alert is a widget/field like other fields refer below link. Create a node above or below your color field and configure as in below image.

https://helpx.adobe.com/experience-manager/6-2/sites/developing/using/reference-materials/granite-ui...

 

alert.PNG

Javascript:

Just hide or show based on condition.

if (input !== "#000000") {
    $("#alert").removeClass("hide");
} else {
    $("#alert").addClass("hide");
}

 

 

Note: granite:class hide - to hide initially, granite:id alert to target from JavaScript

Answers (2)

Answers (2)

Avatar

Avatar

Veena_Vikram

MVP

Avatar

Veena_Vikram

MVP

Veena_Vikram
MVP

10-03-2021

Avatar

Avatar

Veena_Vikram

MVP

Avatar

Veena_Vikram

MVP

Veena_Vikram
MVP

09-03-2021

@Shaheena_Sheikh to hide your fields via Jquery , find the field element via jquery and add .addClass("hide");  Similarly , to make it visible , you can do .removeClass("hide"); 

 

You can check http://localhost:4502/crx/de/index.jsp#/libs/cq/gui/components/authoring/dialog/dropdownshowhide/cli... 

 

https://github.com/arunpatidar02/aem63app-repo/blob/master/js/dropdownshowhide-multifield-multivalue... 

 

for some sample reference.

 

Thanks

Veena