• Sign In
×
The 2025 Client Survey is now open! Responses will be accepted up until 10/31. Please feel free to share this link within your organization and we thank you in advance for your participation!


The labkey.org server will offline for a restart at 7pm Pacific Time today. The server will be offline for no more than 15 minutes. Sorry for any inconvenience this may cause.

  1. Start Page
  2. LabKey Server SDMS
  3. Collaboration
  4. Electronic Data Capture (EDC)

Survey Designer: Examples

Documentation

Survey Designer: Examples

Print

This topic contains some example survey questions to suit specific scenarios. You can also find the JSON metadata structure built in for each type of question below.

Default Question Metadata Shown in the Survey Designer

Full Survey Examples:

Include HTML

You can include HTML in the JSON code, provide that:

  • the xtype is 'panel'
  • the html has no line breaks
The following survey includes HTML...

{
  "survey" : {
    "layout" : "auto",
    "showCounts" : false,
    "sections" : [ {
      "questions" : [ {
        "extConfig": {
          "xtype": "panel",
          "html": "<h2>Survey Instructions</h2><p><b>Hat Size</b><img 
           src='FULL_URL_TO_HAT_IMAGE' 
           height='100' width='100'/></p><p>Please select your hat size.</p><p><b>Weight</b> 
           <img src='FULL_URL_TO_SCALE_IMAGE' 
           height='100' width='100'/></p><p>Please specify your current weight in kilograms. 
           </p>"
        }
      }, {
        "name" : "HatSize",
        "caption" : "Hat Size",
        "shortCaption" : "HatSize",
        "hidden" : false,
        "jsonType" : "string",
        "inputType" : "text",
        "lookup" : {
          "schema" : "lists",
          "keyColumn" : "HatSizeName",
          "public" : true,
          "displayColumn" : "HatSizeName",
          "isPublic" : true,
          "queryName" : "HatSizes",
          "containerPath" : "/Tutorials/Survey Demo",
          "schemaName" : "lists",
          "table" : "HatSizes"
        },
        "required" : false,
        "width" : 800
      }, {
        "name" : "Weight",
        "caption" : "Weight",
        "shortCaption" : "Weight",
        "hidden" : false,
        "jsonType" : "int",
        "inputType" : "text",
        "required" : false,
        "width" : 800
      } ],
      "description" : null,
      "header" : true,
      "title" : "HatSizeAndWeight",
      "collapsible" : true,
      "defaultLabelWidth" : 350
    } ]
  }
}

...that renders as follows:

Auto Populate from an Existing Record

The following example assumes you have a List named "Participants" with the following fields:

  • SSN (this is your Primary Key, which is a string)
  • FirstName
  • LastName
  • Phone
When the List contains records, and a user enters a matching SSN number, the remaining fields in the survey will auto populate with data from the matching record.

Download the JSON code for this survey: survey-SSNautopop.json

Auto Populate with the Current User's Email

When a user changes the Patient Id field, the email field is auto populated using the currently logged on user's info.

Download the JSON code for this survey: survey-Emailautopop.json

Hidden Radio Group

When Option A is selected, a hidden radio group is shown below.

Download the JSON code for this survey: survey-hiddenRadioGroup.json

Hidden Question

A hidden question appears when the user enters particular values in two previous questions. In this example, when the user enters 'Yes' to questions 1 and 2, a 3rd previously hidden question appears.

Download the JSON code for this survey: TwoQuestions.json

Radio Buttons / Rendering Images

The following example renders radio buttons and an image. The 'questions' object holds an 'extConfig' object, which does most of the interesting work.

The 'start' object hides the field "Survey Label" from the user.

Download the JSON code for this survey: survey-RadioImage.json

Likert Scale

The following example offers Likert scale questions as radio buttons.

Download the JSON code for this survey: survey-Likert.json

Concatenate Values

When two fields are filled in, they auto-populate another field as a concatenated value.

Download the JSON code for this survey: survey-Concat.json

Checkbox with Conditional/Skip Logic

Two boxes pop-up when the user picks Other or Patient Refused. The boxes are text fields where an explanation can be provided.

Download the JSON code for this example: survey-Skip1.json

Text Field (w/ Skip Logic)

Shows conditional logic in a survey. Different sets of additional questions appear later in the survey, depending on whether the user enters "Yes" or "No" to an earlier question.

Download the JSON code for this example: survey-Skip2.json

The JSON metadata example for the 'DaysSick' field, for example, looks like this: 

...{
        "name" : "DaysSick",
        "caption" : "Days Sick",
        "shortCaption" : "Days Sick",
        "hidden" : false,
        "jsonType" : "string",
        "inputType" : "text",
        "required" : false,
        "width" : 800,
        "hidden": true, 
        "listeners" : { 
        	"change" : { 
          "question" : "sick", 
          "fn" : "function(me, cmp, newValue, oldValue){if (me) me.setVisible(newValue == 'Yes');} " 
        } 
      }
},...

