DOCSEARCHbyAlgolia
Submit Docs

SurveyJS Form Library

repository·master·Indexed 26 days ago

https://github.com/surveyjs/survey-library

A JSON-driven engine for rendering complex forms, quizzes, and surveys in web applications. It consists of a platform-independent core (survey-core) and platform-specific UI rendering packages for Angular (survey-angular-ui), React (survey-react-ui), Vue (survey-vue3-ui), and vanilla JavaScript (survey-js-ui). The library supports major modern JavaScript frameworks and provides complete control over data storage and server integration.

Tokens
124.5K
Snippets
209
Records
723
Agent score
87%

What's inside survey-library

  1. Overview of SurveyJS Form Library UI

    master

    SurveyJS Form Library UI is a free, open-source, MIT-licensed JavaScript library designed for building dynamic, data-driven, and multi-language survey forms, polls, and quizzes. It is optimized for vanilla JavaScript applications but can also be integrated with major frontend frameworks.

    Key Features:

    • Framework Support: Native integrations for React, Angular, and Vue, plus compatibility with any other framework.
    • Core Engine: Uses a tiny and fast Preact library at its core.
    • Question Types: Includes 20+ built-in question types with support for custom types.
    • Customization: Built-in themes, CSS customization, and TypeScript support.
    • Validation & Localization: Supports answer validation and community-supported UI localization in over 50 languages.
    • Backend Agnostic: Integrates with any backend framework (PHP, NodeJS, ASP.NET) and any server/database combination.

  2. Overview of SurveyJS Form Library

    master
    SurveyJS Form Library is an MIT-licensed, client-side UI component designed to render dynamic JSON-based forms in any JavaScript application. It allows developers to collect user responses and send form data to their own databases. The library supports complex use cases such as multi-page forms, quizzes, scored surveys, calculator forms, and pop-up surveys. It is highly extensible, supporting custom input fields, custom rendering, and integration with 3rd-party libraries.

  6. Work with question types in SurveyJS

    master

    SurveyJS provides a variety of specialized classes for different question types. All questions inherit from the Question base class. Key question models include:

    • Text & Input: QuestionTextModel (Single-Line), QuestionCommentModel (Long Text), QuestionMultipleTextModel (Multiple Textboxes).
    • Selection: QuestionDropdownModel, QuestionCheckboxModel, QuestionRadiogroupModel, QuestionTagboxModel (Multi-Select Dropdown).
    • Complex/Matrix: QuestionMatrixModel (Single-Select), QuestionMatrixDropdownModel (Multi-Select), QuestionMatrixDynamicModel (Dynamic Matrix), QuestionPanelDynamicModel (Dynamic Panel).
    • Specialized: QuestionFileModel (File Upload), QuestionRatingModel (Rating Scale), QuestionSliderModel (Slider), QuestionRankingModel (Ranking), QuestionImagePickerModel (Image Picker), QuestionSignaturePadModel (Signature).
    • Other: QuestionBooleanModel (Yes/No), QuestionExpressionModel (Expression), QuestionHtmlModel (HTML content).

  7. Implement validation with SurveyValidator

    master

    Validation is handled by classes implementing the SurveyValidator base class. Common validators include:

    • EmailValidator: Validates e-mail addresses.
    • RegexValidator: Validates values against a regular expression.
    • NumericValidator: Validates numeric values.
    • TextValidator: Validates text values.
    • AnswerCountValidator: Validates the number of selected answers (e.g., for Checkboxes).
    • ExpressionValidator: Validates using expressions.

  8. Use input masks for formatted input

    master

    Input masks can be applied to questions to enforce specific formats. All masks implement the InputMaskBase class. Supported mask types include:

    • InputMaskNumeric: Numeric format.
    • InputMaskCurrency: Currency format.
    • InputMaskDateTime: Date and time format.
    • InputMaskPattern: Custom pattern format.

  10. The structure of a SurveyJS survey object

    master

    A survey is a JSON object with the following structural hierarchy:

    1. Survey (Root): Contains top-level properties like title and an array of pages.
    2. Page: An object within the pages array. It contains a name and an elements array.
    3. Elements: Objects within the elements array. These are either questions or panels.

    Note: If a survey does not use a page structure, the elements array can be placed at the root level; however, the library will automatically wrap them in a page.

    Core Properties:

    • name: Required for questions. Must be unique across the entire survey. It is the key used in the final result data.
    • title: The text displayed to the respondent. If title is omitted, the name is used as the display text.

  11. Understand SurveyJS Survey Structure

    master

    A survey is organized into a hierarchy of pages, panels, and questions:

    • Pages: The top-level containers for survey content.
    • Panels: Used to group questions together. Panels can be nested within other panels.
    • Questions: The individual input elements (e.g., text, checkboxes) within a page or panel.

    This structure allows for complex, organized forms with logical groupings.