Visual Settings

Cloud Scripting enables you to create a personalized solution by customizing the visual appearance and textual content of such elements as:

Supported Fields

You can use the parameters from the following example to fetch your input data.

    type: update
    
    settings:
      prepopulate: URL
      fields:
        - showIf: object
          type: string
          inputType: string
          name: string
          default: string or localization object
          caption: string or localization object
          placeholder: string or localization object
          required: boolean
          vtype: string
          vtypeText: string or localization object
          regex: string for RegExp constructor
          regexText: string or localization object
          hideLabel: string
          id: string
          cls: string
          itemId: string     
    
    
    {
      "type": "update",
      "settings": {
        "prepopulate": "URL",
        "fields": [
          {
            "showIf": "object",
            "type": "string",
            "inputType": "string",
            "name": "string",
            "default": "string or localization object",
            "caption": "string or localization object",
            "placeholder": "string or localization object",
            "required": "boolean",
            "vtype": "string",
            "vtypeText": "string or localization object",
            "regex": "string for RegExp constructor",
            "regexText": "string or localization object",
            "hideLabel": "boolean",
            "id": "string",
            "cls": "string",
            "itemId": "string"
          }
        ]
      }
    }
    

where:

  • prepopulate [optional] - link to a script, that will fetch default field values
  • fields - array of fields that will be displayed in a custom form
    • showIf - shows/hides field by condition (applicable only to radio-fieldset field)
    • type [optional] - input field type. The default value is 'string'. Possible values:
    • inputType [optional] - type attribute of the input field (e.g. radio, text, password, file, etc.). The default value is 'text'. See more info on type attribute.
    • name - input field name, that can be used to get a parameter value through the ${settings.your_input_name} placeholder within scripts or manifests
    • default [optional] - default value for the input field
    • caption [optional] - field label
    • placeholder [optional] - used placeholders
    • required [optional] - possible values are 'true' & 'false'. If left empty, default value is 'true'.
    • regex [optional] - constructor for testing JavaScript RegExp object that refers to the field value, during validation. If test fails, the field will be marked as invalid using regexText. The default value is 'null'.
    • regexText [optional] - displays error message in case of regex test failure during validation. The default value is ' ' (blank space).
    • vtype [optional] - validation type name. Possible values:
      • alpha - keystroke filter mask applied to alpha input. The default value is '/[a-z_]/i'.
      • alphanum - keystroke filter mask applied to alphanumeric input. The default value is '/[a-z0-9_]/i'.
      • email - keystroke filter mask applied to email input. The default value is '/[a-z0-9_.-+\'@]/i'. See appropriate method for more information about complex email validation.
      • URL - keystroke filter mask applied to URL input
    • vtypeText [optional] - custom error message to be displayed instead of the default one, provided by vtype for this field. The default value is ' ' (blank space).

Note

The vtypeText parameter is applied only in case the vtype value is set, otherwise, it is ignored.

string

Basic text field.

string

    fields:
      - hideLabel: false
        type: string
        caption: string
        name: customString
    
    {
      "fields": [
        {
          "hideLabel": false,
          "type": "string",
          "caption": "string",
          "name": "customString"
        }
      ]
    }
    

where:

  • caption [optional] - field label
  • hideLabel [optional] [boolean] - shows/hides field label. Default value is 'false'.

text

Multiline text field.

text

    fields:
      - type: text
        caption: string
        hideLabel: false
    
    {
      "fields": [
        {
          "type": "string",
          "caption": "string",
          "hideLabel": false
        }
      ]
    }
    

where:

  • caption [optional] - field label
  • hideLabel[optional] [boolean] - hides field label. Default value is 'false'.

list

Drop-down list and a single-line textbox.

list

    fields:
      - type: list
        caption: string
        values:
          value1: hello
          value2: world
        hideLabel: false
        editable: true
    
    {
      "fields": [
        {
          "type": "list",
          "caption": "string",
          "values": {
            "value1": "hello",
            "value2": "world"
          },
          "hideLabel": false,
          "editable": true
        }
      ]
    }
    

where:

  • caption [optional] - field label
  • values - objects values ("key":"value")
  • hideLabel [optional] [boolean] - shows/hides field label. Default value is 'false'
  • editable [optional][boolean] - allows to input custom values. Default value is 'false'
  • default [optional]: key - sets the "key" which "value" will be displayed by default

There is an ability to make one list being dependent from another with dependsOn property.

  • dependsOn [optional] - specifies values dependence between two lists.

Thus, switching values in one list, the corresponding values are changed in another one. The values of the lists can be specified in non-strict and strict orders.

