How to interact with an existing coralUI component?

[sutty1000]

I'm trying to work out the best way to interact with an existing coralUI component that is on the page, e.g. a checkbox. To give an example, my AEM component dialog has a checkbox on it. I want to interact with the checkbox via javascript, I can do things like update the state etc via JQuery basically ignoring the fact it is a coralUI checkbox however I can see in the coralUI documentation there is a nice API for doing this e.g. instance.indeterminate or instance.invalid

I can see how I can use these properties/methods if I create a new checkbox via JavaScript e.g. 

var checkbox = new Coral.Checkbox().set({ label: { innerHTML: "CoralUI Rocks" }, value: "kittens" });

but how can I read the checkbox from the DOM and transform it into the same object above? I'd imagine something like this:

var checkbox = new Coral.Checkbox($(#myCheckBoxID));

obviously that doesn't work but is there a way to achieve what I want?

[smacdonald2008]

Also -- see this reference docs here - it's well documented:

https://docs.adobe.com/docs/en/aem/6-2/develop/ref/coral-ui/components/Coral.Checkbox.html#

[smacdonald2008]

I am actually working through this today to see if i can programmatically manipulate a checkbox via the API:

Better yet - this post has made me think we need to take more action around this. As a result - we are setting up meetings with Adobe ppl and we will be doing an Ask the AEM Community Experts session on using Coral API with AEM. This will be in the Spring - so keep an eye on that. We are looking at April. 

[smacdonald2008]

Solved this - given this setup - 

You can interact with the checkbox via code: 

(function ($, $document) {
    "use strict";
    
    $document.on("dialog-ready", function() {

        $('#kitten').attr('checked', true);     

        });

})(jQuery, jQuery(document));

This is simply JQuery selector syntax. When i open the dialog - the checkbox is checked: 

We will write this up into a HELPX. 

[sutty1000]

Thanks, that does the job and the other links are very helpful! 

[Stanleyor]

I do not think that the question is answered completely.

I want dynamically mark an input field as required. Using jQuery that is possible to add the required attribute. It works. Although there is a difference with a field that is initially required. The difference is the red triangle on the top right side.

Is it possible to read Coral object from DOM? For example:

var textField = new Coral.Textfield($("#textFieldId"));

textField.required = true;

Yes/no ?

Thanks

[garth914]

I agree with Stanleyor, this didn't actually answer the question.

As noted in this thread, you can create new instances of components using the Coral API, but I'm not finding a way to initialize a Coral component from existing markup.

My dialog uses the "granite/ui/components/foundation/form/select" script to generate the markup for a Coral select box.

In my dialog-ready handler, how can I initialize a Coral.Select using this markup? The documentation doesn't appear to cover this.

Is it possible? Should we be trying to use the Coral API to interact with existing elements generated in our dialogs? Can we?

I'm mostly concerned about manually manipulating the DOM in a way that's going to break during the next upgrade cycle. The Coral API offers ways to interact with these components in ways that should be safe.

Garth

[smacdonald2008]

If you are using AEM 6.4/6.3 - you should look at using latest granite types -- ie-

• granite/ui/components/coral/foundation/form/textfield
• granite/ui/components/coral/foundation/form/textarea
• granite/ui/components/coral/foundation/form/checkbox
• granite/ui/components/coral/foundation/form/select
• granite/ui/components/coral/foundation/form/radiogroup
• granite/ui/components/coral/foundation/form/multifield

For your question about programmtically interacting with granite types, checking with the Touch UI team to see if they have good examples written that shows use of this.

[garth914]

Thanks Scott! I was wondering about the difference between the granite/ui/components/foundation and granite/ui/components/coral/foundation folders. Is that particular 6.3/6.4 detail documented anywhere for reference?

The documentation at Concepts of the AEM Touch-Enabled UI for AEM 6.3 still references granite/ui/components/foundation.

I look forward to hearing the feedback from the Touch UI team!

[garth914]

Any word from the Touch UI team on examples of how to interact with existing Coral elements generated by the Granite types using the Coral API?

[Davorin_Špičko]

It is a bit old question and I hope you found a solution to it. I'll answer it anyway for the sake of future readers.

To interact with coral components use document.querySelector() instead of jQuery $() selector.

var textField = document.querySelector("#textFieldId");

Then you can access all API properties and methods defined here: https://helpx.adobe.com/experience-manager/6-2/sites/developing/using/reference-materials/coral-ui/c....

In your case

textField.required = true;

If you want to interact with coral fields from AEM dialog, please keep in mind to use corect resource type -> "granite/ui/components/coral/foundation/form/select".

FYI Stanleyor​

[lawrencer388181]

I believe the solution is to simply get the underlying DOM element from the JQuery object. For example, the code below is to interact with a checkbox created within a div with class "rte-dialog-columnContainer";

var jqueryCheckbox = $(".rte-dialog-columnContainer coral-checkbox");
// then getting the underlying element (assuming there's just one) from the JQuery collection:
var coralCheckbox = jqueryCheckbox.get(0);
// calling various API methods/attributes:
coralCheckbox.checked = true;
coralCheckbox.checked = false;
coralCheckbox.get("checked");
coralCheckbox.set("checked", true, true);
coralCheckbox.set("checked", false, true);

API reference:

https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/reference-materials/coral-ui/c...

-----

Apologies, I just realised that Davorin already answered the question - by getting the DOM element directly. Either way, this can be used to get the Coral object via JQuery.