0

My most basic problem is to load a select field in touch UI dialog with dynamic options. These options are coming from a external URL via webservices so please don't mention datasources here.

In classic UI is easy with optionsProvider.

In touch UI I am trying to write a script that fetches the data from the external webservice via AJAX ON DIALOG load and set these options in the select field.

My dialog.ready event is just not getting called.

There is another annoying issue I see with touch UI is that I can't see the edit option when I hover over a component. It shows just "delete" and "group" option. And this happens for some components only. I have to double tap to to open the dialog. Please see image enter image description here

Also see my code below to for dialog ready.

(function ($, $document, $window) {
"use strict";
console.log('Namaste'); // works

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

    console.log('Hello'); // Does not work/fire when dialog opens

     $window.adaptTo("foundation-ui").alert("Open", "Dialog now open, event [dialog-ready]");
    if(comm) {
          var serviceUrl = xyz.config.baseUrl + '/public/movies';
          $.ajax({
                url: serviceUrl,
                cache:false,
                success: function(result){
                    console.log('Result'+JSON.stringify(result));
            }
          });
    }
    
});

$document.on("dialog-closed", function() {
    $(window).adaptTo("foundation-ui").alert("Close", "Dialog closed, event [dialog-closed]");
});

})($, $(document), $(window));
ccpizza
  • 28,968
  • 18
  • 162
  • 169
Oliver
  • 6,152
  • 2
  • 42
  • 75
  • Why not to mention datasources? This is the recommended way of providing dynamic data for touch ui select fields. I don't know your use case, but this approauch is for me wrong and not maintainable. You cannot make sure that this will work with the next AEM version. – d33t Apr 12 '18 at 09:20
  • @d33t Please see https://stackoverflow.com/questions/49788289/load-select-options-dynamically-from-external-service-in-touch-ui-dialog-in-aem hope you understand my use case – Oliver Apr 12 '18 at 09:34

1 Answers1

3

To invoke your method on dialog open , you should set categories of your client lib as "cq.authoring.dialog"

It's a global category that's applies on all touch UI dialog.

Pooja Chauhan
  • 450
  • 4
  • 9
  • You are correct. I had added cq.authoring.dialog to dependencies and I was expecting that since it is a dependency it would load before my custom js but and fire the dialog-ready event. I was wrong. Appreciate it. – Oliver Apr 12 '18 at 04:46
  • Any ideas as to why the edit option is not opening when I hover over the component in touch UI ? – Oliver Apr 12 '18 at 04:47
  • configuration icon is not coming for this component only ? – Pooja Chauhan Apr 13 '18 at 14:05
  • Yes. The configuration icon is not coming. What should I do? – Oliver Apr 14 '18 at 09:43
  • 1
    Though I don't have much idea about how to set icons coming on editor toolbar, but you can verify your component's dialog structure once. there is similar question on adobe forum, here is the link https://forums.adobe.com/thread/2328780 – Pooja Chauhan Apr 15 '18 at 17:51