Survey123WebForm

Class

Survey123 Web form class.

Inheritance: Survey123WebFormSurvey123JsApiCommon

Constructors

constructor

new Survey123WebForm(options: Survey123WebFormOptions): Survey123WebForm

Create a Survey123Webform instance.

For example:

Use dark colors for code blocks

var webform = new Survey123WebForm({
   clientId: "ABC1234567890",
   container: "formDiv",
   itemId: "129132bbedcb490488a162aa996b12323"
}

Parameters

options: Survey123WebFormOptions

Returns

Survey123WebForm

Properties

options

options: Survey123WebFormOptions

Methods

copyFeature

copyFeature(globalId: string): void

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

Parameters

globalId: 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

key: stringoptional

Returns

any

getQuestionValue

getQuestionValue(): Promise<QuestionValue>

Get question value.

Returns

Promise<QuestionValue>

getQuestions

getQuestions(): any[]

Get questions in JSON format.

Returns

any[]

off

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

Remove registered event.

Parameters

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

eventName: string
callback: EventFunction

Returns

void

scrollToQuestion

scrollToQuestion(name: string): void

scroll to a question

Parameters

name: string

Returns

void

setCredential

setCredential(credential: any): void

Set credential.

Parameters

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

geometry: any

For example:

Use dark colors for code blocks

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

geopoint: { x: number; y: number }

Returns

void

setItemId

setItemId(itemId: string): void

Set item id. IFrame will be reloaded.

Parameters

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 blocks

webform.setMode({
       mode: 'view',
       globalId: '<globalId>'
    })

Parameters

options: { globalId?: string; mode: string; objectId?: string }

Returns

void

setOnFormFailed

setOnFormFailed(fx: OnFormFailed): void

Set OnFormFailed event.

Parameters

fx: OnFormFailed

For example:

Use dark colors for code blocks

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

Returns

void

setOnFormLoaded

setOnFormLoaded(fx: OnFormLoaded): void

Set OnFormLoaded event.

Parameters

fx: OnFormLoaded

For example:

Use dark colors for code blocks

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

Returns

void

setOnFormResized

setOnFormResized(fx: OnFormResized): void

Set OnFormResized event.

Parameters

fx: OnFormResized

For example:

Use dark colors for code blocks

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

Returns

void

setOnFormSubmitted

setOnFormSubmitted(fx: OnFormSubmitted): void

Set OnFormSubmitted event.

Parameters

fx: OnFormSubmitted

For example:

Use dark colors for code blocks

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

Returns

void

setOnQuestionValueChanged

setOnQuestionValueChanged(fx: OnQuestionValueChanged): void

Set OnQuestionValueChanged event.

Parameters

fx: OnQuestionValueChanged

For example:

Use dark colors for code blocks

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 blocks

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

value: { [key: string]: any }
- [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 blocks

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

Parameters

styleObj: any

Returns

void

setTheme

setTheme(theme: FormTheme): void

Set form theme.

Parameters

theme: FormTheme

For example:

Use dark colors for code blocks

  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

DocumentationSurvey123Web app API Reference

Survey123WebForm

Was this page helpful?

Was this page helpful?