Non-strict order example:

    type: install
    name: Conditional filters for type "list"
    
    settings:
      fields:
        - caption: List 1
          type: list
          name: list1
          default: value1
          required: true
          values:        
            value1: one
            value2: two
            value3: three
    
        - caption: List 2
          type: list
          name: list2
          required: true      
          dependsOn:                 
            list1:
                value1:              
                  1: 1
                  one: one
                value2:    
                  2: 2
                  two: two
                value3:               
                  3: 3
                  three: three
    
    {
      "type": "install",
      "name": "JE-40567 [Cloud Scripting:Visual Settings] - conditional filters for type \"list\"",
      "settings": {
        "fields": [
          {
            "caption": "List 1",
            "type": "list",
            "name": "list1",
            "default": "value1",
            "required": true,
            "values": {
              "value1": "one",
              "value2": "two",
              "value3": "three"
            }
          },
          {
            "caption": "List 2",
            "type": "list",
            "name": "list2",
            "required": true,
            "dependsOn": {
              "list1": {
                "value1": {
                  "1": 1,
                  "one": "one"
                },
                "value2": {
                  "2": 2,
                  "two": "two"
                },
                "value3": {
                  "3": 3,
                  "three": "three"
                }
              }
            }
          }
        ]
      }
    }
    

Strict order example:

    type: install
    name: JE-40567 [Cloud Scripting:Visual Settings] - conditional filters for type "list"
    
    settings:
      fields:
        - caption: List 1
          type: list
          name: list1
          default: value1
          required: true
          values:        
            - value: value1
              caption: one
            - value: value2
              caption: two
            - value: value3
              caption: three
    
        - caption: List 2
          type: list
          name: list2
          required: true      
          dependsOn:                 
            list1:
                value1:
                  - value: 1
                    caption: 1
                  - value: ONE
                    caption: ONE              
                value2:    
                  - value: 2
                    caption: 2
                  - value: TWO
                    caption: TWO
                value3:               
                  - value: 3
                    caption: 3
                  - value: THREE
                    caption: THREE      
    
    {
      "type": "install",
      "name": "JE-40567 [Cloud Scripting:Visual Settings] - conditional filters for type \"list\"",
      "settings": {
        "fields": [
          {
            "caption": "List 1",
            "type": "list",
            "name": "list1",
            "default": "value1",
            "required": true,
            "values": [
              {
                "value": "value1",
                "caption": "one"
              },
              {
                "value": "value2",
                "caption": "two"
              },
              {
                "value": "value3",
                "caption": "three"
              }
            ]
          },
          {
            "caption": "List 2",
            "type": "list",
            "name": "list2",
            "required": true,
            "dependsOn": {
              "list1": {
                "value1": [
                  {
                    "value": 1,
                    "caption": 1
                  },
                  {
                    "value": "ONE",
                    "caption": "ONE"
                  }
                ],
                "value2": [
                  {
                    "value": 2,
                    "caption": 2
                  },
                  {
                    "value": "TWO",
                    "caption": "TWO"
                  }
                ],
                "value3": [
                  {
                    "value": 3,
                    "caption": 3
                  },
                  {
                    "value": "THREE",
                    "caption": "THREE"
                  }
                ]
              }
            }
          }
        ]
      }
    }
    

checkbox

Single checkbox field.

text

    fields:
      - type: checkbox
        caption: string
        value: true
        hideLabel: false
    
    {
      "fields": [
        {
          "type": "checkbox",
          "caption": "string",
          "value": true,
          "hideLabel": false
        }
      ]
    }
    

where:

  • caption [optional] - field label
  • value - enables or disables checkbox
  • hideLabel [optional][boolean] - shows/hides field label. Default value is 'false'.

radiolist

Radio elements grouping.

text

    fields:
      - type: radiolist
        caption: Radio List
        values:
          value1: hello
          value2: world
        hideLabel: false
    
    {
      "fields": [
        {
          "type": "radiolist",
          "caption": "Radio List",
          "values": {
            "value1": "hello",
            "value2": "world"
          },
          "hideLabel": false
        }
      ]
    }
    

where:

  • caption [optional] - field label
  • values - checkboxes ("key":"value")
  • hideLabel [optional][boolean] - shows/hides field label. Default value is 'false'.

radio-fieldset

Grouping of the radio elements with showIf function.

Note

The hideLabel boolean is always true for this field.

text

    fields:
      - type: radio-fieldset
        name: customName
        default: '1'
        values:
          1: hello
          2: world
        showIf:
          1:
            - hideLabel: false
              type: string
              caption: First String
              name: first
          2:
            - hideLabel: false
              type: string
              caption: Second String
              name: second
    
    {
      "fields": [
        {
          "type": "radio-fieldset",
          "name": "customName",
          "default": "1",
          "values": {
            "1": "hello",
            "2": "world"
          },
          "showIf": {
            "1": [
              {
                "hideLabel": false,
                "type": "string",
                "caption": "First String",
                "name": "first"
              }
            ],
            "2": [
              {
                "hideLabel": false,
                "type": "string",
                "caption": "Second String",
                "name": "second"
              }
            ]
          }
        }
      ]
    }
    

where:

  • name [required] - name of the radio-fieldset element (for other elements it’s not required)
  • default [optional] - field selected upon opening the form
  • values - checkboxes ("key":"value")
  • showIf - conditional object that shows predefined elements by clicking on the radio-fieldset elements. Predefined elements can vary.
  • hideLabel [optional] [boolean] - shows/hides field label. Default value is 'false'.
  • caption [optional] - field label

Also there is an ability to set an values order. It needs to be defined like an array of objects. For example:

    values:
      - value: 1
        caption: hello
      - value: 2
        caption: world
    
    {
       "values": [
           {
               "value": 1,
               "caption": "hello"
           },
           {
               "value": 2,
               "caption": "world"
           }
       ]
    }
    

