New TeamDesk UI project not only added visual appeal to the database’s user interface. As a part of this project, we dropped many of legacy components. As the result your scripts may need the revision in order to work with new UI. One of the components dropped is jQuery library. Let’s discuss the migration of custom JavaScript code.
Historically there were two browser programmability models. It was all started by Netscape Navigator (remember that?), Internet Explorer caught up later with its own, far richer model. When programmability model was standardized, World Wide Web Consortium took Netscape model as a basis. As Internet Explorer had 95% market share these days, Microsoft ignored the standards in favor of backward compatibility. As the result, web developers had to support two models until the arrival of Internet Explorer 9 in 2011, which finally followed the web standards.
jQuery was widely used these times playing the role of the shim hiding the differences between programmability models from the programmer. But as of now all browsers follow web standards, and jQuery’s role diminished. In addition, small code libraries we used to perform some routine tasks are not needed as these tasks can be done using new in-browser APIs. And jQuery UI library that is dependent on jQuery and we relied on is no longer developed. So, we saw no reason to keep using jQuery at all.
So, after a short history lesson, let’s discuss the migration strategy.
Custom JavaScript code can reside either in dbscript.js file in database resources or placed inline as a part of Text/HTML sections of forms and dashboards. Your code may require jQuery directly or may use third-party component that requires jQuery. So, as migration strategy depends on many factors there is no uniform solution.
Brute force quick recipe
Add JavaScript file named dbscript-v3.js in Setup | Database tab | Resources section with the following content:
// dbscript-v3.js
document.write('<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>');
document.write('<script src="res.aspx/dbscript.js"></script>');and see if it works.
To simplify debugging, new TeamDesk UI dumps errors to a panel in the page’s footer. Please check browser’s developer console for more information.
Migration of custom JavaScript code in Text/HTML elements
If your custom code resides in short snippets of script in form/dashboard Text/HTML sections and do not use jQuery at all, there are good changes it will continue to work, as we made minimal changes to the HTML generated by the server and elements the script would rely on are likely in place. If you encounter problems you can conditionally address them by checking V3 variable on window object
<script>
if(window.V3) {
// new code
} else {
// old code
}
</script>In case your snippet uses jQuery, see if it can be replaced with browser’s model easily.
<script>
if(window.V3) {
// new code
document.querySelector('input[name="f_1234"]').addEventListener("click", , function() { /* handle click */ });
} else {
// old code
$('input[name="f_1234"]').on("click", function() { /* handle click */ });
}
</script>Placing new code under condition will give you the time to test it safely. Once tested you can remove if/else block to leave just the new code.
If your snipped uses jQuery that cannot be easily replaced (for example, uses third-party control library) you will have to load jQuery script.
Scripts can be loaded in two ways. Synchronous way is when the browser will wait while script is loaded over the network. Asynchronous way is when the browser will continue to do its work while script is loaded in parallel.
The advantage of the latter is improved loading time, but you cannot predict the moment the script is loaded and executed. If the script is already cached by the browser, it will be executed immediately. Otherwise, if the script file is large and the network is slow it won’t be ready before the page loading completes. In former case you may encounter errors if script addresses elements on the page. In latter case you may hit the error if you try to address variables in the script (such as jQuery) from other scripts, say on form or dashboard. You have to load the script synchronously in this case.
// dbscript-v3.js
document.write('<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>');Migration of custom JavaScript code in dbscript.js
Since migration may take a while and you’ll likely need to keep your database operational with old UI, for new UI we auto-include new file, dbscript-v3.js. There you can safely start your migration work without affecting users working on the database.
If your JavaScript code addresses elements on the page, your script have to wait while page is still loading. You can postpone your code execution with TD.ready(callback) function, an analog of jQuery(callback) function. TD.ready() is available for both old and new interface.
// dbscript-v3
// Let's use modern JavaScript syntax
TD.ready(() => {
console.log("Page loading is complete");
});If you need to load additional scripts, you can do it with FS.addScript() function. It is available for both old and new interface.
// dbscript-v3
FS.addScript("https://code.jquery.com/jquery-3.7.1.min.js", () => {
console.log("jQuery is ready, version:", $.fn.jquery);
TD.ready(() => {
console.log("Page loading is complete");
});
});If you need to load multiple scripts pass an array of URLs to FS.addScript()
// dbscript-v3
FS.addScript([
"https://code.jquery.com/jquery-3.7.1.min.js",
"https://code.jquery.com/ui/1.14.1/jquery-ui.min.js"
], () => {
console.log("jQuery is ready, version:", $.fn.jquery);
console.log("jQuery UI is ready, version:", $.ui.version);
TD.ready(() => {
console.log("Page loading is complete");
});
});Beside jQuery there were a pair of commonly used snippets we provided as jQuery components: $.qstring (or QueryString) and $.cookies.
Former can be replaced with browser’s URLSearchParams API with a similar set of methods.
Latter has no direct browser replacement — cookies are intended to pass the information between the browser and the server or for the server to maintain its state. For data storage, consider using LocalStorage or SessionStorage browser APIs.
