Preview a survey

In Survey123 Connect, you can preview a form before you publish it on the Form tab.

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

• Save the changes in the spreadsheet.
• Click the Update button in Survey123 Connect.

After converting a 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 how the survey will appear when it's downloaded into the Survey123 field app. Open the Bezel panel in the upper right of the form preview to 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. Open the Information panel in the right of the form preview to see details about the current bezel, such as aspect ratio and scale. This panel also displays how long a form takes to load.

Data validation

After entering data into a form preview, you can use the Validate button to apply any data validation rules and preview any custom messages. This includes calculations, constraints, and required fields. If the survey response is valid, the resulting window returns 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 displays further information, including attachment details and locations. To reset a survey to its state on load, click the Reload form button on the right of the form preview.

Bezels

A bezel is a frame around the form preview that simulates how a 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 may need to create this folder if it doesn't already exist. Once copied to this folder, your bezel becomes 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
}