SurveyJS Form Library

https://surveyjs.io/form-library/documentation
Admin
SurveyJS Form Library is a free MIT-licensed client-side component that allows developers to render...
Tokens:995,996
Snippets:7,498
Trust Score:10
Update:1 week ago
Show doc for...
Tokens:
Raw
### Install dependencies, build clients, and start server

Source: https://surveyjs.io/form-library/documentation/multi-user-form-filling

Install npm dependencies, build the clients, and start the server. After running, open http://localhost:3001.

```bash
npm install
npm run build
npm run start
```

--------------------------------

### Install @lk77/vue3-color

Source: https://surveyjs.io/form-library/documentation/customize-question-types/third-party-component-integration-vue

Run this command to install the Vue 3 Color component used as an example in this integration.

```bash
npm install @lk77/vue3-color
```

--------------------------------

### Run the service locally with npm

Source: https://surveyjs.io/form-library/documentation/survey-json-validation

Install dependencies and start the service locally. The service will be available at http://localhost:3000.

```bash
npm i
npm run dev
```

--------------------------------

### startSurveyText property

Source: https://surveyjs.io/form-library/documentation/api-reference/survey-data-model

Gets or sets a caption for the Start button.

```APIDOC
## startSurveyText property

### Description
Gets or sets a caption for the Start button.

### Type
string (writable)

### Implemented in
SurveyModel

### See also
- firstPageIsStartPage
- Localization & Globalization
```

--------------------------------

### start method

Source: https://surveyjs.io/form-library/documentation/api-reference/survey-data-model

Starts the survey. Applies only if the survey has a start page.

```APIDOC
## start method

### Description
Starts the survey. Applies only if the survey has a start page.

### Type
() => boolean

### Implemented in
SurveyModel

### See also
- firstPageIsStartPage
- completeLastPage
```

--------------------------------

### Install survey-react-ui npm package

Source: https://surveyjs.io/form-library/documentation/get-started-react

Run this command to install the survey-react-ui package. The survey-core package is installed automatically as a dependency.

```bash
npm install survey-react-ui
```

--------------------------------

### Install ngx-color

Source: https://surveyjs.io/form-library/documentation/customize-question-types/third-party-component-integration-angular

Installs the ngx-color package, which provides the Angular Color component used as an example for integrating third-party components.

```bash
npm install ngx-color

```

--------------------------------

### firstPageIsStartPage property

Source: https://surveyjs.io/form-library/documentation/api-reference/survey-data-model?id=PageModel

Gets or sets a Boolean value that specifies whether the first page is a start page.

```APIDOC
## firstPageIsStartPage property

### Description
Gets or sets a Boolean value that specifies whether the first page is a start page. Refer to the following help topic for more information: Start Page.

### Type
boolean (readonly)

### Notes
This property is stored in the survey JSON definition and can be edited in the Survey Creator.

### Implemented in
SurveyModel

### Available since
v2.0.0

### See also
- startPage
- activePage
```

--------------------------------

### Enable start page and set start button text

Source: https://surveyjs.io/form-library/documentation/design-survey/create-a-multi-page-survey

Sets firstPageIsStartPage to true to add a Start button to the start page, and startSurveyText to change the button caption.

```javascript
const surveyJson = {
    firstPageIsStartPage: true,
    startSurveyText: "Take the Survey",
};

```

--------------------------------

### Install react-color and its TypeScript types

Source: https://surveyjs.io/form-library/documentation/customize-question-types/third-party-component-integration-react

Run this command to install the react-color component and its TypeScript type definitions.

```bash
npm install react-color @types/react-color

```

--------------------------------

### Install survey-angular-ui npm package

Source: https://surveyjs.io/form-library/documentation/get-started-angular

Run this command to install the survey-angular-ui package. The survey-core package is installed automatically as a dependency.

```bash
npm install survey-angular-ui
```

--------------------------------

### Install survey-vue3-ui npm package

Source: https://surveyjs.io/form-library/documentation/get-started-vue

Run this command to install the SurveyJS Form Library for Vue 3. The survey-core package is installed automatically as a dependency.

```bash
npm install survey-vue3-ui
```

--------------------------------

### Access the start page via survey.startPage

Source: https://surveyjs.io/form-library/documentation/design-survey/create-a-multi-page-survey

Creates a Survey.Model instance from the survey JSON and retrieves the start page using the startPage property.

```javascript
const survey = new Survey.Model(surveyJson);

const startPage = survey.startPage;

```

--------------------------------

### Deploy the service with Docker

Source: https://surveyjs.io/form-library/documentation/survey-json-validation

Build and run the service in a Docker container. The service will be available at http://localhost:3000.

```bash
docker build -t surveyjs-json-schema-validator .
docker run -d -p 3000:3000 surveyjs-json-schema-validator
```

--------------------------------

### displayValue expression example

Source: https://surveyjs.io/form-library/documentation/design-survey/conditional-logic

