HTML5 Renderer website integration

1) Register scripts inside webpage heading (or anywhere else)

There are two ways of script library registration actually. First way is to put signalR scripts and renderer scripts in right order inside webpage.

Old way of script implementation:

<script src="YourServerAddress/Scripts/jquery.signalR-2.2.0.js" type="text/javascript">
<script src="YourServerAddress/Scripts/Helpers.js" type="text/javascript">
<script src="YourServerAddress/Scripts/NDFormsClientInterfaceHtml5.js">
<script src="YourServerAddress/Scripts/canvasinput.js" type="text/javascript">
<script src="YourServerAddress/signalr/hubs">
<!--OPTIONAL if not found inside Head tag than will be loaded automatically from Scripts folder-->
<link href="YourServerAddress/Scripts/calendar.css" rel="stylesheet">

Register MS SignalR
Register Helpers library
Register NDFormsClientInterfaceHtml5 library that contains all API functions and will start HUB inicialization.
Register canvas library
signalr/hubs is last library. This library is crucial because it contains whole HUBs API
lastly calendar widget styles are needed

Next way of implementation is little bit shorter.

New way of script implementation:

<script src="YourServerAddress/Scripts/eFormApi.js" type="text/javascript">
<script src="YourServerAddress/signalr/hubs">

eFormApi.js will load all JavaScript files automatically in the right order. All required files must be physically located inside the folder with the eFormApi library. Currently required files (JavaScript/CSS) and future files will be loaded into a page without future code changes.

2) Place canvas

Canvas element holds form structure and renders designed forms.

<div style="position:relative;">
            <input type="hidden" id="eFormsHubUrl" value="YourServerAddress/signalr" />
            <canvas id="formHolder" DefaultFormUid="93856EB1-73C4-4033-B4C5-4C69AB556D9E" width="1000" height="600" DefaultFormVersion="null" FormStretch="Resize" WCFCompilerURL="YourServerAddress/FormServer/RuntimeService.svc" DefaultCulture="en-US" EnableDebugLog="true">
</div>

The canvas is placed inside div along with hidden input that has MS SignalR url value. The canvas can be configured by its attribute values.

Canvas attributes table:

Attribute	String value	Description
defaultformuid	1D190F2C-9BD1-4EE1-8961-15892533AD2A	Sets the default form that will be automatically loaded inside the canvas.
defaultformversion	•null (or not defined) •page number	Sets the default version of the form instead of loading last one. If the attribute is not defined or „null“ than last form version will be loaded
defaultculture	en-US	This culture will be used as default. If the form has more than one culture than this one will be used.
enabledebuglog	false	If this attribute is true then all debug logs from renderer and formsHub will be shown inside browser‘s console.
formstretch	•Normal (or not defined) •Resize •Responsive	Sets the canvas dimensions behavior. If „Normal“ or not defined – the form content will addapt to the canvas dimensions. If „Resize“ – the canvas will adapt to the form dimensions. „Responsive“ is actually in progress feature. The form content will be responsive.
wcfcompilerurl	https://domain/FormServer/RuntimeService.svc	Sets url of the RuntimeService.svc

Posted by Neurodot on 12 Oct 2018