How to interact with an existing coralUI component? | Community
Skip to main content
sutty1000
sutty1000
Level 2
February 17, 2017

How to interact with an existing coralUI component?

  • February 17, 2017
  • 5 replies
  • 9126 views

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?

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

    5 replies

    smacdonald2008
    smacdonald2008
    Level 10
    February 17, 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#

    smacdonald2008
    smacdonald2008
    Level 10
    February 17, 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. 

    smacdonald2008
    smacdonald2008
    Level 10
    February 17, 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. 

    sutty1000
    sutty1000Author
    Level 2
    February 20, 2017

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

    S
    Stanleyor
    Level 3
    December 5, 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

    G
    garth914
    Level 2
    August 30, 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

    smacdonald2008
    smacdonald2008
    Level 10
    August 30, 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.

      D
      Davorin_Špičko
      October 30, 2019

      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/components/Coral.Textfield.html.

      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​

        L
        LawrenceRe
        Level 2
        November 1, 2019

        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/coralui3/Coral.Checkbox.html

        -----

        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.

        Terms & ConditionsAccessibility statement

        Loading footer...