dockertag

Field for displaying Docker tags within the list element.

text

    name: Cloud Scripting
    
    settings:
      fields:
      - type: dockertags
        name: tag
        values:
        - name: latest
        - name: first
    
    dockerImage:
      name: sych74/pokemongo-map
      registry: ''
      username: ''
      password: ''
    
    env: {}
    
    {
      "name": "Cloud Scripting",
      "settings": {
        "fields": [
          {
            "type": "dockertags",
            "name": "tag",
            "values": [
              {
                "name": "latest"
              },
              {
                "name": "first"
              }
            ]
          }
        ]
      },
      "dockerImage": {
        "name": "sych74/pokemongo-map",
        "registry": "",
        "username": "",
        "password": ""
      },
      "env": {}
    }
    

where:

  • name [required] - should have the 'tag' value
  • values [required] - Docker tag values (name: "tag_name" is required). By default, Docker image is pulled from the Docker Hub registry.
  • dockerImage - Docker image details
  • name - repository is required
  • registry, username, password [optional]
  • env - required object (can be empty)

compositefield

Compositefield is a container with specific functionality and structural components that constitute it as a block for application-oriented custom user interfaces.

compositefield

    fields:
      - pack: ''
        align: ''
        defaultMargins:
          top: 0
          right: 0
          bottom: 0
          left: 10
        defaultPadding: 0
        defaultFlex: 0
        caption: Compositefield
        type: compositefield
        name: compositefield
        items:
          - name: checkbox
            value: true
            type: checkbox
          - width: 50
            name: first
            type: string
          - width: 100
            name: latest
            type: string
    
    {
      "fields": [
        {
          "pack": "",
          "align": "",
          "defaultMargins": {
            "top": 0,
            "right": 0,
            "bottom": 0,
            "left": 10
          },
          "defaultPadding": 0,
          "defaultFlex": 0,
          "caption": "Compositefield",
          "type": "compositefield",
          "name": "compositefield",
          "items": [
            {
              "name": "checkbox",
              "value": true,
              "type": "checkbox"
            },
            {
              "width": 50,
              "name": "first",
              "type": "string"
            },
            {
              "width": 100,
              "name": "latest",
              "type": "string"
            }
          ]
        }
      ]
    }
    

where:

  • pack [optional] - manages the way items are packed together. Default value is 'start'. Possible values: 'start', 'center' and 'end'.
  • align [optional] - manages the way items are aligned. Default value is 'top'. Possible values: 'top', 'middle', 'stretch', 'stretchmax'.
  • defaultMargins [optional] - default margins for items. Default value is '0'.
  • defaultPadding [optional] - default paddings for items. Default value is '0'.
  • defaultFlex [optional] - horizontal flex for items
  • items - elements

slider

Slider element as a form field.

slider

    fields:
      - min: 0
        max: 10
        increment: 1
        useTips: true
        caption: Slider
        type: slider
        name: slider
    
    {
      "fields": [
        {
          "min": 0,
          "max": 10,
          "increment": 1,
          "useTips": true,
          "caption": "Slider",
          "type": "slider",
          "name": "slider"
        }
      ]
    }
    

where:

  • min - minimum slider value
  • max - maximum slider value
  • useTips - displaying tips for the value. Default value is 'true'.
  • caption [optional] - field label
  • name [optional] - name of the field

envlist

Account environments list expanded within a drop-down element.

envlist

    fields:
      - caption: Envlist
        editable: true
        valueField: appid
        type: envlist
        name: envlist
    
    {
      "fields": [
        {
          "caption": "Envlist",
          "editable": true,
          "valueField": "appid",
          "type": "envlist",
          "name": "envlist"
        }
      ]
    }
    
where:

  • caption [optional] - field label
  • name [optional] - name of the field
  • editable [optional][boolean] - enables/disables the envlist field editing. Default value is 'false'.
  • valueField [optional][string] - value from environment information, which will be sent to a server. Default value is 'domain'. Available values are:
    • iconCls - CSS class
    • isRunning - checking whether environment status is running
    • shortdomain - short environment domain name (without platform URL)
    • displayName - environment displayName
    • appid - unique environment ID

To perform actions on several environments the multiSelect option with related parameters should be used:

  • multiSelect [optional][boolean] - provides an ability to choose several environment at once
  • disableInactive [optional][boolean] - an ability to chose inactive environments in combo. The default value is 'true'
  • delimiter [optional][string] - a delimiter character to separate list data items. The default value is a comma ','
  • min [optional][number] - minimum number of selected environments, required to begin installation
  • max [optional][number] - maximum number of selected environments, exceeding this number doesn’t allow to begin installation

Example:

    type: install
    name: Multiselect for envlist adjustments
    
    settings:
      fields:
        - caption: Environments
          type: envlist
          name: envs
          min: 2
          max: 3
          required: true
          multiSelect: true
          delimiter: ","
    
    onInstall:
      log: ${settings.envs}
    
    {
      "type": "install",
      "name": "Multiselect for envlist adjustments",
      "settings": {
        "fields": [
          {
            "caption": "Environments",
            "type": "envlist",
            "name": "envs",
            "min": 2,
            "max": 3,
            "required": true,
            "multiSelect": true,
            "delimiter": ","
          }
        ]
      },
      "onInstall": {
        "log": "${settings.envs}"
      }
    }
    

