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

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 definition, 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 definition 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 definition:

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

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

Further Reading

Tell Us What You Think

Help us serve you better by taking this brief survey.
We are interested to learn more about your
experience of using our libraries.

We'd really appreciate your feedback.

Start the Survey

Approximate time to complete: 2 min.