Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

Add field description property dynamically to the dialog through JS

Shaheena_Sheikh
Level 4
Level 4

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
Anudeep_Garnepudi
Correct answer by
Community Advisor
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
Anudeep_Garnepudi
Correct answer by
Community Advisor
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

Shaheena_Sheikh
Level 4
Level 4

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.

Shaheena_Sheikh
Level 4
Level 4
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
Shaheena_Sheikh
Level 4
Level 4
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.
Veena_Vikram
Community Advisor
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

Shaheena_Sheikh
Level 4
Level 4
this will hide the entire color field, whereas i only want to hide field description of the colorfield
Shaheena_Sheikh
Level 4
Level 4
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.
Shaheena_Sheikh
Level 4
Level 4
yes, coral alert would help. But i am not sure how i can add this to my JS
Veena_Vikram
Community Advisor
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.