Autocomplete Dropdown from Webservice

Dear Amanthena,

We do not have any ready examples, however you can achieve such task in following ways.

1. Add a dependency on the field change on client side (page schema). Retrieve the value from the field and pass it on to the web service, which in turn would send this value to the external service. Receive a response and set it to the field in order to render on UI. You can see this article on web service call from client side:

https://academy.bpmonline.com/documents/technic-sdk/7-13/how-call-configuration-services-servicehelper

2. Add a dependency on the field change on client side (page schema). Call business process from the client side. Pass a parameter to the business process, this parameter would be the entered value from the field. In the business process add a web service element, which would proceed service calls and than work with the response. You can also pass the response from the service from business process on to the page like described here:

https://academy.bpmonline.com/documents/technic-sdk/7-13/process-launch-client-module

https://community.bpmonline.com/questions/refresh-page-fields-after-process-runs-update-signal

Though, it is quite complicated task.

In any way, please keep in mind, that you need to watch overall system performance and leave some time between service calls. More information can be found here:

https://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf

Regards,

Anastasia

Thank you for your reply, Anastasia! The reference material helped. The part where we make a service call from javascript and trap the response is clear. But could you help me figure out the javascript APIs that will help me clear, rebind and render it to a control in the UI. Would a dropdown be the best choice here? What do you suggest?

amanthena,

You can send a message from back end to front end.In case you are calling external service via business process, you can check the example here:

https://community.bpmonline.com/questions/refresh-page-fields-after-process-runs-update-signal

The idea is to use sandbox to send and hear message, after message received you set it to the field with this.set.

Also you can use web sockets to communicate between front end and back end. 

https://academy.bpmonline.com/documents/technic-sdk/7-13/clientmessagebridge-client-side-websocket-message-handler

The field type depends on the data you will be working with. 

Hope you find it helpful

Anastasia

The data is a list of key-value pairs, "value" is the user friendly description and "key" is the id that needs to be persisted in the database on selection. i figured a dropdown would be the best control for this purpose. Can we programatically reset the contents of the dropdown in javascript with the data that is returned from the server? Could you tell me how "this.set" needs to be used here?



Once again, thanks for all the help! Much appreciated!

amanthena,

To set value to a lookup (dropdown), you need to pass an object with at least to parameters displayValue and value :

this.set("Country", {value: "a570b005-e8bb-df11-b00f-001d60e938c6", displayValue: "Australia"});

Regards,

Anastasia

Thank you, Anastasia! That helps. I might also need to rebind the list of items available for selection in the dropdown from the data that is returned from the API, and not just the selected item. How do I do that?

amanthena,

Lets say you have a dropdown, which is a Country lookup, when user enters a country name you launch a web service call that returns some internal code for the country. You work with currently chosen country, but want to change others too. You can run an ESQ to the Country object when setting data for current one. When collection is returned from ESQ, you can modify it with values received from web service call.

Regards,

Anasatsia

Thank you, Anastasia! I will explore this further.