Renderer custom initialization

eForms Renderer consists from the div container and it's content (canvas and hidden input). Hidden input named "eFormsHubUrl" holds url of the eForms hub and the canvas which renders forms.

In case you are building dynamic web application which builds the html markup in the browser, then in case when the eForms renderer markup is added dynamically into the page by a Javascript code it is necessary to initialize eForms framework manually. This document describes, how to achieve it with an example.

Please note that functionality of manual initialization is supported from renderer version 1.0.5.10.

The following example shows the structure of the eForms renderer required markup:

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

The following table describes eForms renderer canvas attributes:

Attribute	Value example	Description
defaultformuid	1D190F2C-9BD1-4EE1-8961-15892533AD2A	Sets the default form that will be automatically loaded inside the canvas. This is an optional attribute.
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.
defaulculture	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 server service.

The example below uses onclick event of the button to generate the markup of the eForms renderer in the page (implemented by the hubStart function). HubStart function calls eForms.hubInit on the end in order to initialize eForms framework and establish eForms hub server connection. Once the initialization is completed, eForms factory calls your implementation of the OnFormRendererReady event handler.

//generates HTML DOM and starts FormsHub
function hubStart() {
    //generate div container
    const divContainer = document.createElement('div');
    document.body.appendChild(divContainer);

   //generate canvas
   const canvas = document.createElement('canvas');
   id = 'formHolder';

   //add attributes
   let att = document.createAttribute('FormStretch');
   att.value = 'Resize';
   canvas.setAttributeNode(att); 

   att = document.createAttribute('WCFCompilerURL');
   att.value = 'https://forms.neurodot-consulting.com/FormServer/RuntimeService.svc';
   canvas.setAttributeNode(att);

   //append canvas inside container
   divContainer.appendChild(canvas);

   //init hub
   eForms.hubInit('https://forms.neurodot-consulting.com/FormsHub2/signalr');
}

//alert me when form is ready
const alertReady = function () {
    alert('Form loaded');
}

//when hub connection is done and form renderer is ready
OnFormRendererReady = function () {
    OpenFormTemplate('formHolder', '93856EB1-73C4-4033-B4C5-4C69AB556D9E', version, null, alertReady , null);
};


<button onclick="hubStart();">Init hub</button>

Basic eForms factory events:

Function	Description
OnProcessStart()	When code-behind is being hit this function is called. Inside this function can be specified what will happen on client side when renderer is loading or waiting for server response. Loading dialogue can be shown for example.
OnProcessEnd()	This function is being hit when server-side work (event handling) is done. This function can hide loading dialogue for example.
OnRendererError(msg, code)	Inside this function can be handled server side exceptions. Show default error message instead of whole error or do some log stuff etc.
OnFormRendererReady()	This function is being hit on hub connection done event. Inside this function can be decided what will happen or be loaded when client connection is established.
OnJSLocalization(cultCode)	The function is called immediately after form culture has been changed. This function can be used for script localizations and logic that will happen after culture change.

Posted by Neurodot on 22 Oct 2018