Add field description property dynamically to the dia...

[Shaheena_Sheikh]

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

[Anudeep_Garnepudi · Accepted solution]

@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...

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

[Shaheena_Sheikh]

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.

[Anudeep_Garnepudi]

@Shaheena_Sheikh Then try add alert("Wrong Color"); and return "";

[Shaheena_Sheikh]

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

[Anudeep_Garnepudi]

can you share the code snippet

[Shaheena_Sheikh]

updated the code snippet and the problem statement.

[Anudeep_Garnepudi]

Updated above comment please try.

[Shaheena_Sheikh]

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.

[VeenaVikraman]

@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]

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

[Shaheena_Sheikh]

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.

[VeenaVikraman]

Not sure if you are looking for something like this https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/reference-materials/coral-ui/c...

[Shaheena_Sheikh]

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

[VeenaVikraman]

try document.createElement('coral-alert')

[VeenaVikraman]

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.