Survey123WebForm

Class

Survey123 Web form class.

Inheritance: Survey123WebFormSurvey123JsApiCommon

Constructors

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
`options`	Survey123WebFormOptions

Returns

Survey123WebForm

Properties

Property	Type
`options`	`Survey123WebFormOptions`

options

options: Survey123WebFormOptions

Methods

Method	Returns	Notes
`addRepeat(options)`	`Promise<any>`	Add repeat record.
`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.
`expand(name)`	`void`	expand group or repeat
`getContainer()`	`any`	Get Container.
`getForm()`	`Form`	Get survey form. Only available after onFormLoaded().
`getItemId()`	`string`	Get item id.
`getOptions(key?)`	`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.
`off(eventName, callback)`	`void`	Remove registered event.
`on(eventName, callback)`	`void`	Register event listener. Valid event names are: 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)`	`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)`	`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.
`setOnFormLoaded(fx)`	`void`	Set OnFormLoaded event.
`setOnFormResized(fx)`	`void`	Set OnFormResized event.
`setOnFormSubmitted(fx)`	`void`	Set OnFormSubmitted event.
`setOnQuestionValueChanged(fx)`	`void`	Set OnQuestionValueChanged event.
`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

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

Add repeat record.

Parameters

Parameter Type Notes

Parameter	Type	Notes
`options`	{ count?: number[]; questionName: string; questionValues?: any[] }	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 } } ] });`

options

{ count?: number[]; questionName: string; questionValues?: any[] }

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
 }
}
]
});

Returns

Promise<any>

collapse

collapse(name: string): void

Collapse group or repeat question.

Parameters

Parameter	Type
`name`	string

Returns

void

copyFeature

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

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

Delete repeat record.

Parameters

Parameter	Type	Notes
`options`	{ indexes?: number[]; questionName: string* }*	For example: Use dark colors for code blocksCopy `1 2 3 4 webform.addRepeat({ questionName: "CapturedFish", indexes: [1,2] });`

Returns

Promise<any>

expand

expand(name: string): void

expand group or repeat

Parameters

Parameter	Type
`name`	string

Returns

void

getContainer

getContainer(): any

Get Container.

Returns

any

getForm

getForm(): Form

Get survey form. Only available after onFormLoaded().

Returns

Form

getItemId

getItemId(): string

Get item id.

Returns

string

getOptions

getOptions(key?: string): any

Get options.

Parameters

Parameter	Type
`key`	string

Returns

any

getQuestionValue

getQuestionValue(): Promise<QuestionValue>

Get question value.

Returns

Promise<QuestionValue>

getQuestions

getQuestions(): any[]

Get questions in JSON format.

Returns

any[]

getRepeatCount

getRepeatCount(questionName: string): Promise<number>

Get the count of records in a repeat question.

Parameters

Parameter	Type	Notes
`questionName`	string	For example: Use dark colors for code blocksCopy `1 2 webform.getRepeatCount('CapturedFish') })`

Returns

Promise<number>

off

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

Remove registered event.

Parameters

Parameter	Type
`eventName`	string
`callback`	EventFunction

Returns

void

on

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

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
`eventName`	string
`callback`	EventFunction

Returns

void

scrollTo

scrollTo(name: string): void

Scroll to a question.

Parameters

Parameter	Type
`name`	string

Returns

void

setCredential

setCredential(credential: any): void

Set credential.

Parameters

Parameter	Type
`credential`	any

Returns

void

setGeometry

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.

Parameters

Parameter Type Notes

Parameter	Type	Notes
`geometry`	any	For example: Use dark colors for code blocksCopy `1 2 3 4 5 6 7 8 9 10 11 12 13 webform.setGeometry( { "rings": [ [ [86.06251716611514, 56.9269796817211], [109.68749999997128, 53.72920275233425], [100.68750858304249, 50.2682616540679], [82.68752574918487, 49.543728300312914], [86.06251716611514, 56.9269796817211] ] ] } )`

geometry

any

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]
       ]
      ]
    }
)

Returns

void

setGeopoint

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
`geopoint`	{ x: number; y: number* }*

Returns

void

setItemId

setItemId(itemId: string): void

Set item id. IFrame will be reloaded.

Parameters

Parameter	Type
`itemId`	string

Returns

void

setMode

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

setOnFormFailed(fx: OnFormFailed): void

Set OnFormFailed event.

Parameters

Parameter	Type	Notes
`fx`	OnFormFailed	For example: Use dark colors for code blocksCopy `1 2 3 webform.setOnFormFailed((data)=>{ console.log('onFormFailed', data) })`

Returns

void

setOnFormLoaded

setOnFormLoaded(fx: OnFormLoaded): void

Set OnFormLoaded event.

Parameters

Parameter	Type	Notes
`fx`	OnFormLoaded	For example: Use dark colors for code blocksCopy `1 2 3 webform.setOnFormLoaded((data)=>{ console.log('onFormLoaded', data) })`

Returns

void

setOnFormResized

setOnFormResized(fx: OnFormResized): void

Set OnFormResized event.

Parameters

Parameter	Type	Notes
`fx`	OnFormResized	For example: Use dark colors for code blocksCopy `1 2 3 webform.setOnFormResized((data)=>{ console.log('onFormResized', data) })`

Returns

void

setOnFormSubmitted

setOnFormSubmitted(fx: OnFormSubmitted): void

Set OnFormSubmitted event.

Parameters

Parameter	Type	Notes
`fx`	OnFormSubmitted	For example: Use dark colors for code blocksCopy `1 2 3 webform.setOnFormSubmitted((data)=>{ console.log('onFormSubmitted', data) })`

Returns

void

setOnQuestionValueChanged

setOnQuestionValueChanged(fx: OnQuestionValueChanged): void

Set OnQuestionValueChanged event.

Parameters

Parameter	Type	Notes
`fx`	OnQuestionValueChanged	For example: Use dark colors for code blocksCopy `1 2 3 webform.setOnQuestionValueChanged((data)=>{ console.log('onQuestionValueChanged', data) })`

Returns

void

setQuestionValue

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

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

setTheme(theme: FormTheme): void

Set form theme.

Parameters

Parameter Type Notes

Parameter	Type	Notes
`theme`	FormTheme	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 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" } });

theme

FormTheme

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"
    }
  });

Returns

void

submitForm

submitForm(): void

Submit the survey based on the current question values.

Returns

void

Survey123Web app API Reference

Survey123WebForm

Was this page helpful?

Was this page helpful?