Cart Licenses Contact Support Online Creator Log in/Register
Try
Buy
v 1.9.50

Create Specialized Question Types

Built-in question types are versatile and multi-functional, but in some cases, you need a question type with a more specific functionality. For example, you need to pre-populate a Dropdown with a country list. You can use a regular Dropdown and customize it directly or you can create a specialized question type. The first approach is more straightforward, but the second results in a more reusable solution. Let's consider both.

The first example pre-populates a standard Dropdown question. You can specify the choices or choicesByUrl property (depending on whether the choices come from a server or not). The following code shows a Country question configured in this manner:

{
  "name": "country",
  "type": "dropdown",
  "placeholder": "Select a country...",
  "choicesByUrl": {
    "url": "https://surveyjs.io/api/CountriesExample"
  }
}

If you add this question to the Toolbox, end users can use it in their surveys. However, this approach has a number of drawbacks:

  • End users can edit the choicesByUrl property and break the functionality.
  • If the question needs modifications (for example, if the server URL has changed), end users have to modify every created instance of this question individually.
  • In the JSON schema, your custom question looks like a regular Dropdown question.

To avoid these drawbacks, use a different approach: add your custom question type to the survey's ComponentCollection:

Survey.ComponentCollection.Instance.add({
  // A unique name; must use lowercase
  name: "country", 
  // A display name used in the Toolbox
  title: "Country", 
  // A JSON schema for the base question type (Dropdown in this case)
  questionJSON: {
    "type": "dropdown",
    "placeholder": "Select a country...",
    "choicesByUrl": {
      "url": "https://surveyjs.io/api/CountriesExample",
    }
  }
});

This approach gives you the following advantages:

  • A corresponding toolbox item appears automatically.

  • End users cannot break the functionality because the Property Grid hides the questionJSON object properties.

  • If you modify the question configuration, changes automatically apply to every instance of this question.

  • A cleaner JSON schema:

    {
      "type": "country",
      "name": "question1"
    }
    

View the "Country Component" example View the "Order Table Component" example View the "Order Grid Component" example

Further Reading