Survey123WebForm

Class

Survey123 Web form class.

Inheritance: Survey123WebFormSurvey123JsApiCommon

Constructors

constructor

Class Constructor

new Survey123WebForm(options: Survey123WebFormOptions): Survey123WebForm

Create a Survey123Webform instance.

For example:

Use dark colors for code blocksCopy
var webform = new Survey123WebForm({
   clientId: "ABC1234567890",
   container: "formDiv",
   itemId: "129132bbedcb490488a162aa996b12323"
}

Parameters

Parameter	Type	Notes
`options`	Survey123WebFormOptions

Returns

Survey123WebForm

Properties

Property	Type	Notes
`options`	`Survey123WebFormOptions`

options

Class Property

options: Survey123WebFormOptions

Methods

Hide inherited methods

Method	Returns	Notes
`addRepeat(options)`	`Promise<any>`	Add repeat record. For 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 webform.addRepeat({ questionName: "CapturedFish", count: 2, questionValues: [ { Species: "Mooneye", FishSize: 10, condition: "good", fishPosition: { x: 151.123, y: 13.123 } }, { Species: "Paddlefish", FishSize: 20, condition: "normal", fishPosition: { x: 101.123, y: 29.123 } } ] });`
`collapse(name)`	`void`	Collapse group or repeat question.
`copyFeature(globalId)`	`void`	Clone a new web form that is populated with the contents from an existing entry by the globalId.
`deleteRepeat(options)`	`Promise<any>`	Delete repeat record. For example: Use dark colors for code blocksCopy `1 2 3 4 webform.deleteRepeat({ questionName: "CapturedFish", indexes: [1,2] });`
`expand(name)`	`void`	expand group or repeat
`getContainer()` inherited	`any`	Get Container.
`getForm()`	`Form`	Get survey form. Only available after onFormLoaded().
`getItemId()` inherited	`string`	Get item id.
`getOptions(key?)` inherited	`any`	Get options.
`getQuestionValue()`	`Promise<QuestionValue>`	Get question value.
`getQuestions()`	`any[]`	Get questions in JSON format.
`getRepeatCount(questionName)`	`Promise<number>`	Get the count of records in a repeat question. For example: Use dark colors for code blocksCopy `1 2 webform.getRepeatCount('CapturedFish') })`
`off(eventName, callback)`	`void`	Remove registered event.Supported with version ≥ 3.14
`on(eventName, callback)`	`void`	Register event listener. Supported with version ≥ 3.14. Valid event names are: formLoaded, which will be triggered when the form is fully loaded. formResized, which will be triggered when the form is resized. formSubmitted, which will be triggered when the response is submitted. questionValueChanged, which will be triggered when the question value is changed. repeatIndexChanged, which will be triggered when the active repeat record is changed. propertyChanged, which will be triggered when the locale or theme of the web app is changed.
`scrollTo(name)`	`void`	Scroll to a question.
`setCredential(credential)` inherited	`void`	Set credential.
`setGeometry(geometry)`	`void`	Dynamically set geometry on Map question. Only works if there is Map question in the survey. Supported formats are either GeoJSON, Esri Geometry Object, or XLSForm Geotrace/Geoshape format.
`setGeopoint(geopoint)`	`void`	Dynamically set coordinates on Geopoint question. Only works if there is Geopoint question in the survey.
`setItemId(itemId)` inherited	`void`	Set item id. IFrame will be reloaded.
`setMode(options)`	`void`	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.
`setOnFormFailed(fx)`	`void`	Set OnFormFailed event. For example: Use dark colors for code blocksCopy `1 2 3 webform.setOnFormFailed((data)=>{ console.log('onFormFailed', data) })`
`setOnFormLoaded(fx)`	`void`	Set OnFormLoaded event. For example: Use dark colors for code blocksCopy `1 2 3 webform.setOnFormLoaded((data)=>{ console.log('onFormLoaded', data) })`
`setOnFormResized(fx)`	`void`	Set OnFormResized event. For example: Use dark colors for code blocksCopy `1 2 3 webform.setOnFormResized((data)=>{ console.log('onFormResized', data) })`
`setOnFormSubmitted(fx)`	`void`	Set OnFormSubmitted event. For example: Use dark colors for code blocksCopy `1 2 3 webform.setOnFormSubmitted((data)=>{ console.log('onFormSubmitted', data) })`
`setOnQuestionValueChanged(fx)`	`void`	Set OnQuestionValueChanged event. For example: Use dark colors for code blocksCopy `1 2 3 webform.setOnQuestionValueChanged((data)=>{ console.log('onQuestionValueChanged', data) })`
`setQuestionValue(value)`	`void`	Dynamically set value on each question.
`setStyle(styleObj)`	`void`	Set CSS style of any UI element using the JSS syntax.
`setTheme(theme)`	`void`	Set form theme.
`submitForm()`	`void`	Submit the survey based on the current question values.

addRepeat

Class Method

addRepeat(options: { count?: number[]; questionName: string; questionValues?: any[] }): Promise<any>

Add repeat record. For example:

Use dark colors for code blocksCopy
webform.addRepeat({
questionName: "CapturedFish",
count: 2,
questionValues: [
{
 Species: "Mooneye",
 FishSize: 10,
 condition: "good",
 fishPosition: {
   x: 151.123,
   y: 13.123
 }
},
{
 Species: "Paddlefish",
 FishSize: 20,
 condition: "normal",
 fishPosition: {
   x: 101.123,
   y: 29.123
 }
}
]
});

Parameters

Parameter	Type	Notes
`options`	{ count?: number[]; questionName: string; questionValues?: any[] }

Returns

Promise<any>

collapse

Class Method

collapse(name: string): void

Collapse group or repeat question.

Parameters

Parameter	Type
`name`	string

Returns

void

copyFeature

Class Method

copyFeature(globalId: string): void

Clone a new web form that is populated with the contents from an existing entry by the globalId.

Parameters

Parameter	Type
`globalId`	string

Returns

void

deleteRepeat

Class Method

deleteRepeat(options: { indexes?: number[]; questionName: string }): Promise<any>

Delete repeat record. For example:

Use dark colors for code blocksCopy
webform.deleteRepeat({
questionName: "CapturedFish",
indexes: [1,2]
});

Parameters

Parameter	Type	Notes
`options`	{ indexes?: number[]; questionName: string* }*

Returns

Promise<any>

expand

Class Method

expand(name: string): void

expand group or repeat

Parameters

Parameter	Type
`name`	string

Returns

void

getContainer

inherited

Class Method

getContainer(): any

Get Container.

Returns

any

Inherited from Survey123JsApiCommon.getContainer

getForm

Class Method

getForm(): Form

Get survey form. Only available after onFormLoaded().

Returns

Form

getItemId

inherited

Class Method

getItemId(): string

Get item id.

Returns

string

Inherited from Survey123JsApiCommon.getItemId

getOptions

inherited

Class Method

getOptions(key?: string): any

Get options.

Parameters

Parameter	Type	Notes
`key`	string

Returns

any

Inherited from Survey123JsApiCommon.getOptions

getQuestionValue

Class Method

getQuestionValue(): Promise<QuestionValue>

Get question value.

Returns

Promise<QuestionValue>

getQuestions

Class Method

getQuestions(): any[]

Get questions in JSON format.

Returns

any[]

getRepeatCount

Class Method

getRepeatCount(questionName: string): Promise<number>

Get the count of records in a repeat question. For example:

Use dark colors for code blocksCopy
webform.getRepeatCount('CapturedFish')
})

Parameters

Parameter	Type	Notes
`questionName`	string

Returns

Promise<number>

off

Class Method

off(eventName: string, callback: EventFunction): void

Remove registered event.Supported with version ≥ 3.14

Parameters

Parameter	Type	Notes
`eventName`	string
`callback`	EventFunction

Returns

void

on

Class Method

on(eventName: string, callback: EventFunction): void

formLoaded, which will be triggered when the form is fully loaded.
formResized, which will be triggered when the form is resized.
formSubmitted, which will be triggered when the response is submitted.
questionValueChanged, which will be triggered when the question value is changed.
repeatIndexChanged, which will be triggered when the active repeat record is changed.
propertyChanged, which will be triggered when the locale or theme of the web app is changed.

Parameters

Parameter	Type	Notes
`eventName`	string
`callback`	EventFunction

Returns

void

scrollTo

Class Method

scrollTo(name: string): void

Scroll to a question.

Parameters

Parameter	Type	Notes
`name`	string

Returns

void

setCredential

inherited

Class Method

setCredential(credential: any): void

Set credential.

Parameters

Parameter	Type	Notes
`credential`	any

Returns

void

Inherited from Survey123JsApiCommon.setCredential

setGeometry

Class Method

setGeometry(geometry: any): void

Dynamically set geometry on Map question. Only works if there is Map question in the survey. Supported formats are either GeoJSON, Esri Geometry Object, or XLSForm Geotrace/Geoshape format.

For example:

Use dark colors for code blocksCopy
webform.setGeometry(
   {
      "rings": [
       [
         [86.06251716611514, 56.9269796817211],
         [109.68749999997128, 53.72920275233425],
         [100.68750858304249, 50.2682616540679],
         [82.68752574918487, 49.543728300312914],
         [86.06251716611514, 56.9269796817211]
       ]
      ]
    }
)

Parameters

Parameter	Type	Notes
`geometry`	any

Returns

void

setGeopoint

Class Method

setGeopoint(geopoint: { x: number; y: number }): void

Dynamically set coordinates on Geopoint question. Only works if there is Geopoint question in the survey.

Parameters

Parameter	Type	Notes
`geopoint`	{ x: number; y: number* }*

Returns

void

setItemId

inherited

Class Method

setItemId(itemId: string): void

Set item id. IFrame will be reloaded.

Parameters

Parameter	Type	Notes
`itemId`	string

Returns

void

Inherited from Survey123JsApiCommon.setItemId

setMode

Class Method

setMode(options: { globalId?: string; mode: string; objectId?: string }): void

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.

For example:

Use dark colors for code blocksCopy
webform.setMode({
       mode: 'view',
       globalId: '<globalId>'
    })

Parameters

Parameter	Type
`options`	{ globalId?: string; mode: string; objectId?: string* }*

Returns

void

setOnFormFailed

Class Method

setOnFormFailed(fx: OnFormFailed): void

Set OnFormFailed event. For example:

Use dark colors for code blocksCopy
webform.setOnFormFailed((data)=>{
  console.log('onFormFailed', data)
})

Parameters

Parameter	Type	Notes
`fx`	OnFormFailed

Returns

void

setOnFormLoaded

Class Method

setOnFormLoaded(fx: OnFormLoaded): void

Set OnFormLoaded event. For example:

Use dark colors for code blocksCopy
webform.setOnFormLoaded((data)=>{
  console.log('onFormLoaded', data)
})

Parameters

Parameter	Type	Notes
`fx`	OnFormLoaded

Returns

void

setOnFormResized

Class Method

setOnFormResized(fx: OnFormResized): void

Set OnFormResized event. For example:

Use dark colors for code blocksCopy
webform.setOnFormResized((data)=>{
  console.log('onFormResized', data)
})

Parameters

Parameter	Type	Notes
`fx`	OnFormResized

Returns

void

setOnFormSubmitted

Class Method

setOnFormSubmitted(fx: OnFormSubmitted): void

Set OnFormSubmitted event. For example:

Use dark colors for code blocksCopy
webform.setOnFormSubmitted((data)=>{
  console.log('onFormSubmitted', data)
})

Parameters

Parameter	Type	Notes
`fx`	OnFormSubmitted

Returns

void

setOnQuestionValueChanged

Class Method

setOnQuestionValueChanged(fx: OnQuestionValueChanged): void

Set OnQuestionValueChanged event. For example:

Use dark colors for code blocksCopy
webform.setOnQuestionValueChanged((data)=>{
  console.log('onQuestionValueChanged', data)
})

Parameters

Parameter	Type	Notes
`fx`	OnQuestionValueChanged

Returns

void

setQuestionValue

Class Method

setQuestionValue(value: { [key: string]: any }): void

Dynamically set value on each question.

For example:

Use dark colors for code blocksCopy
webform.setQuestionValue({
   'ReportDate': '2020-07-11',
   'Location': {
       x: 129.1236,
       y: 29.1236,
       spatialReference: {
         wkid: 4326
       }
   },
   'HoursFished': 10,
   'WaterbodyName': 'change by setDefatulValue()',
   'Weather': 'rain',
   // This is a repeat question
   'CapturedFish': [{
     'Species': 'Paddlefish',
     'FishSize': 5,
     'FishWeight': 10,
     'condition': 'normal',
     'fishPosition': {
       x: 161.123,
       y: 29.123
     }
   },{
    'Species': 'Trout',
     'FishSize': 7,
     'FishWeight': 12,
     'condition': 'poor',
     'fishPosition': {
       x: 169.123456,
       y: 19.123456
     }
   }]
 });

Parameters

Parameter	Type
`value`	{ [key: string]: any }

Returns

void

setStyle

Class Method

setStyle(styleObj: any): void

Set CSS style of any UI element using the JSS syntax.

For example:

Use dark colors for code blocksCopy
  webform.setStyle({
   '& .question-label': {
     'color': '#ff0000 !important',
     'font-size': '30px !important'
    },
   '& .form-header': {
     'color': '#ff0000 !important'
    }
  });

Parameters

Parameter	Type
`styleObj`	any

Returns

void

setTheme

Class Method

setTheme(theme: FormTheme): void

Set form theme.

For example:

Use dark colors for code blocksCopy
  webform.setTheme({
    header: {
      backgroundColor: "#25838f",
      textColor: "#ffffff"
    },
    form: {
      backgroundColor: "#143438",
      backgroundOpacity: 1,
      backgroundImage: "image url",
      backgroundImageFit: "repeat | repeatY | fit | center",
      textColor: "#ffffff",
      primaryColor: "#25838f",
      primaryTextColor: "#ffffff",
      inputTextColor: "#505050",
      inputBackgroundColor: "#ffffff"
    },
    webpage: {
      backgroundColor: "#005d65",
      backgroundImageFit: "fill | fit | repeat | center",
      backgroundImage: "image url"
    }
  });

Parameters

Parameter	Type	Notes
`theme`	FormTheme

Returns

void

submitForm

Class Method

submitForm(): void

Submit the survey based on the current question values.

Returns

void

Survey123Web app API Reference

Survey123WebForm

Was this page helpful?