Integrating the Web SDK editor

The Web SDK Editor has an API that includes properties, methods, events, and commands.

Two methods deserve special comment: load and store. A typical host application exchanges drawing data with the Web SDK Editor using these methods.

The host application is responsible for storing and managing drawings created by the Web SDK Editor. If your application uses a database to store incident report information, define a "drawing data" field in your incident data table. This field will hold the SVG diagrams that are created by the editor and returned by the editor's store method. The diagram data is UTF-8 text in SVG format. SVG is a W3C standard and the resulting diagrams can be embedded directly into an HTML 5 application or can be displayed in any container that supports the SVG format. The sample programs supplied with the Web SDK illustrate the techniques used to move data between a server-side application and the Web SDK Editor.

Host web page requirements and recommendations

The Web SDK Editor is dependent on features implemented in HTML 5. The page in your application that hosts the editor must begin with <!DOCTYPE html>.
The <head> section of your page must include the meta tag <meta charset="utf-8">. Diagram text may contain Unicode characters. Text rendering problems may occur if this tag is omitted.
To ensure that editor works correctly in Internet Explorer, include: <meta http-equiv="x-ua-compatible" content="IE=Edge"> as the first line in the head section of your page. If this tag is omitted Internet Explorer may render the page in quirks mode if it detects that your page is being served from an intranet site.
Add a script tag to include the Web SDK Editor on the page:

<script src="http://www.example.com/static/DiagramEditor.js" data-diagram-editor-global="__editor"></script>

Note that the Web SDK Editor files must be served to consuming browsers by your web server. The editor will not run off the file system or the Web SDK sample server.

You must copy the files in the folder <<Web SDK SDK install directory>>/client to an appropriate location on your web front-end server and configure your server to serve up these files. For the sample script tag above, the editor files are being served via <http://www.example.com/static.

The data-diagram-editor-global attribute defines the name of a global variable which will contain the constructor used to create a new editor instance. This can be any valid JavaScript variable name that makes sense in your application's global name space.

Localization Notes:
The data-diagram-editor-locale attribute defines the country code of the language you wish to use. If English is desired, you can omit this attribute as it is the default. For inquries about the languages we currently support you can contact us at [email protected].

The following example enables Italian:

<script src="http://www.example.com/static/DiagramEditor.js" data-diagram-editor-global="__editor" data-diagram-editor-locale="it"></script>

Instantiate the Web Editor and start it up:


<script type="text/javascript">
	// Startup the editor after the page is loaded.
	$(window).on('load', function () {
		// Create the editor and place it in the DOM node with id = "editor-node".
		editor = new window.__editor(undefined, document.getElementById('editor-node'));

		// Startup the editor, defining the web service URL, user id, and license id.
		editor.startup({
			serviceUrl: 'http://www.example.com/REST',
			licenseId: '12345678', // Replace with your license ID.
			userId: 'user-id'      // Use a distinct id for every user in your system.
		});
	}
</script>

Server requirements

The web server that hosts the Web SDK editor must be configured to support these mime types:

image/svg+xml(.svg)
application/font-woff(.woff)
application/json(.json)

Please refer to your web server's documentation for information on mime type configuration.

Sample Applications

Sample web applications that demonstrate the use of the Web SDK (including the HTML items listed above) can be found at:

<<Web SDK SDK install directory>>/server/samples