Survey123WebForm

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
webform.setEditAssociateMapComplated(
  {
     "rings": [
      [
        [86.06251716611514, 56.9269796817211],
        [109.68749999997128, 53.72920275233425],
        [100.68750858304249, 50.2682616540679],
        [82.68752574918487, 49.543728300312914],
        [86.06251716611514, 56.9269796817211]
      ]
     ]
   }
)

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

1
2
3
4
5
6
7
8
9
getLanguages().then(languages => {
  console.log(languages);
  // Example response:
  // [
  //   { code: "en-us", isDefault: true, label: "English" },
  //   { code: "eu", isCustomLocale: true, isActive: true, label: "Euskera" },
  //   { code: "ja", label: "Japanese" }
  // ]
});

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
webform.setGeometry(
  {
     "rings": [
      [
        [86.06251716611514, 56.9269796817211],
        [109.68749999997128, 53.72920275233425],
        [100.68750858304249, 50.2682616540679],
        [82.68752574918487, 49.543728300312914],
        [86.06251716611514, 56.9269796817211]
      ]
     ]
   }
)

webform.setGeometry(null)

1
 webform.setLanguage('ja');

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

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

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

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

1
2
3
webform.setOnFormSubmit(()=>{
 console.log('onFormSubmit')
})

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

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

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

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

1
2
3
4
5
6
7
const imageObj = {
  name: 'avatar.jpg',
  file: file  // File object
};
const questionValue = {};
questionValue[questionName] = [imageObj];
webform.setQuestionValue(questionValue);

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

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