Returns a question's display text. The second parameter gets the display text for a specific value; without it, returns the display text for the current value. This example gets the display text for value 5 in a Dropdown question.

```json
"expression": "displayValue('my-dropdown-question', 5)"
```

--------------------------------

### Start page with introductory message and name input

Source: https://surveyjs.io/form-library/documentation/design-survey-create-a-quiz

The first page in the pages array serves as the start page. It contains an HTML introduction and a required text input for the user's name.

```javascript
const surveyJson = {
  pages: [{
    elements: [{
      type: "html",
      html: "You are about to start a quiz on American history. <br>You will have 10 seconds for every question and 25 seconds to end the quiz.<br>Enter your name below and click <b>Start Quiz</b> to begin."
    }, {
      type: "text",
      name: "username",
      titleLocation: "hidden",
      isRequired: true
    }]
  },
  // ...
  // Other quiz pages are configured here
  // ...
  ]
};
```

--------------------------------

### questionStartIndex

Source: https://surveyjs.io/form-library/documentation/api-reference/panelmodelbase?id=PanelModelBase

Gets or sets the starting number or letter for question numbering.

```APIDOC
## Property: questionStartIndex

### Description
Specifies a number or letter used to start numbering of elements inside this page/panel. You can include desired prefixes and postfixes alongside the number or letter.

### Type
`string` (readonly)

### Default Value
`"1."` (inherited from the `questionStartIndex` property specified for the parent panel, page, or survey)
```

--------------------------------

### Install Open Sans font package

Source: https://surveyjs.io/form-library/documentation/get-started-angular

Starting with SurveyJS v3.0.4, fonts are not included in SurveyJS packages. Install @fontsource/open-sans to load Open Sans and preserve the default appearance.

```bash
npm install @fontsource/open-sans
```

--------------------------------

### propertyValue expression example

Source: https://surveyjs.io/form-library/documentation/design-survey/conditional-logic

Returns the value of a property for a given question. This function is obsolete; use the dollar sign ($) syntax instead. This example gets the 'visible' property of 'question1'.

```json
"expression": "propertyValue('question1', 'visible')"
```

--------------------------------

### questionStartIndex property examples

Source: https://surveyjs.io/form-library/documentation/api-reference/page-model?id=PanelModelBase

Shows how to set the questionStartIndex property with different prefixes and postfixes to customize numbering of elements inside a panel/page.

```json
"questionStartIndex": "a.", // a., b., c., ...
"questionStartIndex": "#3", // #3, #4, #5, ...
"questionStartIndex": "(B)." // (B)., (C)., (D)., ...
```

--------------------------------

### chooseFiles method

Source: https://surveyjs.io/form-library/documentation/api-reference/survey-data-model?id=Question

Opens a dialog window for users to select files. Accepts an input element, a callback to process selected files, and an optional context object.

```APIDOC
## chooseFiles method

### Description
Opens a dialog window for users to select files.

### Method Signature
(input: HTMLInputElement, callback: (files: File[]) => void, context?: { element: Base; item?: any; elementType?: string; propertyName?: string; }) => void

### Parameters
- **input** (HTMLInputElement) - Required - A file input HTML element.
- **callback** ((files: File[]) => void) - Required - A callback function that you can use to process selected files. Accepts an array of JavaScript File objects.
- **context** ({ element: Base; item?: any; elementType?: string; propertyName?: string; }) - Optional - Context object.

### Implemented in
SurveyModel

### See also
- onOpenFileChooser
- onUploadFile
```

--------------------------------

### Custom question start index with questionStartIndex

Source: https://surveyjs.io/form-library/documentation/design-survey-configure-question-titles

Sets Survey's questionStartIndex to customize the starting number or letter, including prefixes and postfixes. Examples show "a.", "#3", and "(B).".

```json
const surveyJson = {
  // ...
  "questionStartIndex": "a.", // a., b., c., ...
  "questionStartIndex": "#3", // #3, #4, #5, ...
  "questionStartIndex": "(B)." // (B)., (C)., (D)., ...
}
```

--------------------------------

### chooseFiles method

Source: https://surveyjs.io/form-library/documentation/api-reference/survey-data-model

Opens a dialog window for users to select files. Accepts an input element and a callback to process selected files.

```APIDOC
## chooseFiles method

### Description
Opens a dialog window for users to select files.

### Method Signature
`(input: HTMLInputElement, callback: (files: File[]) => void, context?: { element: Base; item?: any; elementType?: string; propertyName?: string; }) => void`

### Parameters
- **input** (HTMLInputElement) - Required - A file input HTML element.
- **callback** ((files: File[]) => void) - Required - A callback function that you can use to process selected files. Accepts an array of JavaScript File objects.
- **context** ({ element: Base; item?: any; elementType?: string; propertyName?: string; }) - Optional - Additional context.

### Implemented in
`SurveyModel`

### See also
- `onOpenFileChooser`
- `onUploadFile`
```

--------------------------------

### visiblePages

