While CSPro is not a web-based application, HTML is used in CSPro in a variety of ways:
HTML files or websites are displayed in an embedded window using a Chromium-based web browser (Edge WebView2
on Windows; WebView
to interact with various CSPro features.
When a CSPro application runs, a local web server is launched that serves content stored on the local file system. On Windows, this server uses localhost as the host and chooses a dynamic port, checking for one that is not in use.
Relative paths that are not based off the root are evaluated from the location of the displayed HTML content:
- Question Text: Relative to the data entry application (.ent) or .pen file.
- Reports: Relative to the location of the report (or, when running a .pen file, where it would have existed relative to the data entry application).
- HTML Files (shown using view or htmldialog): Relative to the location of the file.
For example, these references in question text would refer to files in the application directory and in a relative directory located one level above the application directory:
<img src="image-in-application-directory.jpg" />
<img src="../shared/image-in-relative-directory.jpg" />
C:\Program Files (x86)\CSPro 7.7\html\
and other path-related functions can return the name of this directory using the Html
If you want to access any of the files in that directory in HTML that you write, you should not reference the file using an absolute path (using a file URL) because the web browser that displays the HTML may not be able to access local files. Instead, you should use the path.getRelativePath
function to construct a relative path from the location of your HTML content. For example, if trying to use the PFF icon from a report
<!-- will not work when displayed in CSPro: -->
<img src="file:///C:\Program Files (x86)\CSPro 7.7\html\images\pff-icon.png" />
<!-- correct format: -->
"C:\Program Files (x86)\CSPro 7.7\html\images\pff-icon.png")~~" />
Fortunately, the local web server treats the html directory as the root of the server. The above example can instead be coded as:
<img src="/images/pff-icon.png" />
- mustache.js: "Mustache is a logic-less template syntax. It works by expanding tags in a template using values provided in a hash or object."
To use these libraries, use the following code:
<!-- Bootstrap -->
<link rel="stylesheet" href="/external/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="/external/bootstrap/bootstrap-icons.css" />
<!-- jQuery -->
<!-- Leaflet (Windows only) -->
<link rel="stylesheet" href="/external/leaflet/leaflet.css" />
<!-- Mustache -->