regionlist

An available region list for a current account where new environments can be installed.

    fields:
      - caption: Second Env Region
        type: regionlist
        name: secondRegion
        disableInactive: true
        selectFirstAvailable: true
        message: unavailable region
        filter:
          type: ["vz6", "vz7"]
          name: .*-eu
          uniqueName: String
          displayName: Default Region
          domain: default_domain.com
          isEnabled: true
          isDefault: true
          isActive: true
          isRegionMigrationAllowed: true
          region: 1
    
    {
      "fields": [
        {
          "caption": "Second Env Region",
          "type": "regionlist",
          "name": "secondRegion",
          "disableInactive": true,
          "selectFirstAvailable": true,
          "message": "unavailable region",
          "filter": {
            "type": [
              "vz6",
              "vz7"
            ],
            "name": ".*-eu",
            "uniqueName": "default_region",
            "displayName": "Default Region",
            "domain": "default_domain.com",
            "isEnabled": true,
            "isDefault": true,
            "isActive": true,
            "isRegionMigrationAllowed": true,
            "region": 1
          }
        }
      ]
    }
    
where:

  • caption [optional] - field label
  • name - name of the field
  • disableInactive [boolean] - an ability to chose inactive regions in combo. The default value is 'true'
  • selectFirstAvailable - displaying a first available region in combo
  • message [optional] [string] - text to display after hover on disabled regions on expanded combo
  • filter *[optional]:
    • type - filtering regions by virtualization types in combo [possible options: PVC, PCS_STORAGE, VZ6, VZ7], vzTypes is an alias.
    • vzTypes - virtualization types
    • name [string] - filtering regions by name, name's part or expressions. uniqueName is an alias
    • uniqueName [string] - region unique name filtering
    • displayName [string] - filtering by region display name
    • domain [string] - filtering by region domain
    • isEnabled [boolean] - show only enabled regions
    • isDefault [boolean] - display only default region
    • isActive [boolean] - only active regions will be available in combo
    • isRegionMigrationAllowed [boolean] - display regions where migration is allowed
    • region [number] - filtering by region identifier

There is an ability to carry out actions on the environments in several regions at once with parameter multiSelect:true :

    type: install
    name: Multi-Regions Test
    
    settings:
      fields:
        caption: Regions
        type: regionlist
        multiSelect: true
        name: regions
        selectFirstAvailable: true
        delimiter: ','
        min: 2
        max: 2
    
    onInstall:
    - script: |
        return { 
          result: 0, 
          regions: '${settings.regions}'.split(',')
        };
    
    - set:
        region1: ${response.regions[0]}
        region2: ${response.regions[1]}
    
    - install:
        region: ${this.region1}
        envName: env1-${fn.random}
        jps:
          type: install
          name: Env 1
          nodes:
            nodeType: apache2
            cloudlets: 8
    
    - install:
        region: ${this.region2}
        envName: env2-${fn.random}
        jps:
          type: install
          name: Env 2
          nodes:
            nodeType: apache2
            cloudlets: 8
    
    {
      "type": "install",
      "name": "Multi-Regions Test",
      "settings": {
        "fields": {
          "caption": "Regions",
          "type": "regionlist",
          "multiSelect": true,
          "name": "regions",
          "selectFirstAvailable": true,
          "delimiter": ",",
          "min": 2,
          "max": 2
        }
      },
      "onInstall": [
        {
          "script": "return { \n  result: 0, \n  regions: '${settings.regions}'.split(',')\n};\n"
        },
        {
          "set": {
            "region1": "${response.regions[0]}",
            "region2": "${response.regions[1]}"
          }
        },
        {
          "install": {
            "region": "${this.region1}",
            "envName": "env1-${fn.random}",
            "jps": {
              "type": "install",
              "name": "Env 1",
              "nodes": {
                "nodeType": "apache2",
                "cloudlets": 8
              }
            }
          }
        },
        {
          "install": {
            "region": "${this.region2}",
            "envName": "env2-${fn.random}",
            "jps": {
              "type": "install",
              "name": "Env 2",
              "nodes": {
                "nodeType": "apache2",
                "cloudlets": 8
              }
            }
          }
        }
      ]
    }
    

envname

The field for displaying environment name, which comprises :

    fields:
      - caption: Env Name    
        type: envname
        randomName: true
        showFullDomain: true,
        dependsOn: regionFieldName
    
    {
      "fields": [
        {
          "caption": "Env Name",
          "type": "envname",
          "randomName": true,
          "showFullDomain": "true,",
          "dependsOn": "regionFieldName"
        }
      ]
    }
    

where: - caption [optional] - field label - region [optional] - region name. The default value is default user's region. - randomName [optional][boolean] - autogenerate default value (e.g. env-1234567...). The default value is 'true'. - showFullDomain [optional][boolean] - show region's domain next to the env name.The default value is 'true'. - dependsOn [optional]- specifies dependency on regionlist field.

