Survey123WebForm

Class

Survey123 Web form class.

Inheritance: Survey123WebFormSurvey123JsApiCommon

Constructors

new Survey123WebForm(optionsSurvey123WebFormOptions): Survey123WebForm

Create a Survey123Webform instance.

For example:

Use dark colors for code blocksCopy
     
1
2
3
4
5
var webform = new Survey123WebForm({
   clientId: "ABC1234567890",
   container: "formDiv",
   itemId: "129132bbedcb490488a162aa996b12323"
}
Parameters
ParameterType
options
Survey123WebFormOptions
Returns 
Survey123WebForm

Properties

Methods

MethodReturnsNotes
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

any

Get Container.

Form

Get survey form. Only available after onFormLoaded().

string

Get item id.

any

Get options.

Promise<QuestionValue>

Get question value.

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

Set OnFormFailed event.

void

Set OnFormLoaded event.

void

Set OnFormResized event.

void

Set OnFormSubmitted event.

void

Set OnQuestionValueChanged event.

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.

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
ParameterTypeNotes
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
 }
}
]
});
Returns 
Promise<any>

collapse

collapse(namestring): void

Collapse group or repeat question.

Parameters
ParameterType
name
string
Returns 
void

copyFeature

copyFeature(globalIdstring): void

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

Parameters
ParameterType
globalId
string
Returns 
void

deleteRepeat

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

Delete repeat record.

Parameters
ParameterTypeNotes
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(namestring): void

expand group or repeat

Parameters
ParameterType
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
ParameterType
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(questionNamestring): Promise<number>

Get the count of records in a repeat question.

Parameters
ParameterTypeNotes
questionName
string

For example:

Use dark colors for code blocksCopy
  
1
2
webform.getRepeatCount('CapturedFish')
})
Returns 
Promise<number>

off

off(eventNamestring, callbackEventFunction): void

Remove registered event.

Parameters
ParameterType
eventName
string
callback
EventFunction
Returns 
void

on

on(eventNamestring, callbackEventFunction): 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.
Parameters
ParameterType
eventName
string
callback
EventFunction
Returns 
void

scrollTo

scrollTo(namestring): void

Scroll to a question.

Parameters
ParameterType
name
string
Returns 
void

setCredential

setCredential(credentialany): void

Set credential.

Parameters
ParameterType
credential
any
Returns 
void

setGeometry

setGeometry(geometryany): 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
ParameterTypeNotes
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]
       ]
      ]
    }
)
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
ParameterType
geopoint
{ x: number; y: number }
Returns 
void

setItemId

setItemId(itemIdstring): void

Set item id. IFrame will be reloaded.

Parameters
ParameterType
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
    
1
2
3
4
webform.setMode({
       mode: 'view',
       globalId: '<globalId>'
    })
Parameters
ParameterType
options
{ globalId?: string; mode: string; objectId?: string }
Returns 
void

setOnFormFailed

setOnFormFailed(fxOnFormFailed): void

Set OnFormFailed event.

Parameters
ParameterTypeNotes
fx
OnFormFailed

For example:

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

setOnFormLoaded

setOnFormLoaded(fxOnFormLoaded): void

Set OnFormLoaded event.

Parameters
ParameterTypeNotes
fx
OnFormLoaded

For example:

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

setOnFormResized

setOnFormResized(fxOnFormResized): void

Set OnFormResized event.

Parameters
ParameterTypeNotes
fx
OnFormResized

For example:

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

setOnFormSubmitted

setOnFormSubmitted(fxOnFormSubmitted): void

Set OnFormSubmitted event.

Parameters
ParameterTypeNotes
fx
OnFormSubmitted

For example:

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

setOnQuestionValueChanged

setOnQuestionValueChanged(fxOnQuestionValueChanged): void

Set OnQuestionValueChanged event.

Parameters
ParameterTypeNotes
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
                                 
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
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
ParameterType
value
{ [key: string]: any }
Returns 
void

setStyle

setStyle(styleObjany): void

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

For example:

Use dark colors for code blocksCopy
         
1
2
3
4
5
6
7
8
9
  webform.setStyle({
   '& .question-label': {
     'color': '#ff0000 !important',
     'font-size': '30px !important'
    },
   '& .form-header': {
     'color': '#ff0000 !important'
    }
  });
Parameters
ParameterType
styleObj
any
Returns 
void

setTheme

setTheme(themeFormTheme): void

Set form theme.

Parameters
ParameterTypeNotes
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"
    }
  });
Returns 
void

submitForm

submitForm(): void

Submit the survey based on the current question values.

Returns 
void

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