UNPKG

survey-creator-core

Version:

Use SurveyJS Creator to create or edit JSON for SurveyJS Form Library.

868 lines 103 kB
import { Base, SurveyModel, Question, PanelModel, PageModel, IElement, JsonObjectProperty, ActionContainer, IAction, Action, IPanel, SurveyElement, ItemValue, QuestionSelectBase, QuestionRowModel, LocalizableString, ILocalizableString, ILocalizableOwner, PopupBaseViewModel, EventBase, MatrixDropdownColumn, ISurveyElement, ITheme } from "survey-core"; import { ICreatorPlugin, ISurveyCreatorOptions, ICollectionItemAllowOperations, ITabOptions } from "./creator-settings"; import { DragDropChoices } from "survey-core"; import { QuestionToolbox, QuestionToolboxItem } from "./toolbox"; import { PropertyGridModel } from "./property-grid"; import { ICreatorSelectionOwner } from "./selection-owner"; import { SelectionHistory } from "./selection-history"; import { SurveyLogic } from "./components/tabs/logic"; import { Notifier } from "survey-core"; import { UndoRedoManager } from "./plugins/undo-redo/undo-redo-manager"; import { UndoRedoController } from "./plugins/undo-redo/undo-redo-controller"; import { CreatorResponsivityManager } from "./creator-responsivity-manager"; import { SidebarModel } from "./components/side-bar/side-bar-model"; import { ICreatorOptions } from "./creator-options"; import { ThemeTabPlugin } from "./components/tabs/theme-plugin"; import { DragDropSurveyElements } from "./dragdrop-survey-elements"; import { PageAdorner } from "./components/page"; import { ElementDeletingEvent, PropertyGetReadOnlyEvent, ElementGetDisplayNameEvent, ElementAllowOperationsEvent, ElementGetActionsEvent, PropertyShowingEvent, PropertyGridSurveyCreatedEvent, PropertyEditorCreatedEvent, PropertyEditorUpdateTitleActionsEvent, PropertyGridShowPopupEvent, CollectionItemAllowOperationsEvent, CollectionItemAddedEvent, FastEntryItemsEvent as FastEntryFinishedEvent, MatrixColumnAddedEvent, ConfigureTablePropertyEditorEvent, PropertyDisplayCustomErrorEvent, BeforePropertyChangedEvent, ConditionGetQuestionListEvent, GetConditionOperatorEvent, LogicRuleGetDisplayTextEvent, ModifiedEvent, QuestionAddedEvent, PanelAddedEvent, PageAddedEvent, QuestionConvertingEvent, PageGetFooterActionsEvent, SurveyInstanceCreatedEvent, DesignerSurveyCreatedEvent, PreviewSurveyCreatedEvent, NotifyEvent, ElementFocusingEvent, ElementFocusedEvent, OpenFileChooserEvent, UploadFileEvent, TranslationStringVisibilityEvent, TranslationImportItemEvent, TranslationImportedEvent, TranslationExportItemEvent, MachineTranslateEvent, TranslationItemChangingEvent, DragDropAllowEvent, CreateCustomMessagePanelEvent, ActiveTabChangingEvent, ActiveTabChangedEvent, BeforeUndoEvent, BeforeRedoEvent, PageAddingEvent, DragStartEndEvent, ElementGetExpandCollapseStateEvent, ElementGetExpandCollapseStateEventReason, AfterPropertyChangedEvent, PropertyValueChangingEvent, PropertyValueChangedEvent, PropertyAddingEvent, GetPropertyReadOnlyEvent, ElementSelectingEvent, ElementSelectedEvent, DefineElementMenuItemsEvent, CreatorThemePropertyChangedEvent, CreatorThemeSelectedEvent, AllowInplaceEditEvent, AllowAddElementEvent } from "./creator-events-api"; import { ExpandCollapseManager } from "./expand-collapse-manager"; import { ICreatorTheme } from "./creator-theme/creator-themes"; import { TabbedMenuContainer, TabbedMenuItem } from "./tabbed-menu"; import "./components/creator.scss"; import "./components/string-editor.scss"; import "./creator-theme/creator.scss"; export interface IKeyboardShortcut { name?: string; affectedTab?: string; hotKey: { ctrlKey?: boolean; keyCode: number; }; macOsHotkey?: { shiftKey?: boolean; keyCode: number; }; execute: (context: any) => void; } export declare class CreatorAction extends Action { } export declare class FooterToolbarActionContainer extends ActionContainer { protected getDefaultCssClasses(): { root: string; item: string; itemWithTitle: string; itemAsIcon: string; itemActive: string; itemPressed: string; itemIcon: string; itemTitle: string; itemTitleWithIcon: string; }; } export declare class ToolbarActionContainer extends FooterToolbarActionContainer { private creator; constructor(creator: SurveyCreatorModel); protected getRenderedActions(): Array<Action>; } export type toolboxLocationType = "left" | "right" | "sidebar"; export declare class CreatorEvent<T> extends EventBase<SurveyCreatorModel, T> { } /** * A class with properties, methods, and events that allow you to configure Survey Creator and manage its elements. * * [View Demo](https://surveyjs.io/survey-creator/examples/free-nps-survey-template/ (linkStyle)) */ export declare class SurveyCreatorModel extends Base implements ISurveyCreatorOptions, ICreatorSelectionOwner, ILocalizableOwner { protected options: ICreatorOptions; getMarkdownHtml(text: string, name: string): string; getRenderer(name: string): string; getRendererContext(locStr: LocalizableString): any; getProcessedText(text: string): string; getLocale(): string; /** * Specifies whether to display the [Designer](https://surveyjs.io/survey-creator/documentation/end-user-guide/user-interface#designer-tab) tab. * * Default value: `true` * @see activeTab * @see onSurveyInstanceCreated */ showDesignerTab: boolean; /** * Specifies whether to display the [JSON Editor](https://surveyjs.io/survey-creator/documentation/end-user-guide/user-interface#json-editor-tab) tab. * * Default value: `true` * @see activeTab */ showJSONEditorTab: boolean; showTestSurveyTab: boolean; /** * Specifies whether to display the [Preview](https://surveyjs.io/survey-creator/documentation/end-user-guide/user-interface#preview-tab) tab. * * Default value: `true` * @see activeTab * @see onSurveyInstanceCreated */ get showPreviewTab(): boolean; set showPreviewTab(val: boolean); /** * Specifies whether to display the [Themes](https://surveyjs.io/survey-creator/documentation/end-user-guide/user-interface#themes-tab) tab. * * Default value: `false` * * Use the [`themeEditor`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#themeEditor) object to manage UI themes available in the Themes tab. * * [View Demo](https://surveyjs.io/survey-creator/examples/change-form-theme/ (linkStyle)) * @see activeTab * @see saveThemeFunc */ showThemeTab: boolean; /** * Specifies whether users can modify the [Survey Creator theme](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#creatorTheme). Applies only if [`propertyGridNavigationMode`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#propertyGridNavigationMode) is `"buttons"`. * * Default value: `true` * * [View Demo](https://surveyjs.io/survey-creator/examples/dynamic-ui-customization/ (linkStyle)) */ showCreatorThemeSettings: boolean; /** * Specifies whether the "Zoom In", "Zoom Out", and "Zoom to 100%" buttons are available. * * Default value: `true` * * [View Demo](https://surveyjs.io/survey-creator/examples/expand-and-collapse-survey-elements/ (linkStyle)) */ allowZoom: boolean; /** * Specifies whether to display the [Translation](https://surveyjs.io/survey-creator/documentation/end-user-guide/user-interface#translation-tab) tab. * * Default value: `false` * * [View Demo](https://surveyjs.io/survey-creator/examples/create-multilingual-forms/ (linkStyle)) * @see activeTab * @see clearTranslationsOnSourceTextChange */ showTranslationTab: boolean; /** * Specifies whether to display the [Logic](https://surveyjs.io/survey-creator/documentation/end-user-guide/user-interface#logic-tab) tab. * * Default value: `true` * @see activeTab */ showLogicTab: boolean; useTableViewInLogicTab: boolean; pageHoverDelay: number; /** * Allows users to edit choice values instead of choice texts on the design surface. * * Default value: `false` (users edit choice texts) * * If you enable this property, users cannot edit choice texts because the Property Grid hides the Text column for choices, rate values, columns and rows in [Single-Select Matrix](https://surveyjs.io/form-library/documentation/api-reference/matrix-table-question-model), and rows in [Multi-Select Matrix](https://surveyjs.io/form-library/documentation/api-reference/matrix-table-with-dropdown-list) questions. * @see useElementTitles * @see onAllowInplaceEdit */ inplaceEditChoiceValues: boolean; /** * @deprecated Use the [`inplaceEditChoiceValues`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#inplaceEditChoiceValues) property instead. */ get inplaceEditForValues(): boolean; set inplaceEditForValues(val: boolean); /** * Specifies whether to display a table with survey results after completing a survey in the Preview tab. * * Default value: `true` */ previewShowResults: boolean; private _showOneCategoryInPropertyGrid; get showOneCategoryInPropertyGrid(): boolean; set showOneCategoryInPropertyGrid(newValue: boolean); /** * Specifies how users navigate categories in the Property Grid. * * Accepted values: * * - `"accordion"`\ * The Property Grid displays a stacked list of categories that users can expand or collapse to reveal nested properties. * * - `"buttons"` (default)\ * The Property Grid displays the properties of a currently selected category. Users can switch between categories using buttons on the right side of the Property Grid. * * [Accordion Mode Demo](https://surveyjs.io/survey-creator/examples/property-grid-accordion-view/ (linkStyle)) * * [Buttons Mode Demo](https://surveyjs.io/survey-creator/examples/free-nps-survey-template/ (linkStyle)) */ get propertyGridNavigationMode(): "buttons" | "accordion"; set propertyGridNavigationMode(newValue: "buttons" | "accordion"); get allowEditSurveyTitle(): boolean; set allowEditSurveyTitle(val: boolean); /** * Specifies whether users can see and edit the survey header and related survey properties. * * Default value: `true` */ get showSurveyHeader(): boolean; set showSurveyHeader(val: boolean); /** * @deprecated Use the [`showSurveyHeader`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#showSurveyHeader) property instead. */ get showSurveyTitle(): boolean; set showSurveyTitle(val: boolean); get haveCommercialLicense(): boolean; set haveCommercialLicense(val: boolean); get licenseText(): string; slk(val: string): void; /** * Specifies whether to automatically save a survey or theme JSON schema each time survey or theme settings are changed. * * Default value: `false` * * If you enable this property, Survey Creator calls the [`saveSurveyFunc`](#saveSurveyFunc) or [`saveThemeFunc`](#saveThemeFunc) function to save the survey or theme JSON schema. The schemas are saved with a 500-millisecond delay after users change settings. You can specify the [`autoSaveDelay`](#autoSaveDelay) property to increase or decrease the delay. * * [View Demo](https://surveyjs.io/survey-creator/examples/set-how-survey-configuration-changes-are-saved/ (linkStyle)) */ autoSaveEnabled: boolean; /** * @deprecated Use the [`autoSaveEnabled`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#autoSaveEnabled) property instead. */ get isAutoSave(): boolean; set isAutoSave(val: boolean); showOptions: boolean; showSearch: boolean; generateValidJSON: boolean; _currentAddQuestionType: string; /** * Specifies whether the "Add Question" button remembers the type of the most recently added question and uses it for subsequent questions. * * Default value: `true` * @see addNewQuestionLast */ rememberLastQuestionType: boolean; get currentAddQuestionType(): string; set currentAddQuestionType(val: string); /** * Specifies a default device for survey preview in the Preview tab. * * Accepted values: * * - `"desktop"` (default) * - `"iPhoneSE"` * - `"iPhone15"` * - `"iPhone15Plus"` * - `"iPad"` * - `"iPadMini"` * - `"androidPhone"` * - `"androidTablet"` * - `"microsoftSurface"` */ previewDevice: string; /** * Specifies the orientation of the selected device in the Preview tab. * * Accepted values: * * - `"landscape"` (default) * - `"portrait"` */ previewOrientation: "landscape" | "portrait"; set startEditTitleOnQuestionAdded(value: boolean); get startEditTitleOnQuestionAdded(): boolean; private startEditTitleOnQuestionAddedValue; private isRTLValue; private alwaySaveTextInPropertyEditorsValue; private toolbarValue; responsivityManager: CreatorResponsivityManager; footerToolbar: ActionContainer; private changePageModifications; private pageEditModeValue; /** * Specifies how Survey Creator users edit survey pages. * * Accepted values: * * - `"standard"` (default)\ * Questions and panels are divided between pages. Users can scroll the design surface to reach a required page. * * - `"single"`\ * All questions and panels belong to a single page. Users cannot add or remove pages. * * - `"bypage"`\ * Questions and panels are divided between pages. Users can use the page navigator to switch to a required page. * * [View Page-By-Page Mode Demo](https://surveyjs.io/survey-creator/examples/page-level-editing/ (linkStyle)) * @see allowModifyPages */ get pageEditMode(): "standard" | "single" | "bypage"; set pageEditMode(val: "standard" | "single" | "bypage"); surveyValue: SurveyModel; get toolbarItems(): Array<Action>; get toolbar(): ActionContainer; protected _findAction(id: string): Action; dragDropSurveyElements: DragDropSurveyElements; dragDropChoices: DragDropChoices; private selectedElementValue; private newQuestions; private newPanels; private newQuestionChangedNames; private selectionHistoryControllerValue; private saveSurveyFuncValue; private saveThemeFuncValue; get viewType(): string; set viewType(val: string); get showingViewName(): string; get isDesignerShowing(): boolean; showDesigner(): void; get isTestSurveyShowing(): boolean; get isPreviewShowing(): boolean; showTestSurvey(): void; showPreview(): void; protected plugins: { [name: string]: ICreatorPlugin; }; /** * @deprecated Use the [`addTab(tabOptions)`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#addTab) method instead. */ addPluginTab(name: string, plugin: ICreatorPlugin, title?: string, componentName?: string, index?: number): void; /** * Adds a custom tab to Survey Creator. * * This method accepts an `ITabOptions` object with the following properties: * * - `name`: `string`\ * A unique tab ID. * * - `plugin`: `ICreatorPlugin`\ * An object that allows you to handle user interactions with the tab. * * - `title`: `string`\ * *(Optional)* A tab caption. If `title` is undefined, the `name` property value is displayed instead. To localize the caption, add its translations to the `ed` object within [localization dictionaries](https://github.com/surveyjs/survey-creator/tree/90de47d2c9da49b06a7f97414026d70f7acf05c6/packages/survey-creator-core/src/localization) and pass `ed.propertyName` as the `title` property. * * - `iconName`: `string`\ * *(Optional)* An [icon name](https://surveyjs.io/form-library/documentation/icons). Icons are used when the tab bar doesn't have enough width to display tab titles. * * - `componentName`: `string`\ * *(Optional)* The name of the component that renders tab markup. Default value: `"svc-tab-" + name`. * * - `index`: `number`\ * *(Optional)* A zero-based index that specifies the tab's position relative to other tabs. * * [View Demo](https://surveyjs.io/survey-creator/examples/modify-tab-bar/ (linkStyle)) * @param tabOptions An object that configures the custom tab. */ addTab(tabOptions: ITabOptions): void; addPlugin(name: string, plugin: ICreatorPlugin): void; private removePlugin; private getTabIndex; getPlugin<P extends ICreatorPlugin = ICreatorPlugin>(name: string): P; private fixPluginName; /** * An event that is raised before a survey element (a question, panel, or page) is deleted. * @see deleteElement */ onElementDeleting: EventBase<SurveyCreatorModel, ElementDeletingEvent>; /** * An event that is raised when Survey Creator sets the read-only status for a survey element property. Use this event to change the read-only status for individual properties. */ onPropertyGetReadOnly: EventBase<SurveyCreatorModel, PropertyGetReadOnlyEvent>; /** * @deprecated Use the [`onPropertyGetReadOnly`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#onPropertyGetReadOnly) event instead. */ onGetPropertyReadOnly: EventBase<SurveyCreatorModel, GetPropertyReadOnlyEvent>; /** * An event that is raised when Survey Creator [instantiates a survey to display a UI element](https://surveyjs.io/survey-creator/documentation/property-grid-customization#add-custom-properties-to-the-property-grid). Handle this event to customize the UI element by modifying the survey. * * For information on event handler parameters, refer to descriptions within the interface. * * [Design Mode Survey Instance](https://surveyjs.io/survey-creator/documentation/customize-survey-creation-process#design-mode-survey-instance (linkStyle)) * * [Preview Mode Survey Instance](https://surveyjs.io/survey-creator/documentation/customize-survey-creation-process#preview-mode-survey-instance (linkStyle)) * * > If you want this event raised at startup, assign a survey JSON schema to the [`JSON`](#JSON) property *after* you add a handler to the event. If the JSON schema should be empty, specify the `JSON` property with an empty object. * @see onSurveyInstanceSetupHandlers */ onSurveyInstanceCreated: EventBase<SurveyCreatorModel, SurveyInstanceCreatedEvent>; /** * An event that lets you attach event handlers to a [survey instance used for displaying a Survey Creator UI element](https://surveyjs.io/survey-creator/documentation/property-grid-customization#add-custom-properties-to-the-property-grid). * * For information on event handler parameters, refer to descriptions within the interface. * * > This event is raised *before* the survey instance is initialized with a survey JSON schema. Therefore, you cannot access individual questions, panels, and pages within the event handler. If you need to customize those survey elements, handle the [`onSurveyInstanceCreated`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#onSurveyInstanceCreated) event instead. */ onSurveyInstanceSetupHandlers: EventBase<SurveyCreatorModel, SurveyInstanceCreatedEvent>; /** * An event that is raised when Survey Creator obtains a survey element name to display it in the UI. * * Handle this event to replace survey element names in the UI with custom display texts. If you only want to replace the names with survey element titles, enable the [`useElementTitles`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#useElementTitles) property instead of handling this event. */ onElementGetDisplayName: EventBase<SurveyCreatorModel, ElementGetDisplayNameEvent>; /** * @deprecated Use the [`onElementGetDisplayName`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#onElementGetDisplayName) event instead. */ onGetObjectDisplayName: EventBase<SurveyCreatorModel, ElementGetDisplayNameEvent>; onHtmlToMarkdown: EventBase<SurveyCreatorModel, any>; /** * An event that is raised when Survey Creator obtains the expand/collapse state of a survey element on the design surface. Handle this event to set a required state. * * For information on event handler parameters, refer to descriptions within the interface. * * [View Demo](https://surveyjs.io/survey-creator/examples/expand-and-collapse-survey-elements/ (linkStyle)) * @see [ICreatorOptions.collapseQuestions](https://surveyjs.io/survey-creator/documentation/api-reference/icreatoroptions#collapseQuestions) * @see [ICreatorOptions.collapsePanels](https://surveyjs.io/survey-creator/documentation/api-reference/icreatoroptions#collapsePanels) * @see [ICreatorOptions.collapsePages](https://surveyjs.io/survey-creator/documentation/api-reference/icreatoroptions#collapsePages) * @see expandCollapseButtonVisibility * @see collapseAll * @see expandAll */ onElementGetExpandCollapseState: EventBase<SurveyCreatorModel, ElementGetExpandCollapseStateEvent>; /** * An event that is raised when Survey Creator obtains permitted operations for a survey element. Use this event to disable user interactions with a question, panel, or page on the design surface. * * For information on event handler parameters, refer to descriptions within the interface. * * To disable a user interaction, set the correponding `allow...` property to `false`. * * [Specify Adorner Visibility](https://surveyjs.io/survey-creator/documentation/customize-survey-creation-process#specify-adorner-availability (linkStyle)) * @see onCollectionItemAllowOperations */ onElementAllowOperations: EventBase<SurveyCreatorModel, ElementAllowOperationsEvent>; /** * An event that is raised before adding an element to the survey. Use it to control which elements can be added by allowing or preventing the action. */ onAllowAddElement: EventBase<SurveyCreatorModel, AllowAddElementEvent>; /** * An event that is raised when Survey Creator obtains [adorners](https://surveyjs.io/survey-creator/documentation/customize-survey-creation-process#specify-adorner-availability) for a survey element. Use this event to hide and modify predefined adorners or add a custom adorner. * * For information on event handler parameters, refer to descriptions within the interface. * * [View Demo](https://surveyjs.io/survey-creator/examples/create-custom-adorners/ (linkStyle)) * @see onElementAllowOperations * @see onPageGetFooterActions */ onElementGetActions: EventBase<SurveyCreatorModel, ElementGetActionsEvent>; /** * @deprecated Use the [`onElementGetActions`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#onElementGetActions) event instead. */ onDefineElementMenuItems: EventBase<SurveyCreatorModel, DefineElementMenuItemsEvent>; /** * An event that is raised when Survey Creator adds properties to a survey element selected on the design surface. Handle this event if you want to cancel the addition of certain properties and thus [hide them from the Property Grid](https://surveyjs.io/survey-creator/documentation/property-grid-customization#hide-properties-from-the-property-grid). * * For information on event handler parameters, refer to descriptions within the interface. * * [View Demo](https://surveyjs.io/survey-creator/examples/remove-properties-from-property-grid/ (linkStyle)) */ onPropertyShowing: EventBase<SurveyCreatorModel, PropertyShowingEvent>; onCanShowProperty: EventBase<SurveyCreatorModel, any>; /** * @deprecated Use the [`onPropertyShowing`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#onPropertyShowing) event instead. */ onShowingProperty: EventBase<SurveyCreatorModel, PropertyAddingEvent>; /** * @deprecated Use the [`onSurveyInstanceCreated`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#onSurveyInstanceCreated) event instead. */ onPropertyGridSurveyCreated: EventBase<SurveyCreatorModel, PropertyGridSurveyCreatedEvent>; /** * An event that is raised when a property editor is created in the Property Grid. Use this event to modify the property editor or add event handlers to it. * @see onConfigureTablePropertyEditor * @see onSurveyInstanceCreated */ onPropertyEditorCreated: EventBase<SurveyCreatorModel, PropertyEditorCreatedEvent>; /** * An event that is raised when title actions are added to a property editor. Title actions are most often used to reveal property hints. Handle this event you want to add, remove, or modify the title actions. * * For information on event handler parameters, refer to descriptions within the interface. * * [View Demo](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#onPropertyEditorUpdateTitleActions (linkStyle)) */ onPropertyEditorUpdateTitleActions: EventBase<SurveyCreatorModel, PropertyEditorUpdateTitleActionsEvent>; /** * An event that is raised before Survey Creator displays a pop-up window called from the Property Grid. This window allows users to edit choices, conditions, etc. Use this event to customize the pop-up window, for example, add custom action buttons. */ onPropertyGridShowPopup: EventBase<SurveyCreatorModel, PropertyGridShowPopupEvent>; /** * @deprecated Use the [`onPropertyGridShowPopup`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#onPropertyGridShowPopup) event instead. */ onPropertyGridShowModal: EventBase<SurveyCreatorModel, PropertyGridShowPopupEvent>; onCanDeleteItem: EventBase<SurveyCreatorModel, any>; onCollectionItemDeleting: EventBase<SurveyCreatorModel, any>; /** * An event that is raised when Survey Creator obtains permitted operations for a collection item (a choice option in Choices, a column or row in Columns, etc.). Use this event to prevent users from adding, deleting, or editing a particular collection item. * @see onElementAllowOperations */ onCollectionItemAllowOperations: EventBase<SurveyCreatorModel, CollectionItemAllowOperationsEvent>; /** * An event that is raised when users add a new collection item (a choice option to Choices, a column or row to Columns, etc.). Use this event to modify this item. * * For information on event handler parameters, refer to descriptions within the interface. * * > This event is not raised when users add a new column to a [Multi-Select Matrix](https://surveyjs.io/form-library/documentation/api-reference/matrix-table-with-dropdown-list) or [Dynamic Matrix](https://surveyjs.io/form-library/documentation/api-reference/dynamic-matrix-table-question-model). For these cases, handle the [`onMatrixColumnAdded`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#onMatrixColumnAdded) event instead. * @see onFastEntryFinished * @see onCollectionItemAllowOperations */ onItemValueAdded: EventBase<SurveyCreatorModel, CollectionItemAddedEvent>; /** * An event that is raised when users finish editing collection items (choices, rows, columns) in a pop-up window. * * Survey authors can specify collection items using a table UI in Property Grid (see the [`onItemValueAdded`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#onItemValueAdded) event) or a multi-line text editor in a pop-up window. Each line in the editor specifies the value and display text of one collection item in the following format: `value|text`. Use the `onFastEntryFinished` event to process the entered text lines as required. */ onFastEntryFinished: EventBase<SurveyCreatorModel, FastEntryFinishedEvent>; /** * An event that is raised when users add a new column to a [Multi-Select Matrix](https://surveyjs.io/form-library/documentation/api-reference/matrix-table-with-dropdown-list) or [Dynamic Matrix](https://surveyjs.io/form-library/documentation/api-reference/dynamic-matrix-table-question-model). Use this event to modify this column. * * For information on event handler parameters, refer to descriptions within the interface. * * > This event is not raised when users add a new column to a [Single-Select Matrix](https://surveyjs.io/form-library/documentation/api-reference/matrix-table-question-model). For this case, handle the [`onItemValueAdded`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#onItemValueAdded) event instead. * @see onCollectionItemAllowOperations */ onMatrixColumnAdded: EventBase<SurveyCreatorModel, MatrixColumnAddedEvent>; /** * @deprecated Use the [`onConfigureTablePropertyEditor`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#onConfigureTablePropertyEditor) event instead. */ onSetPropertyEditorOptions: EventBase<SurveyCreatorModel, ConfigureTablePropertyEditorEvent>; /** * An event that is raised when a table property editor is created in the Property Grid. Use this event to configure the table property editor. * @see onPropertyEditorCreated */ onConfigureTablePropertyEditor: EventBase<SurveyCreatorModel, ConfigureTablePropertyEditorEvent>; onGenerateNewName: EventBase<SurveyCreatorModel, any>; /** * An event that is raised when Survey Creator validates a modified value of a survey element property. Use this event to display a custom error message when the value is incorrect. * @see onBeforePropertyChanged * @see onAfterPropertyChanged */ onPropertyDisplayCustomError: EventBase<SurveyCreatorModel, PropertyDisplayCustomErrorEvent>; /** * @deprecated Use the [`onPropertyDisplayCustomError`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#onPropertyDisplayCustomError) event instead. */ onPropertyValidationCustomError: EventBase<SurveyCreatorModel, PropertyDisplayCustomErrorEvent>; /** * An event that is raised each time a user modifies a survey element property. Use this event to validate or correct a property value while the user changes it. * @see onPropertyDisplayCustomError * @see onAfterPropertyChanged */ onBeforePropertyChanged: EventBase<SurveyCreatorModel, BeforePropertyChangedEvent>; /** * @deprecated Use the [`onBeforePropertyChanged`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#onBeforePropertyChanged) event instead. */ onPropertyValueChanging: EventBase<SurveyCreatorModel, PropertyValueChangingEvent>; /** * An event that is raised after a survey element property has changed. * @see onPropertyDisplayCustomError * @see onBeforePropertyChanged */ onAfterPropertyChanged: EventBase<SurveyCreatorModel, AfterPropertyChangedEvent>; /** * @deprecated Use the [`onAfterPropertyChanged`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#onAfterPropertyChanged) event instead. */ onSurveyPropertyValueChanged: EventBase<SurveyCreatorModel, PropertyValueChangedEvent>; /** * An event that is raised when a condition editor renders a list of questions and variables available for selection. Use this event to modify this list. */ onConditionGetQuestionList: EventBase<SurveyCreatorModel, ConditionGetQuestionListEvent>; /** * @deprecated Use the [`onConditionGetQuestionList`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#onConditionGetQuestionList) event instead. */ onConditionQuestionsGetList: EventBase<SurveyCreatorModel, ConditionGetQuestionListEvent>; onConditionGetTitle: EventBase<SurveyCreatorModel, any>; /** * An event that is raised when Survey Creator populates a condition editor with operators. Use this event to hide individual condition operators. */ onGetConditionOperator: EventBase<SurveyCreatorModel, GetConditionOperatorEvent>; /** * An event that is raised when the Logic tab constructs a user-friendly display text for a logic rule. Use this event to modify this display text. */ onLogicRuleGetDisplayText: EventBase<SurveyCreatorModel, LogicRuleGetDisplayTextEvent>; /** * @deprecated Use the [`onLogicRuleGetDisplayText`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#onLogicRuleGetDisplayText) event instead. */ onLogicItemDisplayText: EventBase<SurveyCreatorModel, LogicRuleGetDisplayTextEvent>; /** * An event that is raised when users modify survey or theme settings. * @see state */ onModified: EventBase<SurveyCreatorModel, ModifiedEvent>; /** * An event that is raised when users add a question to the survey. Use this event to customize the question. * * For information on event handler parameters, refer to descriptions within the interface. * * [Customize Survey Elements on Creation](https://surveyjs.io/survey-creator/documentation/customize-survey-creation-process#customize-survey-elements-on-creation (linkStyle)) */ onQuestionAdded: EventBase<SurveyCreatorModel, QuestionAddedEvent>; /** * An event that is raised when users add a [Panel](https://surveyjs.io/form-library/documentation/api-reference/panel-model) element to the survey. Use this event to customize the panel. * * For information on event handler parameters, refer to descriptions within the interface. * * [Customize Survey Elements on Creation](https://surveyjs.io/survey-creator/documentation/customize-survey-creation-process#customize-survey-elements-on-creation (linkStyle)) */ onPanelAdded: EventBase<SurveyCreatorModel, PanelAddedEvent>; /** * An event that is raised when a new page is added to the survey. Use this event to customize the page. * * For information on event handler parameters, refer to descriptions within the interface. * * [Customize Survey Elements on Creation](https://surveyjs.io/survey-creator/documentation/customize-survey-creation-process#customize-survey-elements-on-creation (linkStyle)) */ onPageAdded: EventBase<SurveyCreatorModel, PageAddedEvent>; /** * An event that is raised when a [question's type is being changed](https://surveyjs.io/survey-creator/documentation/end-user-guide/user-interface#how-to-change-the-question-type). */ onQuestionConverting: EventBase<SurveyCreatorModel, QuestionConvertingEvent>; /** * An event that is raised when Survey Creator renders action buttons under each page on the design surface. Use this event to add, remove, or modify the buttons. * @see onElementGetActions */ onPageGetFooterActions: EventBase<SurveyCreatorModel, PageGetFooterActionsEvent>; /** *@deprecated Use the [`onPageGetFooterActions`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#onPageGetFooterActions) event instead. */ onGetPageActions: EventBase<SurveyCreatorModel, PageGetFooterActionsEvent>; /** * @deprecated Use the [`onSurveyInstanceCreated`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#onSurveyInstanceCreated) event instead. */ onDesignerSurveyCreated: EventBase<SurveyCreatorModel, DesignerSurveyCreatedEvent>; /** * @deprecated Use the [`onSurveyInstanceCreated`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#onSurveyInstanceCreated) event instead. */ onPreviewSurveyCreated: EventBase<SurveyCreatorModel, PreviewSurveyCreatedEvent>; onTestSurveyCreated: EventBase<SurveyCreatorModel, any>; /** * An event that is raised when Survey Creator [displays a toast notification](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#notify). Use this event to implement custom toast notification. * @see notify */ onNotify: EventBase<SurveyCreatorModel, NotifyEvent>; /** * An event that is raised before a survey element (question, panel, page, or the survey itself) is selected. Use this event if you want to select a different survey element. * @see onElementSelected * @see selectedElement */ onElementSelecting: EventBase<SurveyCreatorModel, ElementSelectingEvent>; /** * @deprecated Use the [`onElementSelecting`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#onElementSelecting) event instead. */ onSelectedElementChanging: EventBase<SurveyCreatorModel, ElementFocusingEvent>; /** * An event that is raised after a survey element (a question, panel, page, or the survey itself) is selected. * @see onElementSelecting */ onElementSelected: EventBase<SurveyCreatorModel, ElementSelectedEvent>; /** * @deprecated Use the [`onElementSelected`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#onElementSelected) event instead. */ onSelectedElementChanged: EventBase<SurveyCreatorModel, ElementFocusedEvent>; /** * An event that is raised when Survey Creator opens a dialog window for users to select files. * @see onUploadFile * @see uploadFiles */ onOpenFileChooser: EventBase<SurveyCreatorModel, OpenFileChooserEvent>; /** * An event that is raised when a user selects a file to upload. Use this event to upload the file to your server. * * For information on event handler parameters, refer to descriptions within the interface. * * [View Demo](https://surveyjs.io/survey-creator/examples/file-upload/ (linkStyle)) * @see uploadFiles */ onUploadFile: EventBase<SurveyCreatorModel, UploadFileEvent>; /** * An event that is raised when the Translation tab displays a property for translation. Use this event to control the property visibility. */ onTranslationStringVisibility: EventBase<SurveyCreatorModel, TranslationStringVisibilityEvent>; onTranslationLocaleInitiallySelected: EventBase<SurveyCreatorModel, any>; /** * An event that is raised before a translated string is imported from a CSV file. Use this event to modify the string to be imported or cancel the import. * @see onTranslationExportItem * @see onTranslationImported */ onTranslationImportItem: EventBase<SurveyCreatorModel, TranslationImportItemEvent>; /** * An event that is raised after all translated strings are imported from a CSV file. * @see onTranslationImportItem * @see onTranslationExportItem */ onTranslationImported: EventBase<SurveyCreatorModel, TranslationImportedEvent>; /** * An event that is raised before a translated string is exported to a CSV file. Use this event to modify the string to be exported. * @see onTranslationImportItem */ onTranslationExportItem: EventBase<SurveyCreatorModel, TranslationExportItemEvent>; /** * An event that allows you to integrate a machine translation service, such as Google Translate or Microsoft Translator, into Survey Creator. * * For information on event handler parameters, refer to descriptions within the interface. * * Within the event handler, you need to pass translation strings and locale information to the translation service API. The service should return an array of translated strings that you need to pass to the `options.callback` function. The following code shows how to integrate the Microsoft Translator service into Survey Creator: * * ```js * import { SurveyCreatorModel } from "survey-creator-core"; * const creatorOptions = { ... }; * const creator = new SurveyCreatorModel(creatorOptions); * * const apiKey = "<your-microsoft-translator-api-key>"; * const resourceRegion = "<your-azure-region>"; * const endpoint = "https://api.cognitive.microsofttranslator.com/"; * creator.onMachineTranslate.add((_, options) => { * // Prepare strings for Microsoft Translator as an array of objects: [{ Text: "text to translate" }] * const data = []; * options.strings.forEach(str => { data.push({ Text: str }); }); * // Include required locales in the URL * const params = "api-version=3.0&from=" + options.fromLocale + "&to=" + options.toLocale; * const url = endpoint + "/translate?" + params; * fetch(url, { * method: "POST", * headers: { * "Content-Type": "application/json", * "Ocp-Apim-Subscription-Key": apiKey, * "Ocp-Apim-Subscription-Region": resourceRegion, * "X-ClientTraceId": crypto.randomUUID() * }, * body: JSON.stringify(data) * }).then(response => response.json()) * .then(data => { * // Convert data received from Microsoft Translator to a flat array * const translatedStrings = []; * for (let i = 0; i < data.length; i++) { * translatedStrings.push(data[i].translations[0].text); * } * // Pass translated strings to Survey Creator * options.callback(translatedStrings); * * }).catch(error => { * // If translation was unsuccessful: * options.callback(); * alert("Could not translate strings to the " + options.toLocale + " locale"); * }); * }); * ``` * * [Multilingual Form Demo](https://surveyjs.io/survey-creator/examples/create-multilingual-forms/ (linkStyle)) * * [AI-Powered Translation Demo](https://surveyjs.io/survey-creator/examples/ai-translation/ (linkStyle)) * * > Survey Creator does not include a machine translation service out of the box. Our component only provides a UI for calling the service API. * @see startMachineTranslationTo */ onMachineTranslate: EventBase<SurveyCreatorModel, MachineTranslateEvent>; /** * An event that is raised before a string translation is changed. Use this event to override a new translation value. * * For information on event handler parameters, refer to descriptions within the interface. * * Refer to the following help topics for more information on localization: * * - [Localization & Globalization in SurveyJS Form Library](https://surveyjs.io/form-library/documentation/survey-localization) * - [Localization & Globalization in Survey Creator](https://surveyjs.io/survey-creator/documentation/localization) */ onTranslationItemChanging: EventBase<SurveyCreatorModel, TranslationItemChangingEvent>; /** * An event that is raised when users drag and drop survey elements within the design surface. Use this event to control drag and drop operations. * * For information on event handler parameters, refer to descriptions within the interface. * * [View Demo](https://surveyjs.io/survey-creator/examples/page-break-and-page-merge/ (linkStyle)) * @see onDragStart * @see onDragEnd */ onDragDropAllow: EventBase<SurveyCreatorModel, DragDropAllowEvent>; onDragOverLocationCalculating: EventBase<SurveyCreatorModel, any>; /** * An event that allows you to create a custom message panel. * * For information on event handler parameters, refer to descriptions within the interface. * * A message panel is displayed within a question box on the design surface. It contains a text message and an optional action link. The following image illustrates a built-in message panel that appears when a question sources its choice options from another question or from a web service: * * <img src="https://surveyjs.io/stay-updated/release-notes/articles/v1.9.126/creator-message-panel.png" alt="Survey Creator: A message panel" width="75%"> * * To create a custom message panel, handle the `onCreateCustomMessagePanel` event. This event is raised for questions whose `isMessagePanelVisible` property set to `true`. The following code shows how to enable this property based on a condition. This code implements a custom data source selector for select-based questions (Dropdown, Checkboxes, Radio Button Group). When a survey author selects any data source other than "Custom", the `isMessagePanelVisible` property becomes enabled, indicating that the `onCreateCustomMessagePanel` event must be raised. A function that handles this event specifies custom message and action link texts and `onClick` event handler: * * ```js * import { Serializer } from "survey-core"; * import { SurveyCreatorModel } from "survey-creator-core"; * * Serializer.addProperty("selectbase", { * name: "choicesDataSource", * displayName: "Data source", * category: "choices", * choices: [ * { text: "Country", value: "country" }, * { text: "Region", value: "region" }, * { text: "City", value: "city" }, * { text: "Custom", value: "custom" } * ], * onSetValue: function (obj: any, value: any) { * // Set the custom property value * obj.setPropertyValue("choicesDataSource", value); * // Display the message panel based on a condition * obj.setPropertyValue("isMessagePanelVisible", value !== "custom"); * } * }); * * const creator = new SurveyCreatorModel(); * * creator.onCreateCustomMessagePanel.add((_, options) => { * options.messageText = "Choices for this question are loaded from a predefined data source. "; * options.actionText = "Go to settings"; * // Focus the "Data source" editor within the Property Grid * options.onClick = () => { * creator.selectElement(options.question, "choicesDataSource"); * }; * }); * ``` */ onCreateCustomMessagePanel: EventBase<SurveyCreatorModel, CreateCustomMessagePanelEvent>; /** * An event that is raised when users change a property in a [Survey Creator theme](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#creatorTheme). */ onCreatorThemePropertyChanged: EventBase<SurveyCreatorModel, CreatorThemePropertyChangedEvent>; /** * An event that is raised when users select a [Survey Creator theme](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#creatorTheme) from the drop-down list of UI themes. */ onCreatorThemeSelected: EventBase<SurveyCreatorModel, CreatorThemeSelectedEvent>; getSurveyJSONTextCallback: () => { text: string; isModified: boolean; }; setSurveyJSONTextCallback: (text: string) => void; /** * Limits the number of items in a logical condition. * * Default value: -1 (unlimited) */ logicMaxItemsInCondition: number; /** * @deprecated Use the [`logicMaxItemsInCondition`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#logicMaxItemsInCondition) property instead. */ get maxLogicItemsInCondition(): number; set maxLogicItemsInCondition(val: number); /** * @deprecated Use the [`useElementTitles`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#useElementTitles) property instead. */ showObjectTitles: boolean; /** * @deprecated Use the [`useElementTitles`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#useElementTitles) property instead. */ showTitlesInExpressions: boolean; /** * Specifies whether Survey Creator UI elements display survey, page, and question titles instead of their names. * * Default value: `false` * * [View Demo](https://surveyjs.io/survey-creator/examples/dynamically-modify-newly-added-questions/ (linkStyle)) * @see onElementGetDisplayName */ useElementTitles: boolean; /** * Limits the number of visible choices. Users can click "Show more" to view hidden choices. * * Set this property to -1 if you do not want to hide any choices. * * Default value: 10 */ maxVisibleChoices: number; /** * Specifies whether users can edit expressions in the Logic tab as plain text. * * If you set this property to `false`, users can only use UI elements to edit logical expressions. * * Default value: `true` * @see showLogicTab */ logicAllowTextEditExpressions: boolean; /** * @deprecated Use the [`logicAllowTextEditExpressions`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#logicAllowTextEditExpressions) property instead. */ get allowEditExpressionsInTextEditor(): boolean; set allowEditExpressionsInTextEditor(val: boolean); /** * Limits the number of columns that users can add to [Single-Select Matrix](https://surveyjs.io/Documentation/Library?id=questionmatrixmodel), [Multi-Select Matrix](https://surveyjs.io/Documentation/Library?id=questionmatrixdropdownmodel), and [Dynamic Matrix](https://surveyjs.io/Documentation/Library?id=questionmatrixdy