The dependsOn property is used to handle the dependence between envname and regionlist parameters. Changing the Region field, the corresponding subdomain of the Environment field is revalidated and displayed respectively:

    type: install
    name: Conditional filters for type "list"
    
    settings:
      fields:    
        - caption: Region
          type: regionlist
          name: region
    
        - caption: Env Name    
          type: envname            
          dependsOn: region
    
    {
      "type": "install",
      "name": "Conditional filters for type \"list\"",
      "settings": {
        "fields": [
          {
            "caption": "Region",
            "type": "regionlist",
            "name": "region"
          },
          {
            "caption": "Env Name",
            "type": "envname",
            "dependsOn": "region"
          }
        ]
      }
    }
    

popupselector

(popup-selector is an alias)

Field for opening a pop-up window via POST request to any external service. It provides a possibility to pass additional parameters.

popupselector

    fields:
      - caption: Popupselector
        type: popupselector
        name: popupselector
        buttonText: Open
        url: http://{external url}
        popupWidth: 300
        popupHeight: 300
        popupCallbackEvent: handler
        params:
          first: 1
          second: 2
    
    {
      "fields": [
        {
          "caption": "Popupselector",
          "type": "popupselector",
          "name": "popupselector",
          "buttonText": "Open",
          "url": "http://{external url}",
          "popupWidth": 300,
          "popupHeight": 300,
          "popupCallbackEvent": "handler",
          "params": {
            "first": 1,
            "second": 2
          }
        }
      ]
    }
    

where:

  • caption [optional] - field label
  • name [optional] - name of the field
  • buttonText [optional] - button label
  • url [optional] - external source URL. The default link is to the current Jelastic Dashboard. New popup window is opened only via POST request.
  • popupWidth [optional] - width in pixels
  • popupHeight [optional] - height in pixels
  • popupCallbackEvent - event handler
  • params - parameters for sending in POST request to URL source
  • value - defined value which is filled in text field

The textfield value in popupselector element can be replaced by parameter from external url source. This parameter should be passed with popupCallbackEvent value. For example:

    type: update
    name: Return Action
    
    settings:
      fields:
        caption: Popupselector
        type: popupselector
        name: popupselector
        buttonText: Open
        value: '3'
        url: https://{external_source}/example
        popupWidth: 300
        popupHeight: 300
        popupCallbackEvent: click
        params:
          first: 1
          second: 2
    
    {
      "type": "update",
      "name": "Return Action",
      "settings": {
        "fields": {
          "caption": "Popupselector",
          "type": "popupselector",
          "name": "popupselector",
          "buttonText": "Open",
          "value": "3",
          "url": "https://{external_source}/example",
          "popupWidth": 300,
          "popupHeight": 300,
          "popupCallbackEvent": "click",
          "params": {
            "first": 1,
            "second": 2
          }
        }
      }
    }
    

In the example above, the external source should return a URL with such parameters as value and event. The event name is the same name as popupCallbackEvent in field description in manifest.

A full external resource link should be like in the example below:

http://{Jelastic_Platform_URL} + "fireevent?event=click&value=hello"

where:

  • Jelastic_Platform_URL - Jelastic Dashboard URL where manifest is executed
  • click - event name which is handled in manifest in popupCallbackEvent parameter
  • value - type is string. The textfield will be filled by it when button "Open" will be applied.

displayfield

(spacer is an alias)

Text field intended only for not validated and not submitted display.

displayfield

    fields:
      - caption: Displayfield
        type: displayfield
        name: displayfield
        markup: display
    
    {
      "fields": [
        {
          "caption": "Displayfield",
          "type": "displayfield",
          "name": "displayfield",
          "markup": "display"
        }
      ]
    }
    

where:

  • caption [optional] - field label
  • name [optional] - name of the field
  • markup - value to initialize the field's display. Default value is 'undefined'.

spinner

Enhanced input field for entering numeric values, with up/down buttons and arrow keys handling.

spinner

    fields:
      - type: spinner
        name: spinner
        caption: Spinner
        min: 1
        max: 10
        increment: 2
        decimalPrecision: ''
    
    {
      "fields": [
        {
          "type": "spinner",
          "name": "spinner",
          "caption": "Spinner",
          "min": 1,
          "max": 10,
          "increment": 2,
          "decimalPrecision": ""
        }
      ]
    }
    

where:

  • name [optional] - name of the field
  • caption [optional] - field label
  • min - minimum spinner value
  • max - maximum spinner value
  • increment - increment value
  • decimalPrecision - precision value

numberpicker

(number-picker is an alias)

Field that enables to select a number from a predefined range.

numberpicker

    fields:
      - type: numberpicker
        name: numberpicker
        caption: Numberpicker
        min: 3
        max: 10
        editable: true
    
    {
      "fields": [
        {
          "type": "numberpicker",
          "name": "numberpicker",
          "caption": "Numberpicker",
          "min": 3,
          "max": 10,
          "editable": true
        }
      ]
    }
    

where:

  • name [optional] - name of the field
  • caption [optional] - field label
  • min - minimum spinner value
  • max - maximum spinner value
  • editable [optional] [boolean] - enables/disables editing the numberpicker field. Default value is 'false'.

