From 50e48a29d608747dba033b67356ce2bce8905120 Mon Sep 17 00:00:00 2001 From: dmitrykurmanov Date: Tue, 15 Oct 2024 15:34:41 +0000 Subject: [PATCH] updated survey-library docs [azurepipelines skip] --- ...tion-types-add-custom-properties-to-a-form.md | 16 ++++++++++++++++ docs/data-validation.md | 2 -- docs/design-survey-conditional-logic.md | 14 ++++++-------- docs/icons.md | 15 +++++++++------ 4 files changed, 31 insertions(+), 16 deletions(-) diff --git a/docs/customize-question-types-add-custom-properties-to-a-form.md b/docs/customize-question-types-add-custom-properties-to-a-form.md index 55fd9207d4..a6c8acb97c 100644 --- a/docs/customize-question-types-add-custom-properties-to-a-form.md +++ b/docs/customize-question-types-add-custom-properties-to-a-form.md @@ -536,6 +536,22 @@ Serializer.addProperty("question", ); ``` +### `availableInMatrixColumn` + +A Boolean value that specifies whether the property is available in [matrix column](https://surveyjs.io/form-library/documentation/api-reference/multi-select-matrix-column-values) settings. Defaults to `false`. + +If you enable this setting, the property will be added to the same [category](#category) and at the same [position](#visibleindex) that it has in a standalone question. + +A matrix column's [`cellType`](https://surveyjs.io/form-library/documentation/api-reference/multi-select-matrix-column-values#cellType) must match the class name to which you add the property. For example, the following code adds a property to [Rating Scale](https://surveyjs.io/form-library/documentation/api-reference/rating-scale-question-model) questions and matrix columns of the `"rating"` `cellType`. + +```js +import { Serializer } from "survey-core"; + +Serializer.addProperty("rating", + { name: "myStringProperty", availableInMatrixColumn: true } +); +``` + ### `maxLength` A numeric value that specifies the maximum number of characters users can enter into the text input. diff --git a/docs/data-validation.md b/docs/data-validation.md index 5c1ce1cee7..b138adfe2f 100644 --- a/docs/data-validation.md +++ b/docs/data-validation.md @@ -28,8 +28,6 @@ const surveyJson = { Alternatively, you can [postpone data validation](#postpone-validation-until-survey-ends) until a respondent completes the survey. -> Immediate validation doesn't work with date input fields because of the way browsers process date values. In most browsers, the value is considered changed as soon as a user starts entering the date in a text input field. This means that a user may only enter the day without having the chance to enter the month and year before validation is triggered. For this reason, date input fields are validated before the survey is switched to the next page or completed. - ## Built-In Client-Side Validators SurveyJS Form Library supports multiple built-in client-side validators. The Required validator ensures that a question value is not empty. Enable a question's [`isRequired`](https://surveyjs.io/Documentation/Library?id=Question#isRequired) property to add the Required validator to this question. In addition, you can specify the [`requiredErrorText`](https://surveyjs.io/Documentation/Library?id=Question#requiredText) property to override the default error message: diff --git a/docs/design-survey-conditional-logic.md b/docs/design-survey-conditional-logic.md index 062a215d07..2d612f6c61 100644 --- a/docs/design-survey-conditional-logic.md +++ b/docs/design-survey-conditional-logic.md @@ -94,15 +94,13 @@ You can also use prefixes, such as `row`, `panel`, and `parentPanel`, to access - Single-Select Matrix - {row.columnname} - Accesses a cell in the same row. + Single-Select Matrix, Multi-Select Matrix, Dynamic Matrix + {row.columnname} + Accesses a cell in the same row. - Multi-Select Matrix - - - Dynamic Matrix + {rowName} + Accesses the row name (the value property within objects in the rows array). Use this placeholder if you need to distinguish between matrix rows. Dynamic Panel @@ -245,7 +243,7 @@ Expressions can include question names, variables, and calculated values (descri ### Supported Operators -The SurveyJS expression engine is built upon the PEG.js parser generator. The following table gives a brief overview of operators that you can use within expressions. For a detailed look at the grammar rules used by the expression parser, refer to the [`survey-library`](https://github.com/surveyjs/survey-library/blob/master/packages/survey-core/src/expressions/grammar.pegjs) GitHub repository. +The SurveyJS expression engine is built upon the PEG.js parser generator. The following table gives a brief overview of operators that you can use within expressions. For a detailed look at the grammar rules used by the expression parser, refer to the [`survey-library`](https://github.com/surveyjs/survey-library/blob/master/packages/survey-core/src/expressions/grammar.pegjs) GitHub repository. | Operator | Description | Expression example | | -------- | ----------- | ------------------ | diff --git a/docs/icons.md b/docs/icons.md index 33f6125a54..eb1cff4b6c 100644 --- a/docs/icons.md +++ b/docs/icons.md @@ -4,10 +4,7 @@ description: View the list of all available built-in icons used in SurveyJS libr --- # UI Icons -This help topic describes icons built into SurveyJS components and shows how you can replace them with custom icons. - -- [Built-In Icons](#built-in-icons) -- [Custom Icons](#custom-icons) +This help topic describes icons built into SurveyJS components and shows how you can customize them. ## Built-In Icons @@ -17,7 +14,11 @@ SurveyJS uses icons in SVG format. The following built-in SVG icons are availabl style="width:100%; border:0; overflow:hidden;"> -The following code shows how you can swap two built-in icons. It uses the `icon-export` icon instead of `icon-import`, and vice versa: +## Icon Customization + +### Swap Two Built-In Icons + +Swapping two built-in icons allows you to use one icon from the SurveyJS library instead of another, and vice versa. The following code shows how to swap the `icon-export` and `icon-import` icons: ```js Survey.settings.customIcons["icon-import"] = "icon-export"; @@ -29,7 +30,9 @@ settings.customIcons["icon-import"] = "icon-export"; settings.customIcons["icon-export"] = "icon-import"; ``` -## Custom Icons +
+ +### Use Custom SVG Icons If you want to replace a built-in icon with a custom SVG icon, call the `registerIconFromSvg` method on the `SvgRegistry` object. Pass the name of the built-in icon as the first argument and the custom icon markup converted to a string as the second argument. In the following code, a custom icon replaces the `icon-delete` icon: