Add field description property dynamically to the dialog through JS

Avatar

Avatar
Applaud 25
Level 2
Shaheena_Sheikh
Level 2

Likes

2 likes

Total Posts

97 posts

Correct reply

1 solution
Top badges earned
Applaud 25
Applaud 5
Affirm 1
Validate 10
Validate 1
View profile

Avatar
Applaud 25
Level 2
Shaheena_Sheikh
Level 2

Likes

2 likes

Total Posts

97 posts

Correct reply

1 solution
Top badges earned
Applaud 25
Applaud 5
Affirm 1
Validate 10
Validate 1
View profile
Shaheena_Sheikh
Level 2

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
Establish
MVP
Anudeep_Garnepudi
MVP

Likes

275 likes

Total Posts

320 posts

Correct reply

87 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
Anudeep_Garnepudi
MVP

Likes

275 likes

Total Posts

320 posts

Correct reply

87 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
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
Establish
MVP
Veena_Vikram
MVP

Likes

484 likes

Total Posts

1,048 posts

Correct reply

121 solutions
Top badges earned
Establish
Coach
Contributor 2
Seeker
Ignite 5
View profile

Avatar
Establish
MVP
Veena_Vikram
MVP

Likes

484 likes

Total Posts

1,048 posts

Correct reply

121 solutions
Top badges earned
Establish
Coach
Contributor 2
Seeker
Ignite 5
View profile
Veena_Vikram
MVP

10-03-2021

Avatar

Avatar
Establish
MVP
Veena_Vikram
MVP

Likes

484 likes

Total Posts

1,048 posts

Correct reply

121 solutions
Top badges earned
Establish
Coach
Contributor 2
Seeker
Ignite 5
View profile

Avatar
Establish
MVP
Veena_Vikram
MVP

Likes

484 likes

Total Posts

1,048 posts

Correct reply

121 solutions
Top badges earned
Establish
Coach
Contributor 2
Seeker
Ignite 5
View profile
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