Introduction to Data Types and Structures

In this article, you'll learn how the Unqork Designer Platform stores data. At the basic level, the reason you build your application is to collect and use information. As you create applications, the components you use to collect information affect how information is stored behind the scenes.

The Unqork Designer Platform uses JavaScript Object Notation (JSON) files to store and send data. In this article, you'll learn about data types and basic data structures in JavaScript. You'll understand the relationship between field types and data types and how these operate in Unqork components. Once you understand these relationships, you can ensure you select the appropriate components for your application.

Data Types

Data types are a way to classify data. There are several different data types in JavaScript. The three data types you'll see with the Primary and Secondary Fields include:

• String

• Number

• Boolean

String (Text)

The string data type is the one you often see in the Unqork Designer Platform. A few Unqork components that store data as strings are the Text Field, Text Area, Date Input, Radio Buttons, and Phone Number components.

Sometimes you see strings referred to as text. But this doesn't mean strings can only contain letters. Data stored as a string can include numbers, letters, symbols, and spaces. Strings can range from a few characters to entire paragraphs.

String values display inside of double quotes in JSON. For example:

When an end-user types a number into a component that stores data as a string, the number does not store as a number. The number may appear to be a number, but the computer cannot use it to complete calculations. For example, the string value "10" is as much a number as the string value "cat". To store a number as a number value, you must use a component that supports the JavaScript number data type.

Number

The number data type is a data type specific to numbers. For example, the word ten isn't classified as a number, but the number 10 is a number data type. There are different types of numerical data, including integers and decimals. Integers are whole numbers, like 1, 2, or 3. Decimals are numbers with a decimal place, like 1.5 or 3.79.

The Number component has a Don't Allow Decimals setting limit an end-user's entry. If you only want to accept integer values, set the Don't Allow Decimals toggle to (ON).

Only the Number component supports the number data type. Even if your end-user types a number into a Text Field, that data is stored as a string. As a best practice, always use a Number component when you collect or validate numerical data.

Let's look at how a number entered in a Number component, with the Property ID of number, displays in the JSON file. Notice how numbers are stored without double quotes. Below that value is the same number entered in a Text Field component called textfieldNumber. Entering a number in a Text Field component stores the number as a string in double quotes.

Boolean (True/False)

The Boolean data type has only two possible values: true or false. Unqork only uses this data type in the Single Checkbox component. If you think about the possible states of a checkbox (selected or clear), this makes sense. Selecting the  checkbox stores as true and clearing the component stores as false.

It's important to note that the string value "true" isn't the same as the Boolean value true. Typing true into a Text Field does not create the same data as selecting a Single Checkbox component.

Let's look at another comparison in the JSON file. singleCheckbox shows a Boolean value true from a Single Checkbox component. textFieldTrue shows how typing true into a Text Field is stored as a string.

Data Structures

Now that you understand the different data types, let's look at data structures. Data structures are how data gets stored and organized in JavaScript. There are four basic data structures in the Unqork Designer Platform:

• Key/value pairs

• Objects

• Arrays

• Tables

Different components use different data structures. The data structure used depends on what data each field creates or collects.

Key/Value Pairs

Key/value pairs are the simplest data structure. They're also one of the most common data structures in your submission data. Most of the Primary and Secondary Fields store data as a key/value pair. Look at an example of two fields, a Text Field and Number component:

The keys in each key/value pair correspond to the Property IDs of the Name (applicantName) and Age (age) fields. The values in each key/value pair are the values entered in Express View.

Components that store data using key/value pairs include the Text Field, Text Area, Hidden, Phone Number, and Radio Buttons components.

Objects

An object is a type of data structure that represents a single, self-contained entity. The object acts as a container for the characteristics of that entity. These characteristics are stored as key/value pairs in the object. The value of one of those key/value pairs can itself be an object or an array.

One component that uses objects to store data is the Address Search component. The Address Search component serves as an example for object storage:

JSON uses curly braces ({...}) to denote objects.

You can see that the data entered in the Address Search component when in Express View is stored as an object. addressSearch is the Property ID for that Address Search component.

Here's what this looks like when you expand the object:

Notice that the object addressSearch actually contains multiple key/value pairs. addressSearch is a single, self-contained entity. The address information displayed is the information the end-user enters in Express View. But the component actually stores individual values for each address field.

Arrays

Arrays are a way to group related elements. Arrays can contain values, objects, and even other arrays. A key feature of the array data structure is that arrays use indexing. Indexing is a way to assign an index number to each element in the array. This index gives each element a specific position in the array for easy reference to the values.

In arrays, the index numbering starts at 0. So, the first element in an array has an index number of 0.

Take a look at this example of a Multi-Select Dropdown component that stores data as an array. In the component's settings,  the Allow Multiple Selections toggle is set to   (ON). When the end-user selects all five options from the drop-down in Express View, from most to least favorite,  the following displays in the DevTools Console:

JSON denotes arrays using square brackets ([...]).

Notice the (5) after the rankMulti key. This tells you the rankMulti array has five values. Expanding the array, you can see indexing in action. Index position 0 shows the first fruit selected, watermelon. Position 1 shows the second fruit selected, and position 2 shows the third fruit. Indexing helps preserve the order of your end-user's selections from the drop-down.

Tables

In Unqork, a table is an array of objects. As the name suggests, an array of objects is an array that holds objects as its array elements. You can use tables to help you visualize your data.

You can easily create data tables using the Data Table component. Using a Data Table lets you group and visualize data in multiple dimensions. That said, tables are not limited to one component.

Here are other places in Unqork where you'll find data structured as an array of objects:

• Dashboards.

• The response to the Plug-In component's List Submissions for a Dashboard API (application programming interface) call.

Let's look at an example of a Data Table called dtInfo that holds basic participant information. The table's two columns, A and B, are named firstName and age. Each row corresponds to a single participant's information. You can track each participant's information in two dimensions. The table layout also makes it easy to visualize the relationships between data.

Once you input this information, your data table stores it in a table. You can then view your table in your DevTools Console.

Here's how your data table stores your information: 

Data Types and Data Structures in Primary and Secondary Fields Components

These tables give an overview of the data types and structures each Primary and Secondary Field creates. You don't have to commit these tables to memory, but it's useful to start thinking about how different components store data. Understanding the relationship between field types and data helps you create applications in Unqork. This is especially true when you start working with Data & Event Processing components.

As an exercise, take a look at the tables below. Then, try to determine how data from each field displays in the DevTools Console.

Primary Fields

Secondary Fields