0

My problem is to load a select field in touch UI dialog with dynamic options. These options are coming from a external URL via webservices, I am consuming this RESTful services using url defined in one of our global javascript objects like

$.get(mec.serviceConfig.baseUrl + '/movies';

Please understand that the options are coming from third party webservice please do not mention datasource. Whenever I search for loading select options dynamically I get this tutorial

Link to Tutorial This is is not what I want.

In classic UI it 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.

Is there any better easier approach ? Can someone please share code snippets?

Oliver
  • 6,152
  • 2
  • 42
  • 75
  • I am not sure why you do not want to use a proper `Datasource`? You could write a nice, clean and testable Java class that fetches the items from your remote service. In the end it is just a (Sling) Servlet registered for a specific resource type and then in TouchUI you set your datasource to this resource type. The servlet is called and returns the datasource. If you want I can provide you with a code example for this. – Jens Apr 12 '18 at 08:46
  • This `mec.serviceConfig.baseUrl` is a javascript variable that has the url of the webservice. you are saying instead of hitting this directly via javascript I should call sling servlet which would internally invoke this service using HTTpGet and return the values ... duh – Oliver Apr 12 '18 at 09:41
  • @Jens So much over head. Just to get some key value pairs/options available in a select option, for one authoring mode i.e touch and to be used only in Author mode. – Oliver Apr 12 '18 at 09:57
  • In the end you can always write some JS code that does all of this. But in my experience those are often fragile solutions that are hard to reliably write tests for and maintain over the years etc. You are trading a potentially more robust solution in Java with a solution that is "easier" to implement in Javascript (although if that would be the case we would not be having this conversation). In the end you have to decide based on your project requirements. – Jens Apr 12 '18 at 10:03
  • I can fully agree with @Jens, I said just the same in your other question. The baseurl is maybe hardcoded in your JS, but this no reason to begin to mess up other things. The url should come from your aem application (e.g. the backend should pass this url to the frontend, not vice versa). So the architecture here seems to go in the wrong direction. You can set your base url via OSGI for example and pass it to some JS config (or fetch it with ajax). But you can use your backend service to implement also other things as the datasource for example as you have all the data you need in the backend. – d33t Apr 12 '18 at 11:58
  • @d33t In my experience the best way to move OSGI configuration to „TouchUI“ JavaScript is through `PageInfoProvider`. Also nice, clean and short Java class that can add values to `ns.pageInfo`. – Jens Apr 12 '18 at 12:15
  • @Jens So the base url is coming from an OSGi config. I was thinking it is too much of an overhead to write a datasource have it pull the baseurl from OSGi config file then make an HTTP Get call and then pass is on to the select options. It's just too much to do for too little. Hope you understand what I am trying to say. – Oliver Apr 12 '18 at 16:47
  • @d33t Please go through above comment. Thanks – Oliver Apr 12 '18 at 16:47
  • nope, it's not too much and it's implemented fast for experienced developer who know what he is doing. try to implement the things in a way every aem developer would understand it. stay with the adobe best practice and the recommended way of doing things in aem. this way you can ensure that your solution will possible work even when coral ui completely changes – d33t Apr 13 '18 at 09:39

1 Answers1

1

you should create JS listener for your component.

$document.on("dialog-ready", function() {
// there you should find your select field 
//for example
var language = $("[name='./language']").closest(".coral-Select");
//then append to your select field new options from your datasource
});

please see doc: Dynamically updating AEM TouchUI Dialog Select Fields

Prosis
  • 36
  • 3