hostpicker

(host-picker is an alias)

Drop-down menu with environments hosts.

hostpicker

    fields:
      - type: hostpicker
        name: hostpicker
        caption: Hostpicker
        editable: true
        valueField: host
    
    {
      "fields": [
        {
          "type": "hostpicker",
          "name": "hostpicker",
          "caption": "Hostpicker",
          "editable": true,
          "valueField": "host"
        }
      ]
    }
    

where:

  • name [optional] - name of the field
  • caption [optional] - field label
  • editable [optional] [boolean] - enables/disables editing the envlist field. Default value is 'false'.
  • valueField [optional][string] - value from environment information, which will be sent to a server. Default value is 'domain'. Available values are:
    • iconCls - CSS class
    • isRunning - checking whether environment status is running
    • shortdomain - short environment domain name (without platform URL)
    • displayName - environment displayName
    • appid - unique environment ID

toggle

Toggle element is a switch between two values.

toggle

    fields:
      - type: toggle
        name: toggle
        caption: Toggle
        value: true
    
    {
      "fields": [
        {
          "type": "toggle",
          "name": "toggle",
          "caption": "Toggle",
          "value": true
        }
      ]
    }
    
where:

  • name [optional] - name of the field
  • caption [optional] - field label
  • value [boolean] - enables/disables toggle value. Default value is 'false'.

Dynamic filling of the manifest fields

Ability to dynamically determine UI in JPS manifest is accessible via onBeforeInit onBeforeInstall events.

Target Nodes

Target Nodes is an optional method that allows to define environments suitable for JPS installation. This method is available only for the update installation type.

Filtering for targetNodes can be performed by nodeType, nodeGroup, dockerOs, dockerName or dockerTag.

    type: update
    name: targetNodes
    
    targetNodes:
      nodeType:
      - "..."
      nodeGroup:
      - "..."
      dockerOs:
      - "..."
      dockerName:
      - "..."
      dockerTag:
      - "..."
    
    onInstall:
      createFile:
        nodeGroup: cp
        path: "/tmp/newFile"
    
    {
      "type": "update",
      "name": "targetNodes",
      "targetNodes": {
        "nodeType": [
          "..."
        ],
        "nodeGroup": [
          "..."
        ],
        "dockerOs": [
          "..."
        ],
        "dockerName": [
          "..."
        ],
        "dockerTag": [
          "..."
        ]
      },
      "onInstall": {
        "createFile": {
          "nodeGroup": "cp",
          "path": "/tmp/newFile"
        }
      }
    }
    
There are two possible ways to define targetNodes.

"nodeType": ["..."] - to set the required nodeTypes in an array

"nodeType": "..., ..." - to set the required nodeTypes being separated with commas

Example

Let’s suppose you have three environments with different topology.

target-nodes

Within these environments, the targetNodes filtering for JPS installation can be performed with the next example.

    type: update
    name: targetNodes
    
    targetNodes:
      nodeType: nginx, mysql5
    
    onInstall:
      createFile:
        nodeGroup: cp
        path: "/tmp/newFile"
    
    {
      "type": "update",
      "name": "targetNodes",
      "targetNodes": {
        "nodeType": "nginx, mysql5"
      },
      "onInstall": {
        "createFile": {
          "nodeGroup": "cp",
          "path": "/tmp/newFile"
        }
      }
    }
    
In this case, the filtering result will be the following.

TargetNodesFilter

Custom Menus

Menu is an expandable list within the Add-ons section, comprising operations that can be extended and adjusted by means of custom buttons.

new-menu

By default, this menu contains the Uninstall button. The rest of listed actions, if there are any, executes operations from the events settings.

The properties used for custom menus are the same as for custom buttons. However, the appropriate menu field (instead of buttons) should be specified to adjust functionality exactly within the menu list of the Add-ons plank.

Sample to set custom buttons within the menu list of the Add-ons plank.

    type: update
    name: Custom buttons
    
    targetNodes:
      nodeGroup: bl
    
    actions:
      - "..."
    
    menu:
      confirmText: Custom confirm text
      loadingText: Load text while waiting
      action: "{String}"
      caption: Configure
      successText: Configuration saved successfully!
      settings: config
      title: Title
      submitButtonText: Button Text
      logsPath: "/var/log/add-on-action.log"
      logsNodeGroup: cp
    
    {
      "type": "update",
      "name": "Custom buttons",
      "targetNodes": {
        "nodeGroup": "bl"
      },
      "actions": [
        "..."
      ],
      "menu": {
        "confirmText": "Custom confirm text",
        "loadingText": "Load text while waiting",
        "action": "{String}",
        "caption": "Configure",
        "successText": "Configuration saved successfully!",
        "settings": "config",
        "title": "Title",
        "submitButtonText": "Button Text",
        "logsPath": "/var/log/add-on-action.log",
        "logsNodeGroup": "cp"
      }
    }
    
Refer to the Custom Buttons section below for a detailed description on the parameters set with the current sample.

Custom Buttons

Custom buttons settings are intended for extending and adjusting functionality of planks within the Add-ons section. It can be accessed upon clicking the same-named button next to the required node.

custom-addon

Such buttons execute operations that are predefined within a JPS manifest.

traffic-distributor

Note

The JPS manifest should include the targetNodes field in order to be displayed within the Add-ons section after installation, otherwise, it will be hidden.

Templates

Sample to set buttons within the Add-ons plank.

    type: update
    name: Custom buttons
    
    targetNodes:
      nodeGroup: bl
    
    actions:
      - "..."
    
    buttons:
      - confirmText: Custom confirm text
        loadingText: Load text while waiting
        action: "{String}"
        caption: Configure
        successText: Configuration saved successfully!
        href: http://example.com/
    
    {
      "type": "update",
      "name": "Custom buttons",
      "targetNodes": {
        "nodeGroup": "bl"
      },
      "actions": [
        "..."
      ],
      "buttons": [
        {
          "confirmText": "Custom confirm text",
          "loadingText": "Load text while waiting",
          "action": "{String}",
          "caption": "Configure",
          "successText": "Configuration saved successfully!",
          "href": "http://example.com/"
        }
      ]
    }
    
where:

  • buttons - button parameters array
  • confirmText [optional] - custom confirmation text for users. Default value is 'Are you sure?'.

It will be displayed after clicking the appropriate button for an add-on. According to the code above, the text will be the following.

Confirm

  • loadingText [optional] - UI text to be displayed during loading and applying changes. Default value is 'Applying...'.

LoadingText

  • action [required] [string] - name of the custom action that will be executed. Custom action body structure is described in the actions section.
  • caption - title of the button

Caption

  • successText - message that appears once action is successfully performed

SuccessText

  • href [optional] - external link that is opened in a new browser tab and is executed only if the settings field is absent. In case of href execution, an action will not be carried out.

Another sample with additional configurations where parameters can be enabled only if the settings field is present.

    type: update
    name: Custom buttons
    
    targetNodes:
      nodeGroup: bl
    
    actions:
      - "..."
    
    buttons:
      - confirmText: Custom confirm text
        loadingText: Load text while waiting
        action: "{String}"
        caption: Configure
        successText: Configuration saved successfully!
        settings: config
        title: Title
        submitButtonText: Button Text
        logsPath: "/var/log/add-on-action.log"
        logsNodeGroup: cp
    
    {
      "type": "update",
      "name": "Custom buttons",
      "targetNodes": {
        "nodeGroup": "bl"
      },
      "actions": [
        "..."
      ],
      "buttons": [
        {
          "confirmText": "Custom confirm text",
          "loadingText": "Load text while waiting",
          "action": "{String}",
          "caption": "Configure",
          "successText": "Configuration saved successfully!",
          "settings": "config",
          "title": "Title",
          "submitButtonText": "Button Text",
          "logsPath": "/var/log/add-on-action.log",
          "logsNodeGroup": "cp"
        }
      ]
    }
    
where:

  • settings - custom form ID. Default is 'main'.
  • title - custom dialog title. If absent, caption will be applied.
  • submitButtonText - text for submission button in the opened dialog. Default value is 'Apply'.

SubmitButtonText

  • logsPath - path to a log file that is accessible via the Show Logs button

LogsPath

  • logsNodeGroup - nodeGroup layer the logging path should be opened for

Custom Settings

Settings section can include a few custom forms. Default settings form ID is 'main'.

Example

    type: update
    name: Custom buttons
    
    targetNodes:
      nodeGroup: bl
    
    actions:
      - "..."
    
    settings:
      main:
        fields:
        - type: text
          caption: Main form
      config:
        fields:
        - type: text
          caption: Custom form from button action
    
    buttons:
      - settings: config
        action: customAction
        caption: Configure
        submitButtonText: Button Text
        logsPath: "/var/lib/jelastic/keys/111"
    
    {
      "type": "update",
      "name": "Custom buttons",
      "targetNodes": {
        "nodeGroup": "bl"
      },
      "actions": [
        "..."
      ],
      "settings": {
        "main": {
          "fields": [
            {
              "type": "text",
              "caption": "Main form"
            }
          ]
        },
        "config": {
          "fields": [
            {
              "type": "text",
              "caption": "Custom form from button action"
            }
          ]
        }
      },
      "buttons": [
        {
          "settings": "config",
          "action": "customAction",
          "caption": "Configure",
          "submitButtonText": "Button Text",
          "logsPath": "/var/lib/jelastic/keys/111"
        }
      ]
    }
    
Here, the main settings form appears during installation process.

settingMain

config settings form appears after clicking the Configure button within the Add-ons section.

settingCustom

Success Text Customization