Time Dropdown

The following example includes a question answered using a dropdown to select a time in 15 minutes increments.

Download the JSON code for this example: survey-timedropdown.json

Calculated Fields

The following example calculates values from some fields based on user entries in other fields:

  • Activity Score field = the sum of the Organ/Site scores, multiplied by 2 if Damage is Yes, plus the Serum IgG4 Concentration.
  • Total number of Urgent Organs = the sum of Urgent fields set to Yes.
  • Total number of Damaged Organs = the sum of Damaged fields set to Yes.
Download the JSON code for this example: survey-math.json

Hiding "Default Label"

The Label field loads data into the Label field of the surveys.Surveys table. To use an autogenerated value for the Label, see below. Autogenerated values are a modified timestamp, for example, "2017-08-16T19:05:28.014Z".

Add the following start object before the sections to hide the "Label" question.

{ 
  "survey" : { 
    "start": { 
       "useDefaultLabel": true 
    },
    "sections" : [{ 
...

Lookup from a Filtered Subset of a List

A Combobox (Lookup) question will give the user a dropdown selector populated from a list in a given container. If you want to have the dropdown only contain a filtered subset of that list, such as only 'in use' values or some other constraint, first create a custom grid view of that list that contains the subset you want. Then add the viewName parameter to the combobox "lookup" definition.

For example, if you have a list named "allSOPs" with a 'retired' field (set to true when an SOP is outdated) you could create a grid view that filtered to show only those which have not been marked 'retired' and name it, for example "activeSOPs". A combobox lookup showing that list might look like this:

{
    "jsonType": "int",
    "hidden": false,
    "width": 800,
    "inputType": "text",
    "name": "lkfield",
    "caption": "Lookup Field",
    "shortCaption": "Lookup Field",
    "required": false,
    "lookup": {
       "keyColumn": "Key",
       "displayColumn": "Value",
       "schemaName": "lists",
       "queryName": "allSOPs",
       "viewName": "activeSOPs",
       "containerPath": "/Project/..."
    }
}

The user would see only the list items in that specific custom grid view.

Include Tooltips or Hints for Questions

To have a survey question show a tooltip or hover hint, you can make use of an extConfig object following this example. Include a labelAttrTpl attribute set to provide the tooltip text as the data-qtip:

"questions": [
    {
    "extConfig": {
      "width": 800,
      "xtype": "textfield",
      "name": "test",
      "labelAttrTpl": " data-qtip='This tooltip should appear on the field label'",
      "fieldLabel": "Field with tooltips"
    }
  }
],

Default Question Metadata Types

Attachment

{
    "jsonType": "string",
    "hidden": false,
    "width": 800,
    "inputType": "file",
    "name": "attfield",
    "caption": "Attachment Field",
    "shortCaption": "Attachment Field",
    "required": false
}

Checkbox (Single)

{
    "jsonType": "boolean",
    "hidden": false,
    "width": 800,
    "inputType": "checkbox",
    "name": "boolfield",
    "caption": "Boolean Field",
    "shortCaption": "Boolean Field",
    "required": false
}

Checkbox Group (ExtJS)

{
  "extConfig": {
    "xtype": "fieldcontainer",
    "width": 800,
    "hidden": false,
    "name": "checkbox_group",
    "margin": "10px 10px 15px",
    "fieldLabel": "CB Group (ExtJS)",
    "items": [{
      "xtype": "panel",
      "border": true,
      "bodyStyle":"padding-left:5px;",
      "defaults": { 
        "xtype": "checkbox", 
        "inputValue": "true", 
        "uncheckedValue": "false"
      },
      "items": [
          { 
            "boxLabel": "CB 1", 
            "name": "checkbox_1" 
          },
          { 
            "boxLabel": "CB 2", 
            "name": "checkbox_2" 
          },
          { 
            "boxLabel": "CB 3", 
            "name": "checkbox_3" 
          }
      ]
    }]
  }
}

Combobox (Lookup)

Constrain the answers to the question to the values in a specified column in a list.

{
    "jsonType": "int",
    "hidden": false,
    "width": 800,
    "inputType": "text",
    "name": "lkfield",
    "caption": "Lookup Field",
    "shortCaption": "Lookup Field",
    "required": false,
    "lookup": {
       "keyColumn": "Key",
       "displayColumn": "Value",
       "schemaName": "lists",
       "queryName": "lookup1",
       "containerPath": "/Project/..."
    }
}

Combobox (ExtJS)

{
    "extConfig": {
        "width": 800,
        "hidden": false,
        "xtype": "combo",
        "name": "comboField",
        "fieldLabel": "Combobox (ExtJS)",
        "queryMode": "local",
        "displayField": "value",
        "valueField": "value",
        "emptyText": "Select...",
        "forceSelection": true,
        "store": {
            "fields": ["value"],
            "data" : [
                {"value": "Value1"},
                {"value": "Value2"}
            ]
        }
    }
}

Date Picker

{
    "jsonType": "date",
    "hidden": false,
    "width": 800,
    "inputType": "text",
    "name": "dtfield",
    "caption": "Date Field",
    "shortCaption": "Date Field",
    "required": false
}

Date & Time Picker

{
    "extConfig": {
        "width": 800,
        "xtype": "datetimefield",
        "name": "dtfield",
        "fieldLabel": "DateTime Field"
    }
}

The resulting field provides a calendar selection option for the date and a pulldown menu for choosing the time.

Display Field (ExtJS)

{
    "extConfig": {
        "width": 800,
        "xtype": "displayfield",
        "name": "dsplfield",
        "hideLabel": true,
        "value": "Some text."
    }
}

Double (Numeric)

{
    "jsonType": "float",
    "hidden": false,
    "width": 800,
    "inputType": "text",
    "name": "dblfield",
    "caption": "Double Field",
    "shortCaption": "Double Field",
    "required": false
}

Integer

{
    "jsonType": "int",
    "hidden": false,
    "width": 800,
    "inputType": "text",
    "name": "intfield",
    "caption": "Integer Field",
    "shortCaption": "Integer Field",
    "required": false
}

Number Range (ExtJS)

{
    "extConfig": {
        "xtype": "fieldcontainer",
        "fieldLabel": "Number Range",
        "margin": "10px 10px 15px",
        "layout": "hbox",
        "width": 800,
        "items": [
            { 
              "xtype": "numberfield", 
              "fieldLabel": "Min", 
              "name": "min_num", 
              "width": 175 
            },
            { 
              "xtype": "label", 
              "width": 25 
            },
            { 
              "xtype": "numberfield", 
              "fieldLabel": "Max", 
              "name": "max_num", 
              "width": 175 
            }
        ]
    }
}

Positive Integer (ExtJS)

{
    "extConfig": {
        "xtype": "numberfield",
        "fieldLabel": "Positive Integer",
        "name": "pos_int",
        "allowDecimals": false,
        "minValue": 0,
        "width": 800
    }
}

Survey Grid Question (ExtJS)

{
 "extConfig": {
     "xtype": "surveygridquestion",
     "name": "gridquestion",
     "columns": {
       "items": [{
          "text": "Field 1", 
          "dataIndex": "field1", 
          "width": 350,
          "editor": {
             "xtype": "combo", 
             "queryMode": "local", 
             "displayField":"value",
             "valueField": "value", 
             "forceSelection": true,
             "store": {
               "fields": ["value"], 
               "data" : [{
                 "value": "Value 1"
               }, {
                 "value": "Value 2"
               }, {
                 "value": "Value 3"
               }]
             }
          }
        },
        {
            "text": "Field 2", 
            "dataIndex": "field2", 
            "width": 200,
            "editor": {
              "xtype": "textfield"
            }
        },
        {
            "text": "Field 3", 
            "dataIndex": "field3", 
            "width": 200,
            "editor": {
              "xtype": "textfield"
             }
        }]
    },
    "store": {
        "xtype": "json",
        "fields": [
            "field1",
            "field2",
            "field3"
        ]
    }
 }
}

Survey Header/Footer Wiki

{"survey":{
   "headerWiki": {
      "name": "wiki_name",
      "containerPath": "/Project/..."
   },
   "footerWiki": {
      "name": "wiki_name",
      "containerPath": "/Project/..."
   },
   ...
}

Text Area

{
    "jsonType": "string",
    "hidden": false,
    "width": 800,
    "inputType": "textarea",
    "name": "txtfield",
    "caption": "Textarea Field",
    "shortCaption": "Textarea Field",
    "required": false
}

Customizing Autosave Options for Surveys

By default, the survey designer will autosave submissions in progress every minute (60000 milliseconds). If desired, you can disable this auto-save behavior entirely, or enable it but change the interval to something else. The relevant parameters are included in the JSON for the survey itself.

  • autosaveInterval: The interval (in milliseconds) that auto-saving of the survey results will occur. The default value is : 60000.
  • disableAutoSave: Set true to disable autosaving entirely. This setting takes precedence over the autoSaveInterval value and defaults to false.
A few examples follow.

To disable autosave, you would start the definition with: 

{
  "survey" : {
    "layout" : "auto",
    "showCounts" : false,
    "disableAutoSave" : true,
    "sections" : [ {...

To enable autosave but double the interval (saving every 2 minutes):

{
  "survey" : {
    "layout" : "auto",
    "showCounts" : false,
    "autoSaveInterval" : 120000,
    "disableAutoSave" : false,
    "sections" : [ {...

Other Examples

Download these examples of whole surveys:

Search

 

Docs & Product Feedback

 

Was this content helpful?

Log in or register an account to provide feedback

Pages

 

previousnext
 
expand allcollapse all