Using JSON

Navigation:  Widget Designer > Scripting > Object and Member Notation (dot syntax) >

Using JSON

prev main next

Navigation:  Widget Designer > Scripting > Object and Member Notation (dot syntax) >

Using JSON

prev main next

Please wait. Due to its content this page might take a while to load...

The previous chapters explained the Object and Member Notation in Widget Designer, this chapter will give you a quick overview of the JavaScript Object Notation, a format for easily storing, editing and exchanging data.

Additionally, you will learn how to make use of this format in your Widget Designer project.

What is JSON?

JSON, or JavaScript Object Notation, is a format designed for data exchange. It derived from JavaScript, but is by now also included in many other programming languages.

One of its advantages is that the stored data consists of human readable text and is based on a very simple and straight forward structure.

Each set of data consists of a key and a value, separated by a colon ":". Several sets can be separated by a comma "," and a collection of sets of data is called a JSON object, enclosed in curly brackets "{ }".

A key is always a string, enclosed in double quotation marks, a value can be one of the following types:

Number: Can be either an integer or a decimal number, exponential E notation is possible, too.

String: a sequence of characters, delimited with double quotation marks

Boolean: either one of the expressions true or false

Array: an ordered list of zero or more values of any type, delimited with square brackets "[ ]"

Map (Object): JSON objects are nestable, so an object can always contain another object, called map.

null: an empty value indicated with the expression null

White spaces, line feeds and tabs don't affect the functionality of the object, but  can be used to arrange code.

If you open the Widget Designer project file (.wdpj) with a text editor, you will see that the whole file consists of JSON data. You can easily read out information from this file concerning properties or settings, unless something is password protected or encrypted.



 "company": "Christie",

 "year_founded": 1929,

 "over_1000_employees": true,

 "products": {

         "media_server":"Pandoras Box",






How to use JSON in Widget Designer?

JSON is available as a global variable: simply right-click on the variable list, choose "Create > Json" and enter a name and a value. As a JSON object can be quite large and hard to overview, it might be easier to write the complete object down in a script window and then either copy and paste the whole text into the "Value" field, or directly assign the value via a script to an empty JSON variable.

Other than other variable types, the automatic type recognition for local variables is not available for the JSON type. You would have to type in a string with the correct format (pay attention to use the single quotation marks ' '  to indicate the string!) and convert it via the .ToJson member:

var participant1 = '{




 "languages": {








Now you can make use of the various JSON members to update, retrieve and use the stored data. When accessing nested maps and arrays, the location is defined by a dot-separated path:

"participant1.Count("languages")" returns "4", "participant1.Count("languages.other")" returns "2".


It is even possible to store and readout data as a Session value by using the Context object:

Context.Session.Value("JSON_data") = participant1

Label1.Text = Context.Session.Value("JSON_data").ToJson.GetString("name")

-> Label1 shows "Jonathan"

For more detailed information on JSON and its syntax, please refer to:


What to Bear in Mind When Using JSON in WD

It is important to keep the JSON in the correct format. As this data type is still based on a string for entering values, you usually do not get an error message when you create a faulty JSON, but only when you try to use it. This is, where the different JSON members can be helpful. They enable you to readout and edit elements in the JSON comfortably without editing the text directly, which eliminates sources for syntax errors.

Whenever you define an empty JSON variable in WD, the curly brackets need to be included to meet the JSON requirements. This means that a local variable needs to be initialized like this:

var jsonLocal = '{}'.ToJson


If you have a global JSON variable without value, you still need to add the brackets. This can happen either with entering them in the Create / Edit dialog of the variable, or with the same script:

jsonGlobal = '{}'.ToJson


Not using the brackets will result in an invalid format of the variable and can cause issues.

When you fill your JSON with values, you need to pay attention to the correct format as well, any structures not confirming the JSON specifications can cause errors. Contents like the one shown below are not compatible as the necessary key/value assignment is not given:

var jsonLocal = '{0}'.ToJson