Joget DX 8 Stable Released
The stable release for Joget DX 8 is now available, with a focus on UX and Governance.
Table of Contents |
---|
The new DX8 themes feature Single Page Application (SPA) treatment for improved UI/UX.
Essentially, UI menus in DX8 AJAX Themes are loaded asynchronously instead of loading the entire page content, thus reducing unnecessary loading of resources such as UI sidebar elements that do not generally change.
There are certain considerations when we are upgrading from the older Joget DX 7 based theme to the new one.
ones.
Only consider the potential fixes below if your JS scripts are not working as expected.
If your Javascript code requires external libraries to be loaded first, then using the "document.ready" event is not reliable.
Code Block | ||||
---|---|---|---|---|
| ||||
<script src="#appResource.someJSLibrary.js#">
<script>
$(function(){
//continue with usual code execution
});
</script> |
Please consider using the following code to load the external libraries then only continue with code execution in the method named "windowReady".
Code Block | ||||
---|---|---|---|---|
| ||||
<script>
loadJSCount = 0; loadJSCountProcessed = 0;
function loadJS(FILE_URL, async = true) {
loadJSCount += 1;
let scriptEle = document.createElement("script");
scriptEle.setAttribute("src", FILE_URL);
scriptEle.setAttribute("type", "text/javascript");
scriptEle.setAttribute("async", async);
document.body.appendChild(scriptEle);
// success event
scriptEle.addEventListener("load", () => {
console.log("File loaded");
loadJSCountProcessed+= 1;
if(loadJSCount == loadJSCountProcessed){
windowReady();
}
});
// error event
scriptEle.addEventListener("error", (ev) => {
console.log("Error on loading file", ev);
loadJSCountProcessed+= 1;
if(loadJSCount == loadJSCountProcessed){
windowReady();
}
});
}
loadJS("#appResource.someJSLibrary.js#", true);
//this acts as the replacement for windows.ready
function windowReady(){
//continue with usual code execution
} |
Reference:
https://www.educative.io/answers/how-to-dynamically-load-a-js-file-in-javascript
If you have any custom html with <a> or <button> or <input> with button html tag, the AJAX Based DX 8 Themes would bind click event to intercept them, this is part of Single Page Application (SPA) treatment.
...
Code Block | ||||
---|---|---|---|---|
| ||||
<script type="text/javascript"> $(document).ready(function () { $("#resend").off("click"); $("#resend").on("click", function (event) { console.log('enter resend'); FormUtil.getField("status").val("resendOTP"); $("#assignmentComplete").focus().click(); return false; }); $("#changeTo").off("click"); $("#changeTo").on("click", function (event) { console.log('enter changeConfirm'); FormUtil.getField("status").val("changeConfirm"); $("#assignmentComplete").focus().click(); return false; }); }); </script> |
Since DX 8 Themes have the Single Page Application (SPA) treatment, some scripts that depends and load on page opened / refresh might not work as intended.
Consider the following script:
Code Block | ||
---|---|---|
| ||
$(document).ready(function(){
// Your code here
}); |
On your first page visit, since it is loading the entire page content, the code will execute normally.
However, as you navigate to other menus and pages in the app, the above code will not execute due to UI menus being loaded via AJAX, hence the entire page is not reloaded and thus not calling the document.ready event.
This is where the "page_loaded" event comes in handy. In DX8, this custom event is fired when a UI menu has finish loading.
Your JS scripts should now look like below:
Code Block | ||
---|---|---|
| ||
$(document).on("page_loaded", function(){
// Your code here
});
|