Preview your survey

In Survey123 Connect, you can preview your form before you publish it.

You can update the form preview in Survey123 Connect in the following ways:

  • Save the changes in your spreadsheet.
  • Click the Refresh button in Survey123 Connect.

After converting your spreadsheet to a survey form, any changes appear in the form preview. You can also preview changes that have been made to the style or map settings. All data validation rules, calculations, appearance, and prepopulated values are honored in the form preview. This preview is exactly what the survey will look like when it's downloaded into the Survey123 field app. From the list in the lower left corner of the form preview, select an aspect ratio or a type of device to emulate different environments for UI testing. You can also add your own bezels to this list.

Data validation

After entering data into your form preview, you can use the Validate Input button to apply any data validation rules you have in your data and preview any custom messages. This includes calculations, constraints, and required fields. If the survey response is valid, the resulting window will return all of the data contained in the survey, including data that is captured but not normally displayed in the survey (for example, hidden and calculation fields). Using the Show Details button in this window will display further information, including attachment details and locations.

Bezels

A bezel is a frame around the form preview that simulates how your survey will look on different devices, using different screen sizes and resolutions.​ There are several preconfigured examples in Survey123 Connect, but you can also create your own. Add your bezel designs to the C:\Users\UserName\ArcGIS\My Survey Designs\Bezels folder. You might need to create this folder if it doesn't already exist. Once copied to this folder, your bezel will become available the next time you enter the form preview.

A bezel usually has two parts:​ an image file and a configuration file. The image is drawn over the top of the form, so the screen's display area in the image must be transparent.​ PNG files are recommended, as they support transparency.

The configuration file is in JSON format with a .bezel extension and has the following properties:

  • name—Bezel name that will be displayed in the form preview.​ If not specified, the default will be the file name.​
  • image—Name and extension of the bezel image file.​ If not specified, the default will be <config file name>.png.​
  • screen—Position and size in pixels of the region of the bezel image where the form will be displayed.​
  • resolution—Native resolution in pixels of device screen.​
  • scale—Scale factor (pixel density) of the device screen.

{  
  "name":"Tablet Landscape",
  "image":"Tablet Landscape.png",
  "screen":{  
    "x":114,
    "y":54,
    "width":1229,
    "height":922
  },
  "resolution":{  
    "x":2048,
    "y":1536
  },
  "scale":2
}

Alternatively, you can specify an aspect ratio for the form preview by using a configuration file without an image and setting the scale property to -1.

{  
  "name":"My Screen 16:9",
  "screen":{  
    "width":16,
    "height":9
  },
  "scale":-1
}


In this topic
  1. Data validation
  2. Bezels