Survey123WebFormOptions

Class

Survey123 web form options.

Inheritance: Survey123WebFormOptionsSurvey123JsApiCommonOptions

Properties

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

Allows you populate questions in the form. For example:

Use dark colors for code blocks
 
1
{field_0: 'value1', field_1: 'value2'}
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 blocks
 
1
["navbar","header","description"]

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

Use dark colors for code blocks
 
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.

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 blocks
     
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 blocks
        
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 blocks
                                                                                                                                                                                     
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 blocks
       
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

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 blocks
 
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.