Source: https://surveyjs.io/form-library/documentation/api-reference/survey-data-model

Returns an array of visible pages without the start page. To get an array of all pages, use the `pages` property.

```APIDOC
## visiblePages

### Description
Returns an array of visible pages without the start page. To get an array of all pages, use the `pages` property. If all pages are visible, the `pages` and `visiblePages` arrays are identical.

### Type
PageModel[] (readonly)

### Implemented in
SurveyModel

### See also
- Conditional Visibility
```

--------------------------------

### navigationButtonsLocation property

Source: https://surveyjs.io/form-library/documentation/api-reference/survey-data-model?id=Base

Gets or sets the position of the Start, Next, Previous, and Complete navigation buttons. Applies only if the `showNavigationButtons` property is `true`.

```APIDOC
## navigationButtonsLocation property

### Description
Gets or sets the position of the Start, Next, Previous, and Complete navigation buttons. Applies only if the `showNavigationButtons` property is `true`.

### Type
any (readonly)

### Default value
bottom

### Accepted values
- top
- bottom
- topBottom

### Implemented in
SurveyModel

### Available since
v2.0.0

### See also
- autoAdvanceEnabled
- showPrevButton
- showCompleteButton
```

--------------------------------

### showNavigationButtons property

Source: https://surveyjs.io/form-library/documentation/api-reference/survey-data-model

Gets or sets the visibility of the Start, Next, Previous, and Complete navigation buttons. Possible values: true (default) or false.

```APIDOC
## showNavigationButtons property

### Description
Gets or sets the visibility of the Start, Next, Previous, and Complete navigation buttons.
Possible values:
- `true` (default) - Displays the navigation buttons.
- `false` - Hides the navigation buttons. This setting may be useful if you implement custom external navigation.

### Type
any (writable)

### Default Value
True

### Implemented In
SurveyModel

### See Also
- navigationButtonsLocation
- autoAdvanceEnabled
- showPrevButton
- showCompleteButton
```

--------------------------------

### startPage property

Source: https://surveyjs.io/form-library/documentation/api-reference/survey-data-model

Returns the start page. Applies only if the `firstPageIsStartPage` property is set to `true`.

```APIDOC
## startPage property

### Description
Returns the start page. Applies only if the `firstPageIsStartPage` property is set to `true`.

### Type
PageModel (readonly)

### Implemented in
SurveyModel

### Available since
v2.0.0

### See also
- firstPageIsStartPage
- activePage
```

--------------------------------

### showNavigationButtons property

Source: https://surveyjs.io/form-library/documentation/api-reference/page-model?id=PanelModel

Gets or sets the visibility of the Start, Next, Previous, and Complete navigation buttons on this page. Overrides the survey-level setting. Default value is undefined.

```APIDOC
## showNavigationButtons property

### Description
Gets or sets the visibility of the Start, Next, Previous, and Complete navigation buttons on this page. Overrides the `showNavigationButtons` property specified on the survey-level.

### Type
string | boolean (writable)

### Default Value
`undefined` (the visibility depends on the survey-level setting)

### Implemented in
PageModel
```

--------------------------------

### Full Code: Fonts, Styles, Model, and SurveyComponent

Source: https://surveyjs.io/form-library/documentation/get-started-vue

Complete example combining font imports, style import, model definition, and survey rendering. This is the 'View Full Code' block that shows the entire setup.

```TypeScript
// main.ts
import '@fontsource/open-sans/400.css';
import '@fontsource/open-sans/600.css';
import '@fontsource/open-sans/700.css';

```

```Vue
<script setup lang="ts">
import 'survey-core/survey-core.css';
import { Model } from 'survey-core';

const surveyJson = {
  elements: [{
    name: "FirstName",
    title: "Enter your first name:",
    type: "text"
  }, {
    name: "LastName",
    title: "Enter your last name:",
    type: "text"
  }]
};

const survey = new Model(surveyJson);
</script>

<template>
  <!-- ... -->
</template>

```

--------------------------------

### isStartPage property

Source: https://surveyjs.io/form-library/documentation/api-reference/page-model

Returns `true` if this page is a start page.

```APIDOC
## isStartPage property

### Description
Returns `true` if this page is a start page.
Refer to the following help topic for more information on how to configure a start page: Start Page.

### Type
boolean **readonly**

### Implemented in
PageModel
```

--------------------------------

### show method

Source: https://surveyjs.io/form-library/documentation/api-reference/pop-up-survey-model

Shows the pop-up window.

```APIDOC
## show method

### Description
Shows the pop-up window.

### Type
() => void

### Implemented in
PopupSurveyModel
```

--------------------------------

### Import linter functions from survey-core/linter

Source: https://surveyjs.io/form-library/documentation/survey-json-validation

Import lintSurvey, renderFindings, and getRules from the survey-core/linter entry point.

```javascript
import { lintSurvey, renderFindings, getRules } from "survey-core/linter";
```
Tokens:
Raw