Survey123WebFormOptions

Class

Survey123 web form options.

Inheritance: Survey123WebFormOptionsSurvey123JsApiCommonOptions

Properties

Hide inherited properties

Property	Type	Notes
`autoRefresh`	`number`	Enable auto-refresh the survey after submit successfully. You can set autoRefresh=3 which will refresh the survey after 3 seconds.
`clientId` inherited	`string`	A valid Client ID for your domain registered on ArcGIS for Developers website.
`container` inherited	`any`	The HTML element that contains the web form, typically a DIV.
`defaultQuestionValue`	`any`	Deprecated in version 3.14, use questionValue instead.
`globalId`	`string`	globalId parameter. Supported with version ≥ 3.9
`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"]`
`host` inherited	`string`	Pass the host URL on IE and Edge to send messages to the parent domain.
`instanceId` inherited	`string`	to mark different webform instance in one page https://devtopia.esri.com/Beijing-R-D-Center/survey123-js-api/issues/62
`isDisabledSubmitToFeatureService`	`boolean`	Set this property to true and the web form will not send data to your feature service.
`itemId` inherited	`string`	The ItemId of the web form you want to load.
`jsApiVersion` inherited	`string`	Set the version the Survey123 Web App JavaScript API. Set the value to 'latest' to use the latest version of the API.
`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`	`string`	objectId parameter. Supported with version ≤ 3.9
`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`	`OnFormResized`	Invokes a callback function when the form is resized.
`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); } });`
`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` inherited	`string`	The URL of your ArcGIS portal. If left empty, defaults to https://www.arcgis.com
`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` inherited	`string`	Required if you work with private surveys.
`version` inherited	`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`	`number`	Takes a number in pixels. Controls the width of the survey and a value smaller than 660 will be ignored.

autoRefresh

optional

Class Property

autoRefresh: number

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

clientId

inherited

Class Property

clientId: string

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

Inherited from Survey123JsApiCommonOptions.clientId

container

inherited

Class Property

container: any

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

Inherited from Survey123JsApiCommonOptions.container

defaultQuestionValue

optional

Class Property

defaultQuestionValue: any

Deprecated in version 3.14, use questionValue instead.

globalId

optional

Class Property

globalId: string

globalId parameter. Supported with version ≥ 3.9

hideElements

optional

Class Property

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
["navbar","header","description"]

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

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

host

optionalinherited

Class Property

host: string

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

Inherited from Survey123JsApiCommonOptions.host

instanceId

optionalinherited

Class Property

instanceId: string

to mark different webform instance in one page https://devtopia.esri.com/Beijing-R-D-Center/survey123-js-api/issues/62

Inherited from Survey123JsApiCommonOptions.instanceId

isDisabledSubmitToFeatureService

optional

Class Property

isDisabledSubmitToFeatureService: boolean

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

itemId

inherited

Class Property

itemId: string

The ItemId of the web form you want to load.

Inherited from Survey123JsApiCommonOptions.itemId

jsApiVersion

optionalinherited

Class Property

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.

Inherited from Survey123JsApiCommonOptions.jsApiVersion

mode

optional

Class Property

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

Class Property

objectId: string

objectId parameter. Supported with version ≤ 3.9

onFormLoaded

optional

Class Property

onFormLoaded: OnFormLoaded

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

Use dark colors for code blocksCopy
{
  form: Form;
  contentHeight: number;
  webformVersion?: string;
}

onFormResized

optional

Class Property

onFormResized: OnFormResized

Invokes a callback function when the form is resized.

onFormSubmitted

optional

Class Property

onFormSubmitted: OnFormSubmitted

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

Use dark colors for code blocksCopy
 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
{
  "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

Class Property

onQuestionValueChanged: OnQuestionValueChanged

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

Use dark colors for code blocksCopy
{
  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

optionalinherited

Class Property

portalUrl: string

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

Inherited from Survey123JsApiCommonOptions.portalUrl

questionValue

optional

Class Property

questionValue: any

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

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

token

optionalinherited

Class Property

token: string

Required if you work with private surveys.

Inherited from Survey123JsApiCommonOptions.token

version

optionalinherited

Class Property

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
version: 'latest'

Inherited from Survey123JsApiCommonOptions.version

width

optional

Class Property

width: number

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

Survey123Web app API Reference

Survey123WebFormOptions

Was this page helpful?