How to use component's dialogue field value directly into its JS but not in HTML?

[sesmic]

Hello experts,
As the title says, I want to use value of one or more fields in component's dialog box in my components JS file without using it in HTML & run some logic. Is it possible to do so, if yes please share me the reference or hint to accomplish the same. I'm using AEM 6.5.

Regards,
sesmic

[Mahedi_Sabuj · Accepted solution]

If you are referring to Clientlibs, it's necessary to set values in HTML, which can be done through various ways such as hidden fields, JavaScript properties, etc.

However, if you are talking about the JavaScript Use API, you can access component dialog values using properties.get("title"), assuming the dialog field name "./title". You can refer to this link for more detailed information: https://varunaem.blogspot.com/2019/06/javascript-use-api.html

use(function () {
  var title = properties.get("title");
    
  // Now you can use the "title" variable in your logic
    
  return {
    // Your Model Data
  };
});

Nevertheless, it's recommended to use Sling Models. You can retrieve the component dialog value within a Sling Model, perform any necessary logic, and then return only the required value to be included in the HTML.

[aanchal-sikka]

Hellos @sesmic 

Any value which is configured in component dialog, is persisted in the resource. So, to access this value:

1. Use API - @Mahedi_Sabuj  has already shared info about the same
2. data attributes in HTML - If the value is not meant to be rendered, rather processed via UI. Then consider adding it as a data attribute in the component.

Dialogs are created on the fly. So, we cannot access them, without opening them

[sesmic]

Thanks for the response @aanchal-sikka !
Yes, I don't want to render the value neither want it to be visible on page source/HTML. By data attribute I assume you meant something like With HTL, Pass Data from AEM Backend to Javascript - Sourced Code which I came across before posting this question. Still, it will expose the value to user via some way.

[kautuk_sahni]

@sesmic Do you find the suggestions from users useful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity.