Survey123WebFormOptions

Class

Survey123 web form options.

Inheritance: Survey123WebFormOptionsSurvey123JsApiCommonOptions

Properties

PropertyTypeNotes
autoRefresh
 optional 
number

Enable auto-refresh the survey after submit successfully. You can set autoRefresh=3 which will refresh the survey after 3 seconds.

string

A valid Client ID for your domain registered on ArcGIS for Developers website.

any

The HTML element that contains the web form, typically a DIV.

any

Deprecated in version 3.14, use questionValue instead.

globalId
 optional 
string

globalId parameter. Supported with version ≥ 3.9

hideElements
 optional 
string[]

Elements can be set to be hidden, including navbar, theme, header, description, footer and submit. For example:

Use dark colors for code blocksCopy
 
1
["navbar","header","description"]
host
 optional 
string

Pass the host URL on IE and Edge to send messages to the parent domain.

boolean

Set this property to true and the web form will not send data to your feature service.

string

The ItemId of the web form you want to load.

jsApiVersion
 optional 
string

Set the version the Survey123 Web App JavaScript API. Set the value to 'latest' to use the latest version of the API.

mode
 optional 
string

Sets the mode of the web form. Valid values are edit, which sets the survey to edit an existing entry rather than create one, and view, which opens an existing entry in read-only mode, and copy, which will create a new web form that is populated with the contents from an existing entry. When setting the mode, the globalId parameter (version ≥ 3.9) or objectId(version ≤ 3.9) parameter must also be provided.

objectId
 optional 
string

objectId parameter. Supported with version ≤ 3.9

onFormLoaded
 optional 
OnFormLoaded

Invokes a callback function when the form is loaded. The callback parameters include:

Use dark colors for code blocksCopy
     
1
2
3
4
5
{
  form: Form;
  contentHeight: number;
  webformVersion?: string;
}
onFormResized
 optional 
OnFormResized

Invokes a callback function when the form is resized.

onFormSubmitted
 optional 
OnFormSubmitted

Invokes a callback function when the form is submitted. For example:

Use dark colors for code blocksCopy
        
1
2
3
4
5
6
7
8
 var webform = new Survey123WebForm({
    clientId: "ABC1234567890",
    container: "formDiv",
    itemId: "",
    onFormSubmitted: (data) => {
      console.log('Form submitted: ', data.surveyFeatureSet);
    }
 });
OnQuestionValueChanged

Invokes a callback function when the values in your form change. The callback parameters include:

Use dark colors for code blocksCopy
       
1
2
3
4
5
6
7
{
  field: string;             // question name
  value: any;                // answer for the question name
  path?: string;             // absolute path
  repeatIndex?: number;      // repeatIndex if the question is in a repeat
  formId?: string;           // feature layer id
}
portalUrl
 optional 
string

The URL of your ArcGIS portal. If left empty, defaults to https://www.arcgis.com

questionValue
 optional 
any

Allows you to set the question values on form loading. For example:

Use dark colors for code blocksCopy
 
1
{field_0: 'value1', field_1: 'value2'}
token
 optional 
string

Required if you work with private surveys.

version
 optional 
string

Version lock on a specific version. Specify 'latest' to always use the latest version of the web app, otherwise it will honor the version setting of the survey. For example:

Use dark colors for code blocksCopy
 
1
version: 'latest'
width
 optional 
number

Takes a number in pixels. Controls the width of the survey and a value smaller than 660 will be ignored.

autoRefresh optional

autoRefresh: number

Enable auto-refresh the survey after submit successfully. You can set autoRefresh=3 which will refresh the survey after 3 seconds.

clientId

clientId: string

A valid Client ID for your domain registered on ArcGIS for Developers website.

container

container: any

The HTML element that contains the web form, typically a DIV.

defaultQuestionValue optional

defaultQuestionValue: any

Deprecated in version 3.14, use questionValue instead.

globalId optional

globalId: string

globalId parameter. Supported with version ≥ 3.9

hideElements optional

hideElements: string[]

Elements can be set to be hidden, including navbar, theme, header, description, footer and submit. For example:

Use dark colors for code blocksCopy
 
1
["navbar","header","description"]

You can also hide questions within your survey. For example:

Use dark colors for code blocksCopy
 
1
['field: yourQuestionName']

host optional

host: string

Pass the host URL on IE and Edge to send messages to the parent domain.

isDisabledSubmitToFeatureService optional

isDisabledSubmitToFeatureService: boolean

Set this property to true and the web form will not send data to your feature service.

itemId

itemId: string

The ItemId of the web form you want to load.

jsApiVersion optional

jsApiVersion: string = "latest"

Set the version the Survey123 Web App JavaScript API. Set the value to 'latest' to use the latest version of the API.

mode optional

mode: string

Sets the mode of the web form. Valid values are edit, which sets the survey to edit an existing entry rather than create one, and view, which opens an existing entry in read-only mode, and copy, which will create a new web form that is populated with the contents from an existing entry. When setting the mode, the globalId parameter (version ≥ 3.9) or objectId(version ≤ 3.9) parameter must also be provided.

objectId optional

objectId: string

objectId parameter. Supported with version ≤ 3.9

onFormLoaded optional

onFormLoaded: OnFormLoaded

Invokes a callback function when the form is loaded. The callback parameters include:

Use dark colors for code blocksCopy
     
1
2
3
4
5
{
  form: Form;
  contentHeight: number;
  webformVersion?: string;
}

onFormResized optional

onFormResized: OnFormResized

Invokes a callback function when the form is resized.

onFormSubmitted optional

onFormSubmitted: OnFormSubmitted

Invokes a callback function when the form is submitted. For example:

Use dark colors for code blocksCopy
        
1
2
3
4
5
6
7
8
 var webform = new Survey123WebForm({
    clientId: "ABC1234567890",
    container: "formDiv",
    itemId: "",
    onFormSubmitted: (data) => {
      console.log('Form submitted: ', data.surveyFeatureSet);
    }
 });

Output example:

Use dark colors for code blocksCopy
                                                                                                                                                                                     
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
{
  "features": [
    {
      "attributes": {
        "what_is_your_name": "Jane",
        "phone_number": 1,
        "email": "jane@email.com",
        "pick_up_location": {
          "geometryType": "esriGeometryPoint",
          "x": -105.18752574917914,
          "y": 32.54681317350756,
          "spatialReference": {
            "wkid": 4326
          }
        },
        "globalid": "{7F814C2C-42A7-47EA-8921-D748596C0105}",
        "objectid": 2
      },
      "geometry": null,
      "attachments": [],
      "objectId": 2
    }
  ],
  "form": {
    "layerName": "survey",
    "portalUrl": "https://www.arcgis.com",
    "header": {
      "isVisible": true,
      "content": "%3Cp%20style%3D%22text-align%3Astart%3B%22%20title%3D%22Event%20Registration%22%3EEvent%20Registration%3C%2Fp%3E"
    },
    "subHeader": {
      "isVisible": true,
      "content": "%3Cp%3EPlease%20add%20your%20contact%20information%3C%2Fp%3E"
    },
    "questions": [
      {
        "id": "field_1",
        "position": 0,
        "fieldName": "what_is_your_name",
        "name": "what_is_your_name",
        "type": "esriQuestionTypeText",
        "label": "What is your name?",
        "isRequired": false,
        "fieldType": "esriFieldTypeString",
        "validation": {
          "valueRange": {
            "isEnabled": false
          },
          "inputMask": {
            "isEnabled": false,
            "customFormat": ""
          }
        },
        "fieldLength": 255
      },
      {
        "id": "field_5",
        "position": 1,
        "fieldName": "phone_number",
        "name": "phone_number",
        "type": "esriQuestionTypeNumber",
        "label": "Phone number",
        "isRequired": false,
        "fieldType": "esriFieldTypeDouble",
        "validation": {
          "valueRange": {
            "isEnabled": false
          },
          "isInteger": false
        }
      },
      {
        "id": "field_2",
        "position": 2,
        "fieldName": "email",
        "name": "email",
        "type": "esriQuestionTypeEmail",
        "label": "Email",
        "isRequired": false,
        "fieldType": "esriFieldTypeString",
        "fieldLength": 255
      },
      {
        "id": "field_4",
        "position": 3,
        "name": "pick_up_location",
        "type": "esriQuestionTypeGeoPoint",
        "label": "Pick-up location",
        "isRequired": false,
        "defaultValue": {
          "spatialReference": {}
        },
        "fieldType": null,
        "defaultExtent": {
          "spatialReference": {
            "wkid": 102100
          },
          "xmin": -46806367.14447204,
          "ymin": -24890342.394552022,
          "xmax": 46806367.14447204,
          "ymax": 24890342.394552022
        },
        "isDeviceLocationRequired": false,
        "maps": [
          {
            "type": "webmap",
            "itemId": "2ea9c9cf54cb494187b03a5057d1a830",
            "isDefault": true
          }
        ],
        "inputTools": [
          "pin",
          "search",
          "locate"
        ],
        "displayFormats": [
          "DD"
        ]
      }
    ],
    "rules": [],
    "version": "3.13",
    "themes": [
      {
        "id": "49LEHetM6",
        "name": "theme-custom",
        "isEnabled": true,
        "header": {
          "backgroundColor": "#31872E",
          "textColor": "#ffffff"
        },
        "form": {
          "backgroundColor": "#ffffff",
          "backgroundOpacity": 1,
          "textColor": "#505050",
          "primaryColor": "#31872E",
          "primaryTextColor": "#ffffff",
          "inputTextColor": "#505050",
          "inputBackgroundColor": "#ffffff"
        },
        "webpage": {
          "backgroundColor": "#B7DCC7"
        }
      }
    ],
    "footer": {
      "isVisible": true,
      "content": ""
    },
    "submit": {
      "buttonText": "Submit"
    },
    "settings": {
      "thankYouScreenContent": "",
      "openStatusInfo": {
        "status": "open",
        "schedule": {
          "start": null,
          "end": null
        },
        "closedStatusContent": ""
      },
      "recordStartEndTime": {
        "isEnabled": false,
        "fieldInfos": []
      },
      "notificationsInfo": {
        "webhooks": []
      },
      "isVersionLocked": true,
      "multiSubmissionInfo": {
        "maxAllowed": 0,
        "showSubmitAnotherTip": false
      },
      "draftInfo": {
        "isEnabled": false
      },
      "instanceName": ""
    }
  }
}

onQuestionValueChanged optional

onQuestionValueChanged: OnQuestionValueChanged

Invokes a callback function when the values in your form change. The callback parameters include:

Use dark colors for code blocksCopy
       
1
2
3
4
5
6
7
{
  field: string;             // question name
  value: any;                // answer for the question name
  path?: string;             // absolute path
  repeatIndex?: number;      // repeatIndex if the question is in a repeat
  formId?: string;           // feature layer id
}

portalUrl optional

portalUrl: string

The URL of your ArcGIS portal. If left empty, defaults to https://www.arcgis.com

questionValue optional

questionValue: any

Allows you to set the question values on form loading. For example:

Use dark colors for code blocksCopy
 
1
{field_0: 'value1', field_1: 'value2'}

token optional

token: string

Required if you work with private surveys.

version optional

version: string

Version lock on a specific version. Specify 'latest' to always use the latest version of the web app, otherwise it will honor the version setting of the survey. For example:

Use dark colors for code blocksCopy
 
1
version: 'latest'

width optional

width: number

Takes a number in pixels. Controls the width of the survey and a value smaller than 660 will be ignored.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.