Loading e-Form JavaScripts based on MetaData value
Notice: works from hub version 1.0.10.73
e-Form templates are dependent on the set of java scripts for e-Forms factory. Those java scripts are constantly improved and upgraded, which can cause in specific cases issues with existing e-Forms. Therefore, it is necessary to have a support for mechanism, which will allow to load exact versions of JavaScipts linked with the e-Form.
Whenever JavaScripts will be upgrade, then the older version will be persisted, and the latest version will be stored in the folder with name latest.
Latest scripts are loaded as default.
The following figure shows the example of the folder structure of stored JavaScripts on the FormsHub server.
1) Prepare the hosting web page
The following text shows the example how you can manage JavaScripts on your e-Forms.
The standard mechanism of loading JavaSchript like JQuery, SignalR and SignalR/hubs is that you reference them in the header tag or they can be loaded later using custom function (custom.js) described in the example below. The role of custom.js is holding required set of links to above mentioned scripts. Index.html example:
<!doctype html>
<html>
<head>
<script src="jquery-1.11.3.min.js"></script>
<script src="jquery.signalR-2.2.2.min.js"></script>
<script src="YOURDOMAIN/FormsHub/signalr/hubs"></script>
<script src="custom.js"></script>
</head>
<body>
<div style="position:relative;">
<input type="hidden" id="eFormsHubUrl" value="YOURDOMAIN/FormsHub/signalr" />
<canvas id="formHolder" width="1000" height="600" DefaultFormUid="8655F819-2AE3-4F67-B326-26B681476EEB" DefaultFormVersion="null" FormStretch="Resize" WCFCompilerURL="YOURDOMAIN/FormServer/RuntimeService.svc" DefaultCulture="en-US" EnableDebugLog="true" ></canvas>
</div>
</body>
</html>
2) Add custom function which will handle the loading of JavaScript
To be able to load exact version of JavaScript you will have to create your custom function. Insert the example code below to the hosting web page or to the page's script file.
The code in the example below shows how to read value of the version of JavaScript from e-Form metadata.
The example expects that you have defined metadata, which holds the value of the version of JavaScript. In this example the key for meta data is “ScriptVersion” (name it as you need).
In case, the key will not be found the latest version of JavaScript will be read.
//main handler function
const ImportNDScriptsByMetadata = function (formUID, formVersion) {
try {
//undefined handler => form version must be number or null
If (formVersion === undefined)
{
formVersion = null;
}
//init
const formServerUrl = document.querySelector('*[wcfcompilerurl]').getAttribute('wcfcompilerurl');
const path = formServerUrl + '/rest/GetTemplateMetadata/' + formUID + '/' + formVersion;
let ver = 'latest';//because it's folder name inside FormsHub
//call rest
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (request.readyState === 4 && request.status === 200) {
const metaData = JSON.parse(request.responseText);
//got response => each throught metadata
for (let i = 0, len = metaData.length; i < len; i++) {
const data = metaData[i];
if (data.Key === 'ScriptVersion') { //you can set metadata entry name here
ver = data.Value;
}
}
LoadVersion(ver);
}
};
request.open('GET', path);
request.send();
} catch (ex) {
alert('Scrip load exited with: ' + ex + ' ' + ex.stack);
}
};
//help function called inside the handler
//puts scripts into the head tags
const LoadVersion = function (version) {
try {
//get hub url
const hubUrl = document.getElementById('eFormsHubUrl').value.replace('signalr', 'ClientScripts');
//load required
const date = new Date().getTime();
const url = hubUrl + '/' + version;
//Begin script load
let helpers = document.createElement('script');
helpers.src = url + '/Helpers.js?v=' + date;
helpers.onload = function () {
let inter = document.createElement('script');
inter.src = url + '/NDFormsClientInterfaceHtml5.js?v=' + date;
document.head.appendChild(inter);
let canvas = document.createElement('script');
canvas.src = url + '/canvasinput.js?v=' + date;
document.head.appendChild(canvas);
//load responsive scripts
canvas.onload = function () {
let responsive = document.createElement('script');
responsive.src = url + '/NDeForms.js?v=' + date;
document.head.appendChild(responsive);
};
let calendar = document.createElement('link');
canvas.href = url + '/calendar.css?v=' + date;
canvas.rel = 'stylesheet';
document.head.appendChild(calendar);
};
document.head.appendChild(helpers);
} catch (ex) {
alert('Scrip load of version ' + version + ' exited with: ' + ex + ' ' + ex.stack);
}
};
3) Add the call function
As part of the example, add a button on your web page which will open the e-Form and then it loads scripts. After the button is pressed, the latest scripts will be loaded since the desired script version has not yet been set as metadata on the e-Form template.
<button onclick="ImportNDScriptsByMetadata('56B440C5-D56F-4895-8376-E3DC2F7D1494', 20)">Open form</button>
The page after the change:
<!doctype html>
<html>
<head>
<script src="jquery-1.11.3.min.js"></script>
<script src="jquery.signalR-2.2.2.min.js"></script>
<script src="YOURDOMAIN/FormsHub2/signalr/hubs"></script>
<script src="custom.js">
</head>
<body>
<div style="position:relative;">
<button onclick="ImportNDScriptsByMetadata('56B440C5-D56F-4895-8376-E3DC2F7D1494', 20)">Open form</button>
<input type="hidden" id="eFormsHubUrl" value="YOURDOMAIN/FormsHub2/signalr" />
<canvas id="formHolder" width="1000" height="600" DefaultFormUid="8655F819-2AE3-4F67-B326-26B681476EEB" DefaultFormVersion="null" FormStretch="Resize" WCFCompilerURL="YOURDOMAIN/FormServer/RuntimeService.svc" DefaultCulture="en-US" EnableDebugLog="true" ></canvas>
</div>
</body>
</html>
4) Add required Metadata on the e-Form
MetaData entries can be added, or edited inside the MetaData editor. Editor can be opened by selecting Edit -> Metadata... inside the Designer application menu or open form's context menu and select "Metadata..." from there.
Freshly opened MEtadataEditor looks like this:
5) Add new MetaData entry
Add new entry with the name from the step number 2 (custom function example) and set script version as value. If version is not set, then latest scripts will be loaded.
6) It's DONE!
The form will be loaded with script version 1.0.5.48 on the button click.
Full example to download HERE.