Edit the JavaScript File

The JavaScript file provides an AngularJS definition of your complex Element and allows you to define the behaviour of the Element. You can use the JavaScript files for the standard Digitise Forms Elements supplied with Form Studio as a guide when creating new Elements. The Text Box and Button Elements are simple Elements and their JavaScript files are a good place to start.

For example, the Text Box JavaScript file starts with the following lines:

(function ()

{

"use strict";

var UNIQUE_ID = 1;

var localPath = (function ()

{

var scripts = document.getElementsByTagName("script");

var thisScript = scripts[scripts.length - 1].src;

return thisScript.substring(0, thisScript.lastIndexOf("/") + 1);

})();

var app = angular.module("app")

These lines are standard across Digitise Forms Elements and should generally be included as they are shown here, although some of the standard Elements have a small number of additional lines here - for example, the Slider Element includes a separate module containing its main code and that is imported here and the Address Finder Element includes some additional code which it needs to run in order to operate as required.

Following these lines, you will find the directive:

.directive("ndlTextbox", ['$compile', function ($compile)

{

return {

restrict: "E", // E = element, A = attribute, C = class, M = comment

templateUrl: localPath + "ndl-textbox.html",

require: '^form',

transclude: true,

scope:

{

UNIQUE_ID: "&",

placeholder: "@",

⁝

.directive("ndlTextbox",

You will need to replace ndlTextbox with the unique identifier name you have assigned to your Element. This is the name you have used for the Element's folder and files but should be converted to camel case when inserted here, e.g. using the Text Box example, the Text Box's unique identifier is ndl-textbox and this is converted to ndlTextbox here.

 

templateUrl: localPath+"ndl-textbox.html",

You will need to edit this line and replace ndl-textbox.html with the name of your Element's HTML file. This should be entered exactly as the file is named.

 

scope:

Within this section you need to specify the properties you want your new Element to have and define the type of property. The proprieties defined in the config.json file should all be repeated here and there are some additional properties which may be required. You must include a UNIQUE_ID property with a type of "&".

For each property you need to include a name:value pair specifying <name of the property>:<type>. The type can be one of the following values:

@ - generally this type is used for properties which aren't mappable to a Datasource. Values for these properties can be set from within Form Studio, but the value can't be read externally, e.g. from within a custom JavaScript function used within an Element's Event property.

= - use this type for properties which are mappable to a Datasource or where you want to expose the property so that it can be accessed within custom JavaScript functions, such as validation and Event scripts. The '=' type sets up a two-way binding for the property.

& - use with the UNIQUE_ID property and Event properties.

 

If you want to use the Disabled property set within Form Studio you will need to include the following property within the scope member:

ndlDisabled:"=",

If you want the Element to allow validation, you will need to include the following properties within the scope member:

ndlSubmitted: "=",

ndlRequired: "=",

ndlErrorMessages: "=",

ndlValidationAttributes: "@",

ndlControl: "=",

ndlErrormessageStyle: "="

 

Following the scope member, you will find a link member. The code within this section is run once when the form loads. The link sections for all Elements within the form are run at this time as the Elements are initialised on the form. The code will be run at runtime and when a project is loaded into Form Studio.

If you want the Element to support validation, generally you will need to include the following code within the link member:

if (scope.ndlValidationAttributes != null) {

var input = $(elem).find("input");

var obj = $.parseJSON(scope.ndlValidationAttributes);

if (obj.length > 0) {

obj.forEach(function (val, index, array) {

$(input).attr(val.a, val.v);

})

$compile(elem, null, 0)(scope);

}

}

Note however, that there may be some differences within the standard Elements when it comes to implementing validation so we suggest you look at the standard Elements' JavaScript files for examples.

In addition to validation, you can add any additional JavaScript code you want to be run when the Element is initialised within the link section.

If you want to add more advanced functionality, you can do this by creating an AngularJS controller - once again we suggest you look at the standard Digitise Forms Elements for examples.

 

There are no differences between creating the JavaScript file for a simple or a complex Element.