It is possible to customize the success text that is displayed upon successful installation either at the Dashboard, or via email notification. A success text can be defined as plain text or Markdown syntax. More details about Markdown syntax in Cloud Scripting here

  • Setting relative to the baseUrl link that points path to the README.md file for its content to be displayed within the success response.

      type: update
      name: Success Text first example
      baseUrl: https://github.com/jelastic-jps/minio/blob/master/
      
      onInstall:
        log: success text first example
      
      success: README.md
      
      {
          "type" : "update",
          "name" : "Success Text first example",
          "baseUrl" : "https://github.com/jelastic-jps/minio",
          "onInstall" : {
              "log" : "success text first example"
          },
          "success" : "README.md"
      }
      

  • Customizing the success response text by means of an external link.

      type: update
      name: Success Text Second Example
      
      onInstall:
        log: success Text Second Example
      
      success: https://github.com/jelastic-jps/lets-encrypt/raw/master/README.md
      
      {
        "type": "update",
        "name": "Success Text Second Example",
        "onInstall": {
          "log": "success Text Second Example"
        },
        "success": "https://github.com/jelastic-jps/lets-encrypt/raw/master/README.md"
      }
      

As it was mentioned above, the success response is distinguished between two values:

  • text displayed at the dashboard after installation is successfully conducted

    type: update
    name: Success Text Second Example
    
    onInstall:
      log: success Text Second Example
    
    success:
      text: https://github.com/jelastic-jps/lets-encrypt/raw/master/README.md
    
    {
      "type": "update",
      "name": "Success Text Second Example",
      "onInstall": {
        "log": "success Text Second Example"
      },
      "success": {
        "text": "https://github.com/jelastic-jps/lets-encrypt/raw/master/README.md"
      }
    }
    
- message delivered via email notifying about the successful installation
    type: update
    name: Success Text Test 4
    baseUrl: https://github.com/jelastic-jps/lets-encrypt
    
    onInstall:
      log: success text test 4
    
    success:
      email: README.md
      text:
        en: README.md
        ru: https://github.com/jelastic-jps/lets-encrypt/blob/master/README.md
    
    {
      "type": "update",
      "name": "Success Text Test 4",
      "baseUrl": "https://github.com/jelastic-jps/lets-encrypt",
      "onInstall": {
        "log": "success text test 4"
      },
      "success": {
        "email": "README.md",
        "text": {
          "en": "README.md",
          "ru": "https://github.com/jelastic-jps/lets-encrypt/blob/master/README.md"
        }
      }
    }
    

Email notification also can be customized in custom responses. In this case email value from handle custom response has a higher priority. For example:

    type: update
    name: Success Text Customization
    
    onInstall:
      return:
        result: success
        email: Custom email response text
    
    success: success!!
    
    {
      "type": "update",
      "name": "Success Text Customization",
      "onInstall": {
        "return": {
          "result": "success",
          "email": "Custom email response text"
        }
      },
      "success": "success!!"
    }
    

In the last example above, the localization functionality is applied, which depends upon the Jelastic Platform selected language.

Custom responses can be returned within return or script actions. More details about custom responses here.

Markdown Description

Markdown is a light language with plain text formatting syntax. This language is supported by Cloud Scripting technology to describe a description, success texts or show custom response texts. Cloud Scripting uses CommonMark implementation to convert Markdown syntax into html code. Therefore, there is a main supported Markdown tag list:

Style 1 Style 2 Result
*Italic* _Italic_ Italic
**Bold** __Bold__ Bold
# Heading 1 Heading 1
=========

Heading 1

## Heading 2 Heading 2
------------

Heading 2

[Link](https://jelastic.com) [Link][1]
.
.
.
[1]: https://jelastic.com
jelastic.com URL
![Image](https://example.com/logo.png) ![Image][1]
.
.
.
[1]: https://example.com/logo.png
Image
> Blockquote blockquote Blockquote
A paragraph.

A paragraph after 1 blank line.
A paragraph.

A paragraph after 1 blank line.
* List
* List
- List
- List
* List
* List
1. One
2. Two
3. Three
1) One
2) Two
3) Three
1. One
2. Two
3. Three
Horizontal Rule
---
Horizontal Rule
***
Horizontal Rule
horizontal-rule
``Inline code`` with backticks Inline code with backticks
```
print '3 backticks
or3 tildes'
```
~~~~
print '3 backticks
or 3 tildes'
~~~~
Block code

The elements visualization can be found on the screen below: markdown_tags

Source code for each of these elements is displayed below:

    type: update
    name: Markdown tags
    description: |
      *Italic* or _Italic_
      **Bold** or __Bold__
    
      # This is H1
      ## This is H2
      ##### This is H6
    
      [jelastic.com URL](https://jelastic.com)
    
      ![Jelastic](https://jelastic.com/wp-content/themes/salient/assets/img/logo.png)
    
      > Blockquote
    
      * List
    
      ---
    
      `Inline code` with backticks
    
      ```
      # code block
      print '3 backticks or'
      print 'indent 4 spaces'
      ```
    
    {
        "type": "update",
        "name": "Markdown tags",
        "description": "*Italic* or _Italic_    \n**Bold** or __Bold__  \n\n# This is H1   \n## This is H2  \n##### This is H6  \n\n[jelastic.com URL](https://jelastic.com)  \n\n![Jelastic](https://jelastic.com/wp-content/themes/salient/assets/img/logo.png)  \n\n> Blockquote  \n\n* List  \n\n---  \n\n`Inline code` with backticks   \n\n```\n# code block\nprint '3 backticks or'\nprint 'indent 4 spaces'\n```\n"
    }
    

More details about Markdown implementation can be found in CommonMark specification - CommonMark.


What's next?

v: 1.7.2