Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Add field description property dynamically to the dialog through JS

Avatar

Level 6

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);
}
});

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@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

View solution in original post

15 Replies

Avatar

Correct answer by
Community Advisor

@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

I dont want to add the return msg, because this will not let the user save the dialog if there's a wrong color chosen and it will force them to correct the colour. But i dont want to force the user to correct the value. I only want to give them a msg through field description that they have chosen a wrong color and then let them save the wrong value if they want.

i am trying to use coral-alert instead of window.alert. But the problem is, the alert is getting added to the entire page instead of the dialog and is not even clearly visible
thanks for the solution. I too found another way of dealing with it. I am removing/adding the ID everytime theres a validation to keep only a single alert.

Avatar

Community Advisor

@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

Avatar

Level 6
this will hide the entire color field, whereas i only want to hide field description of the colorfield

Avatar

Level 6
I am not necessarily looking for field descriotion, but i only want to prompt the user with a msg that they using wrong color, and dont even want to prevent them from using the wrong color.

Avatar

Level 6
yes, coral alert would help. But i am not sure how i can add this to my JS

Avatar

Community Advisor
try document.createElement('coral-alert')

Avatar

Community Advisor
I might have to try this to give you exact code. If you are good in Jquery just do some trial and error and you should be able to figure that out I believe. Else I might need some time to check this to get you the exact code.