Integration of Microsoft VS Code with Domino, a Hack

-

Many components make up a Web application some of which includes CSS and JavaScript. Both CSS and JavaScript has rapidly evolved over the many years that Domino has been used as a Web Application Server.  Unfortunately, the editors in Domino Designer has not evolved and you can not add and edit JavaScript ES6 code for example. The new Domino 14.5 I have been told allows one to edit ES6 JavaScript as a file resource, but not as a JavaScript script library file.

One of the most popular tools for editing CSS and JavaScript is Microsoft VS Code. There are some many extensions that you can download and work with many different programming languages.  One very nice thing about Microsoft VS Code is that it is free and most developers are familiar with VS Code. In addition, it is much nicer of an editor than what is available in the Domino Designer. 

There was discussions about VS Code integration with Domino at one of the past CollabSphere a few years ago.  Unfortunately, that discussion never resulted in any progress in that direction.

As we developed our Dojo-based iPhora SPA framework many years ago, we found it frustrating not to being able to create and edit ES6 based JavaScript using the Domino Designer editor. So we search for a way to get ES6 level JavaScript into Domino.

The solution we discovered was importing the JavaScript file through DXL as file resources or as JavaScript file as part of Code elements in the script library.  Using an external editor like Microsoft VS Code you can create, debug, minify and edit your JavaScript code.  Afterward, you can import the code into Domino.

You can further extend this approach in creating and editing HTML and CSS and any text based data including JSON data. This approach works when creating and editing HTML, JavaScript and CSS from version Domino 9 and higher.  I believe it works with older versions of Domino, but we never tested it.

In our sample database, we create web container documents for each component whether it is a JavaScript file, CSS file or HTML file.  The HTML web container documents are the same documents with the rich text field that are read when the generating the web page as I shown in my previous blog post on DX Objects. For JavaScript and CSS files, they are merely placeholders that let the code to know what to process using DXL.


We have a profile document that provides the location of the HTML, CSS and JavaScript File on your local computer.


The local file system contains the files that you create and edit using Microsoft VS Code.
With Microsoft VS Code, you can create and edit based on the file structure that you need in a much more organized fashion.  It has built-in ability to highlight missing or incorrect HTML tags or missing } or ) which help when coding.



In our Domino database view, we have a refresh button that corresponds to reading the local file, determining whether it is a HTML, JavaScript or CSS file and process accordingly.  For HTML files, it pushes the HTML code into the rich text field of the web container document and for JavaScript and CSS files it pushes the code into Domino via DXL.  The Refresh All button cycles through the document collection and processes all the files.


Summary

Though this is a hack, this approach plus the DX Objects provide Web designers and developers the ability to create Web sites and applications on HCL Domino using more traditional Web development approaches. The Web designer or developer does not necessarily need Domino experience to create the web pages.  The Domino platform have many drawbacks when it comes to creating Web applications.  However, with a little bit of imagination and hacking it is still one of the best Web application platforms.

This is the last of this series.  Below are the links to the previous two blog posts and the sample databases.

https://dominointerface.blogspot.com/2025/06/out-with-old-in-with-old-building-your.html

https://dominointerface.blogspot.com/2025/06/engage-2025-visualize-your-domino-data.html

https://phoragroup.com/files/engagedemo.zip






Comments

Post a Comment

Popular posts from this blog

Creating Twitter Bootstrap Widgets - Part II - Let's Assemble

-
Image
Creating Twitter Bootstrap Widgets - Part I - Anatomy of a Widget Creating Twitter Bootstrap Widgets - Part II - Let's Assemble Creating Twitter Bootstrap Widgets - Part IIIA - Using Dojo To Bring It Together This is two part of my five part series "Creating Twitter Bootstrap Widgets".   As I mentioned in part one of this series, Twitter Bootstrap widgets are built from a collection standard HTML elements, styled, and programmed to function as a single unit. The goal of this series is to teach you how to create a Bootstrap widget that utilizes the Bootstrap CSS and Dojo. The use of Dojo with Bootstrap is very limited with the exception of Kevin Armstrong who did an incredible job with his Dojo Bootstrap, http://dojobootstrap.com. Our example is a combo box that we are building to replace the standard Bootstrap combo box. In part one, we built a widget that looks like a combo box but did not have a drop down menu associated with it to allow the user to make a select...
Read more

MWLUG 2015 Session Abstract Submission is Now Open and New MWLUG 2015 Web site

-
Image
I am please to announce that session abstract submission is now opened for MWLUG 2015.  Abstract submission will close on May 22, 2015 so get your abstracts in.  To submit your abstract go to: http://mwlug.com/mwlug/mwlug2015.nsf/Abstract.xsp This year's theme is "Transforming Collaboration Through Innovation".  So if you have done unique ways of incorporating or using others technologies with the IBM portfolio, different ways of utilizing the IBM portfolio in your business, or taking IBM technology and make it do things that it was not designed to do, we want to hear from you as an innovator. So don't be shy and submit your abstract. MWLUG 2015 session tracks include: Application Development Best Practices in Social Collaboration Customer Business Cases Innovation System Administration As always, if you have never spoken at a conference, here is your opportunity to contribute to our community.  We reserve a number of slots for new speakers.  ...
Read more

The iPhora Journey - Part 8 - Flow-based Programming

-
Image
After my last post in this series -- way back in September 2022, several things happened that prevented any further installments. First came CollabSphere 2022 and then CollabSphere 2023, and organizing international conferences can easily consume all of one's spare time. Throughout this same time period, our product development efforts continued at full speed and are just now coming to fruition, which means it is finally time to continue our blog series. So let's get started... As developers, most of us create applications through the conscious act of programming, either procedural, as many of us old-timers grew up with, or object-oriented, which we grudgingly had to admit was better. This is true whether we are using Java, LotusScript, C++ or Rust on Domino. (By the way, does anyone remember Pascal? When I was in school, I remember being told it was the language of the future, but for some reason it didn't seem to survive past the MTV era).  But in the last decade, there a...
Read more