How to interact with an existing coralUI component?

Avatar

Avatar

sutty1000

Avatar

sutty1000

sutty1000

17-02-2017

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?

Replies

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K
smacdonald2008

17-02-2017

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#

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K
smacdonald2008

17-02-2017

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. 

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K
smacdonald2008

17-02-2017

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. 

Avatar

Avatar

sutty1000

Avatar

sutty1000

sutty1000

19-02-2017

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

Avatar

Avatar

Stanleyor

Avatar

Stanleyor

Stanleyor

05-12-2017

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

Avatar

Avatar

garth914

Avatar

garth914

garth914

30-08-2018

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

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K
smacdonald2008

30-08-2018

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.

Avatar

Avatar

garth914

Avatar

garth914

garth914

30-08-2018

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!

Avatar

Avatar

garth914

Avatar

garth914

garth914

25-09-2018

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?