About jsBridge.js

The jsBridge.js is a wrapper between the service window and DataEase to make it easier to call into the application and get answers from the GUI or do actions and commands in the GUI from the service windows. Since the service windows in DataEase 9 use Edge with Chromium, instead if IE11 as in DataEase 8.5, all this communication is async. But do not despair, with a few setup rules and, this library and a little care, it should almost feel like running normal synchronous code.

<script src="./static/js/jsBridge.js"></script>

<script>
    (async () => {  
        console.log("We ara starting up");
        if (await jsGetVar("@startup")==""){
            await jsPrismDerivation('SetState("ServiceWindow3","Hide")');
        }
    })();    
</script>

Code for loading jsBridge and start using the library in your own script tag. To use a async library you have to use it form inside a async function, and that is what the anonymous wrapper do with (async () => {  "your code here"; })();

Using async in onclick

To use any of the async function to call into DataEase or to call any function doing any call to a async function, you will have to do it in a wrapper.

// Example that will set a global variable
<button onclick="(async () => {jdata = await doregisternewuser(jdata);})();" class="frm-submit">Register new user<i class="fa fa-arrow-circle-right"></i></button>
// Example of just calling a async function and wait till it is done
<button id="home" class="btn btn-danger btn-xs" onClick='(async () => {await jsActivateDoc("Catalog",CatalogID);})();'>Home</button>

Ex. of a button with onclick with a wrapper around a async function. It is the same type of anonymous function that must be used in the main startup code.

Using async in setTimeout

As setTimeout already put something on the work queue, you do not need to call a function setting the setTimeOut async unless the function do calculation using jsFunctions before setTimeout.

function jsActionExt2(ID, Switch) {
    setTimeout(async () => {await jsActionExt(ID, Switch);}, 500);

}

Ex. a delayed action call as used in jsBridge.js. As you see we do set the callback function to be an async function to be able to call the js

How async works

Avery good video about the inner workings of JavaScript. It do not take the async await part, but will give a good understanding of why JavaScript behave how it does.

This document describe how the stack and different message loops works in JavaScript.

The technique we use in event to let the call to the event resolve the promise is based on this article that makes a defer object.