Survey123WebForm

Class

Survey123 Web form class.

Inheritance: Survey123WebFormSurvey123JsApiCommon

Constructors

constructor
new Survey123WebForm(optionsSurvey123WebFormOptions): Survey123WebForm

Create a Survey123Webform instance.

For example:

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

Properties

options

Methods

copyFeature
copyFeature(globalIdstring): void

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

Parameters
  • globalIdstring
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
  • keystringoptional 
Returns 
any
getQuestionValue
getQuestionValue(): Promise<QuestionValue>

Get question value.

Returns 
Promise<QuestionValue>
getQuestions
getQuestions(): any[]

Get questions in JSON format.

Returns 
any[]
off
off(eventNamestring, callbackEventFunction): void

Remove registered event.

Parameters
  • eventNamestring
  • callbackEventFunction
Returns 
void
on
on(eventNamestring, callbackEventFunction): void

Register event listener. Valid event names are:

  • repeat-index-change, which will be triggered when the active repeat record is changed.
Parameters
  • eventNamestring
  • callbackEventFunction
Returns 
void
setCredential
setCredential(credentialany): void

Set credential.

Parameters
  • credentialany
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
  • geometryany

    For example:

                 
    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
  • geopoint{ x: number; y: number }
    Returns 
    void
    setItemId
    setItemId(itemIdstring): void

    Set item id. IFrame will be reloaded.

    Parameters
    • itemIdstring
    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:

        
    1
    2
    3
    4
    webform.setMode({
           mode: 'view',
           globalId: '<globalId>'
        })
    
    Parameters
    • options{ globalId?: string; mode: string; objectId?: string }
      Returns 
      void
      setOnFormFailed
      setOnFormFailed(fxOnFormFailed): void

      Set OnFormFailed event.

      Parameters
      • fxOnFormFailed
      Returns 
      void
      setOnFormLoaded
      setOnFormLoaded(fxOnFormLoaded): void

      Set OnFormLoaded event.

      Parameters
      • fxOnFormLoaded
      Returns 
      void
      setOnFormResized
      setOnFormResized(fxOnFormResized): void

      Set OnFormResized event.

      Parameters
      • fxOnFormResized
      Returns 
      void
      setOnFormSubmitted
      setOnFormSubmitted(fxOnFormSubmitted): void

      Set OnFormSubmitted event.

      Parameters
      • fxOnFormSubmitted
      Returns 
      void
      setOnQuestionValueChanged
      setOnQuestionValueChanged(fxOnQuestionValueChanged): void

      Set OnQuestionValueChanged event.

      Parameters
      • fxOnQuestionValueChanged
      Returns 
      void
      setQuestionValue
      setQuestionValue(value{ [key: string]: any }): void

      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
           }
         }]
       });
      
      Parameters
      • value{ [key: string]: any }
        • [key: string]: any
      Returns 
      void
      setStyle
      setStyle(styleObjany): void

      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'
          }
        });
      
      Parameters
      • styleObjany
      Returns 
      void
      setTheme
      setTheme(themeFormTheme): void

      Set form theme.

      Parameters
      • themeFormTheme

        For example:

                              
        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.