Survey123WebForm

Create a Survey123Webform instance.

For example:

1
2
3
4
5
var webform = new Survey123WebForm({
   clientId: "ABC1234567890",
   container: "formDiv",
   itemId: "129132bbedcb490488a162aa996b12323"
}

Returns 

Add repeat record.

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 

Collapse group or repeat question.

Returns 

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

Returns 

Delete repeat record.

1
2
3
4
webform.addRepeat({
questionName: "CapturedFish",
indexes: [1,2]
});

Returns 

expand group or repeat

Returns 

Get Container.

Returns 

Get survey form. Only available after onFormLoaded().

Returns 

Get item id.

Returns 

Get options.

Returns 

Get question value.

Returns 

Get questions in JSON format.

Returns 

Get the count of records in a repeat question.

1
2
webform.getRepeatCount('CapturedFish')
})

Returns 

Remove registered event.

Returns 

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.

Returns 

Scroll to a question.

Returns 

Set credential.

Returns 

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.

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 

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

Returns 

Set item id. IFrame will be reloaded.

Returns 

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:

1
2
3
4
webform.setMode({
       mode: 'view',
       globalId: '<globalId>'
    })

Returns 

Set OnFormFailed event.

1
2
3
webform.setOnFormFailed((data)=>{
  console.log('onFormFailed', data)
})

Returns 

Set OnFormLoaded event.

1
2
3
webform.setOnFormLoaded((data)=>{
  console.log('onFormLoaded', data)
})

Returns 

Set OnFormResized event.

1
2
3
webform.setOnFormResized((data)=>{
  console.log('onFormResized', data)
})

Returns 

Set OnFormSubmitted event.

1
2
3
webform.setOnFormSubmitted((data)=>{
  console.log('onFormSubmitted', data)
})

Returns 

Set OnQuestionValueChanged event.

1
2
3
webform.setOnQuestionValueChanged((data)=>{
  console.log('onQuestionValueChanged', data)
})

Returns 

Dynamically set value on each question.

For example:

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

Returns 

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

For example:

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

Returns 

Set form theme.

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 

Submit the survey based on the current question values.

Returns