1. Building Responsive Applications with Visual Builder Studio
  2. Develop Applications
  3. Work with Variables and Types
  4. Create Types
  5. Create a Custom Type

Create a Custom Type

Custom types can be used to define the structure of any variable. Create a custom type when you want a type that defines an array or an object, and you want to individually add the attributes that define the type’s data structure. You can also create a custom type to define a list of enumeration values.

Create a Custom Object or Array

You create a custom object when you want a type to define an object that contains properties and a custom array when you want a type to store multiple variables of the same type.

To create a custom object or array:
  1. Select your application, flow, or page artifact in the Navigator.
  2. Click the Types tab in the Designer to open the Types editor.

    The Types editor displays all the types defined for the artifact.


    Description of var-type-responsetype.png follows
    Description of the illustration var-type-responsetype.png
  3. Click + Type and select Custom in the menu.
  4. Give the type a unique name and select the object or array as the type.
    • To create a custom object (for example, an addressType that defines the fields of an address), select Object. An object type can also contain nested arrays.
    • To create a custom array (for example, a customerAddresses type that defines an array of addresses), select Array.

      Arrays are defined the same way as objects, but the object type is inside an array. Arrays can have nested objects or arrays as well.

    Click Create.

    The new type is added to the list in the Types editor. You now define the structure by adding attributes.

  5. In the Types editor, click Add Field next to the new type to add an attribute.
  6. Enter the name and select a type for the new attribute. Click Create.
    You can select Create & New if you want to immediately add another attribute to the type.
You can continue to refine the data structure of the type by adding attributes.
Description of custom-type-object-array.png follows
Description of the illustration custom-type-object-array.png

You can view the type's usage information under Usages in the Properties pane (for example, which variables are based on it). Click a usage to readily navigate there.

Create a Custom Enumeration

You create an enumerated type when you want to list—or enumerate—permitted values. Enumerations are useful for variables that have a small set of possible values and are usually used to declare different options (say, a list of cities) or actions (like up, down, left, and right).

For example, to specify a list of cities in California, ordered by population, your enumerators could be Los Angeles, San Diego, San Jose, and San Francisco, belonging to an enumerated type named cityType. If a variable cityVar is declared with cityType as its data type, a user can assign any of those four values to the variable.

Defining an enumeration as a type lets you refer to the enumeration values as well as reuse the type in multiple places.

To create an enumerated type:

  1. Select your application, flow, or page artifact in the Navigator.
  2. Click the Types tab in the Designer to open the Types editor.
  3. Click + Type and select Custom in the menu.
  4. Give the type a unique name and select Enum. Click Create.

    The new enum type is added to the list in the Types editor.
    Description of enum-type.png follows
    Description of the illustration enum-type.png

  5. Update the type's properties in the Properties pane to specify the type of enum and its values.
    1. Select the Enum Type, either number or string.
    2. Select the Require Enum Value check box if you want to specify your enum values as named values.

      If you choose not to select this option, your enum type's JSON declaration uses a simpler, more intuitive definition. This means that for a number type enumerator, the values property uses an array of keys, instead of an object. For a string type enumerator, each enum value equals its key. Here are two examples:

      Enum Type Shortened Declaration Equivalent Declaration
      Number 
      "directions": {
  "enumType": "number",
  "values": [
    "up",
    "down",
    "left",
    "right"
  ]
}
      		 
      "directions": {
  "enumType": "number",
  "values": {
    "up": 0,
    "down": 1,
    "left": 2,
    "right": 3
  }
}
      String 
      "cityType": {
  "enumType": "string",
  "values": [
    "LosAngeles",
    "SanDiego",
    "SanFrancisco",
    "SanJose"
  ]
}
      		 
      "cityType": {
  "enumType": "string",
  "values": {
    "LosAngeles":  "LosAngeles",
    "SanDiego": "SanDiego",
    "SanFrancisco": "SanFrancisco",
    "SanJose": "SanJose"
  }
}
    3. Click Add next to Enum Values and add your list of enumeration values in the order you want them to show.

      You can only specify a string or a number. Only literal values can be specified as values; expressions are not allowed.

      You can edit and delete the enumeration values after they've been added.
      Description of enum-type-values.png follows
      Description of the illustration enum-type-values.png

After you've defined your enumerated type, create a variable with its date type set to this enum type. You can also specify a particular value as the variable's default:
Description of enum-type-var-default.png follows
Description of the illustration enum-type-var-default.png

Once the default value is selected, an expression that represents the selected value is added to the page's JSON, for example:
{ 
...
  "variables": {
    "cityVar": {
      "type": "cityType",
      "defaultValue": "{{ $enums.cityType.SanFrancisco }}"
    }
The actual value is determined at runtime when the expression is evaluated.