CreatorBase
Base class for Survey Creator.
Properties
Methods
Events
Gets or sets the currently displayed tab.
Possible values:
- Type:
- string writable
- Implemented in:
- CreatorBase
- See also:
- makeNewViewActive
Specifies whether users can switch between UI themes in the Preview tab.
Default value: true
- Type:
- boolean readonly
- Implemented in:
- CreatorBase
- See also:
- themeForPreview
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
- Type:
- boolean readonly
- Implemented in:
- CreatorBase
- See also:
- showLogicTab
Specifies whether users can add, edit, and delete survey pages.
Default value: true
- Type:
- boolean writable
- Implemented in:
- CreatorBase
- See also:
- pageEditMode
A delay between changing survey settings and saving the survey JSON schema, measured in milliseconds. Applies only when the isAutoSave
property is true
.
Default value: 500 (taken from settings.autoSave.delay
)
If a user changes the settings once again during the delay, only the latest version will be saved.
- Type:
- number readonly
- Implemented in:
- CreatorBase
Set JSON as text into survey. Clear undo/redo states optionally.
- Type:
- (value: string, clearState?: boolean) => void
- Parameters:
-
value, type: string ,
JSON as text
clearState, type: boolean ,default false. Set this parameter to true to clear undo/redo states.
- Implemented in:
- CreatorBase
Open file chooser dialog
- Type:
- (input: any, onFilesChosen: (files: {}) => void, context?: { element: SurveyElement<any>; item?: ItemValue; }) => void
- Parameters:
-
input, type: any ,
file input element
onFilesChosen, type: (files: {}) => void ,a call back function to process chosen files
context, type: { element: SurveyElement<any>; item?: ItemValue; }
- Implemented in:
- CreatorBase
Collapses all categories in Property Grid.
- Type:
- () => void
- Implemented in:
- CreatorBase
- See also:
- expandAllPropertyGridCategories
Collapses a specified category in Property Grid.
- Type:
- (name: string) => void
- Parameters:
- Implemented in:
- CreatorBase
- See also:
- expandPropertyGridCategory
Create a new page with the same elements and place it next to the current one. It returns the new created Survey.Page
- Type:
- (page: PageModel) => PageModel
- Parameters:
-
page, type: PageModel ,
A copied Survey.Page
- Implemented in:
- CreatorBase
Deletes a survey element: a question, panel, or page.
If you want to delete the focused element, pass the selectedElement
property value to this method.
- Type:
- (element: Base) => void
- Parameters:
-
element, type: Base ,
A survey element to delete.
- Implemented in:
- CreatorBase
- See also:
- onElementDeleting
Deletes all custom translation strings for the passed locale from Survey Creator and from the generated survey JSON schema.
- Type:
- (locale: string) => void
- Parameters:
-
locale, type: string ,
A locale code (for example, "en").
- Implemented in:
- CreatorBase
Expands all categories in Property Grid.
- Type:
- () => void
- Implemented in:
- CreatorBase
- See also:
- collapseAllPropertyGridCategories
Expands a specified category in Property Grid.
- Type:
- (name: string) => void
- Parameters:
- Implemented in:
- CreatorBase
- See also:
- collapsePropertyGridCategory
Copy a question to the active page
- Type:
- (question: Base) => IElement
- Parameters:
-
question, type: Base ,
A copied Survey.Question
- Implemented in:
- CreatorBase
Returns the localized string by its id
- Type:
- (str: string) => string
- Parameters:
-
str, type: string ,
the string id.
- Implemented in:
- CreatorBase
Returns true if initial survey was empty. It was not set via JSON property and default new survey is empty as well.
- Type:
- (json: any, clearState: boolean) => void
- Parameters:
-
json, type: anyclearState, type: boolean
- Return Value:
-
true if initial survey doesn't have any elements or properties
- Implemented in:
- CreatorBase
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, and rows in Multi-Select Matrix questions.
- Type:
- boolean readonly
- Implemented in:
- CreatorBase
- See also:
- showObjectTitles
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
or 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
property to increase or descrease the delay.
- Type:
- boolean readonly
- Implemented in:
- CreatorBase
Returns true
if an undo or redo operation is in progress.
- Type:
- boolean readonly
- Implemented in:
- CreatorBase
Specifies whether to enable support for right-to-left languages.
Default value: false
- Type:
- boolean writable
- Implemented in:
- CreatorBase
A survey JSON schema.
This property allows you to get or set the JSON schema of a survey being configured. Alternatively, you can use the text
property.
- Type:
- any writable
- Implemented in:
- CreatorBase
Gets or sets the survey locale. The default value it is empty, this means the 'en' locale is used. You can set it to 'de' - German, 'fr' - French and so on.
- Type:
- string writable
- Implemented in:
- CreatorBase
Switches the active tab. Returns false
if the tab cannot be switched.
- Type:
- (tabName: string) => boolean
- Parameters:
-
tabName, type: string ,
A tab that you want to make active:
"designer"
,"test"
,"theme"
,"editor"
,"logic"
, or"translation"
.
- Return Value:
-
false
if the active tab cannot be switched,true
otherwise.
- Implemented in:
- CreatorBase
Limits the number of choices that users can add to Checkbox, Dropdown, and Radiogroup questions.
Default value: 0 (unlimited, taken from settings.propertyGrid.maximumChoicesCount
)
- Type:
- number readonly
- Implemented in:
- CreatorBase
Limits the number of columns that users can add to Matrix, Matrix Dynamic, and Matrix Dropdown questions.
Default value: 0 (unlimited, taken from settings.propertyGrid.maximumColumnsCount
)
- Type:
- number readonly
- Implemented in:
- CreatorBase
Limits the number of rate values that users can add to Rating questions.
Default value: 0 (unlimited, taken from settings.propertyGrid.maximumRateValues
)
- Type:
- number readonly
- Implemented in:
- CreatorBase
Limits the number of rows that users can add to Matrix and Matrix Dropdown questions.
Default value: 0 (unlimited, taken from settings.propertyGrid.maximumRowsCount
)
- Type:
- number readonly
- Implemented in:
- CreatorBase
Limits the number of items in a logical expression.
Default value: -1 (unlimited)
- Type:
- number readonly
- Implemented in:
- CreatorBase
Limits the number of nested panels within a Panel element.
Default value: -1 (unlimited)
- Type:
- number readonly
- Implemented in:
- CreatorBase
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
- Type:
- number readonly
- Implemented in:
- CreatorBase
Limits the minimum number of choices in Checkbox, Dropdown, and Radiogroup questions. Set this property if users should not delete choices below the specified limit.
Default value: 0 (unlimited, taken from settings.propertyGrid.minimumChoicesCount
)
- Type:
- number readonly
- Implemented in:
- CreatorBase
This function triggers user notification (via the alert() function if no onNotify event handler added).
- Type:
- (msg: string, type?: "info" | "error") => void
- Parameters:
-
msg, type: stringtype, type: "info" | "error"
- Implemented in:
- CreatorBase
- See also:
- onNotify
An event that is raised after the active tab is switched.
Parameters:
sender
:CreatorBase
A Survey Creator instance that raised the event.options.tabName
:"designer"
|"test"
|"theme"
|"editor"
|"logic"
|"translation"
A tab that has become active.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
- See also:
- makeNewViewActive
An event that is raised before the active tab is switched. Use this event to allow or cancel the switch.
Parameters:
sender
:CreatorBase
A Survey Creator instance that raised the event.options.tabName
:"designer"
|"test"
|"theme"
|"editor"
|"logic"
|"translation"
A tab that is going to become active.options.allow
:boolean
Specifies whether the active tab can be switched. Set this property tofalse
if you want to cancel the switch.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
- See also:
- makeNewViewActive
An event that is raised before an redo operation.
Parameters:
sender
:CreatorBase
A Survey Creator instance that raised the event.options.canRedo
:boolean
A Boolean value that you can set tofalse
if you want to prevent the redo operation.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
- See also:
- redo * , undo * , onBeforeUndo
An event that is raised before an undo operation.
Parameters:
sender
:CreatorBase
A Survey Creator instance that raised the event.options.canUndo
:boolean
A Boolean value that you can set tofalse
if you want to prevent the undo operation.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
- See also:
- undo * , redo * , onBeforeRedo
The event is called before rendering a collection item in a property editor. For example: a column in a column editor, or an item in Choices and so on. Use this event to prevent a collection item from being edited or removed from a collection.
- sender the survey creator object that fires the event
- options.obj the survey object: Question, Panel, Page or Survey
- options.property the collection property (Survey.JsonObjectProperty object). It has name, className, type, visible, readOnly and other properties
- options.propertyName the collection property name
- options.collection a collection where a target item is located. It is can be Columns in Matrices or Choices in Dropdown question and so on.
- options.item a target collection item
- options.allowDelete a boolean value. It is
true
by default. Set it false to prevent an item from being removed from the collection - options.allowAdd a boolean value. It is
true
by default. Set it false to prevent an item from being added to the collection - options.allowEdit a boolean value. It is
true
by default. Set itfalse
to disable editing.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
Use this event to modify the title in a condition editor. The title is changing during editing. In case of empty or incorrect expression it tells that expression is incorrect
- sender the survey creator object that fires the event.
- options.expression the current expression. If the expression is empty or incorrect then the value is empty.
- options.title the default value of the title. You can change the default value.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
Use this event to modify the list (name and titles) of the questions available in a condition editor.
- sender the survey creator object that fires the event
- options.obj the survey object which property is edited in the Property Editor.
- options.propertyName the name of the edited property.
- options.editor the instance of Property Editor.
- options.list the list of the questions available for condition
- options.sortOrder "asc" (default) | "none". Change it to "none", if you don't want to sort your condition list
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
An event that is raised when Survey Creator obtains adorners for a survey element. Use this event to hide and modify predefined adorners or add a custom adorner.
Parameters:
sender
:CreatorBase
A Survey Creator instance that raised the event.options.obj
:Survey.Base
A survey element (question, panel, or page) whose adorners you can customize.options.items
:IAction[]
An array of adorner actions. You can add, modify, or remove actions from this array.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
- See also:
- onElementAllowOperations * , onGetPageActions
An event that is raised when Survey Creator instantiates a survey for the Designer tab. Use this event to customize the survey.
Parameters:
sender
:CreatorBase
A Survey Creator instance that raised the event.options.survey
:SurveyModel
A survey to be displayed in the Designer tab.
If you want this event raised at startup, assign a survey JSON schema to the
JSON
property after you add a handler to the event. If the JSON schema should be empty, specify theJSON
property with an empty object.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
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.
Parameters:
sender
:CreatorBase
A Survey Creator instance that raised the event.options.draggedElement
:IElement
A survey element being dragged.options.fromElement
:IElement
A survey element from whichdraggedElement
is being dragged. This parameter isnull
ifdraggedElement
is being dragged from the Toolbox.options.toElement
:IElement
A survey element to whichdraggedElement
is being dragged.options.insertBefore
:IElement
A survey element before whichdraggedElement
will be placed. This parameter isnull
if the parent container (page or panel) has no elements or ifdraggedElement
will be placed below all other elements within the container.options.insertAfter
:IElement
A survey element after whichdraggedElement
will be placed. This parameter isnull
if the parent container (page or panel) has no elements or ifdraggedElement
will be placed above all other elements within the container.options.parent
:ISurveyElement
A parent container (page or panel) within whichdraggedElement
will be placed.options.survey
:SurveyModel
A survey within which the drag and drop operation occured.options.allow
:boolean
A Boolean property that you can set tofalse
if you want to cancel the drag and drop operation.options.target
:IElement
Obsolete. Useoptions.draggedElement
instead.options.source
:IElement
Obsolete. Useoptions.toElement
instead.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
- See also:
- onDragStart * , onDragEnd
An event that is raised when users finish dragging a survey element within the design surface.
Parameters:
sender
:CreatorBase
A Survey Creator instance that raised the event.options.draggedElement
:any
A survey element that was dragged.options.fromElement
:any
A survey element from whichdraggedElement
was dragged. This parameter isnull
ifdraggedElement
is being dragged from the Toolbox.options.toElement
:any
A survey element to whichdraggedElement
was dragged.
- Type:
- Event<() => any, any, any>
- Implemented in:
- CreatorBase
- See also:
- onDragStart * , onDragDropAllow
An event that is raised when users start to drag a survey element within the design surface.
Parameters:
sender
:CreatorBase
A Survey Creator instance that raised the event.options.draggedElement
:any
A survey element being dragged.options.fromElement
:any
A survey element from whichdraggedElement
is being dragged. This parameter isnull
ifdraggedElement
is being dragged from the Toolbox.options.toElement
:any
A survey element to whichdraggedElement
is being dragged.
- Type:
- Event<() => any, any, any>
- Implemented in:
- CreatorBase
- See also:
- onDragEnd * , onDragDropAllow
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.
Parameters:
sender
:CreatorBase
A Survey Creator instance that raised the event.options.obj
:Survey.Base
A survey element (question or panel) for which you can disable user interactions.options.allowChangeRequired
:boolean
Allows users to mark the survey element as required.options.allowChangeType
:boolean
Allows users to change the survey element type.options.allowChangeInputType
:boolean
Allows users to change theinputType
property of Single-Line Input questions.options.allowCopy
:boolean
Allows users to duplicate the survey element.options.allowDelete
:boolean
Allows users to delete the survey element.options.allowDragging
:boolean
Allows users to drag and drop the survey element.options.allowEdit
:boolean
Allows users to edit survey element properties on the design surface. If you disable this property, users can edit the properties only in the Property Grid.
To disable a user interaction, set the correponding allow...
property to false
.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
An event that is raised before a survey element (a question, panel, or page) is deleted.
Parameters:
sender
:CreatorBase
A Survey Creator instance that raised the event.options.element
:Survey.Base
A survey element to be deleted.options.elementType
:"question"
|"panel"
|"page"
The element type.options.allowing
:boolean
A Boolean property that you can set tofalse
if you want to cancel element deletion.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
- See also:
- deleteElement
The event is called on generation a new name for a new created element.
- sender the survey creator object that fires the event
- options.element a new created survey element. It can be question, panel or page
- options.name a new suggested name, that is unique for the current survey. You can suggest your own name. If it is unique, creator will assign it to the element.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
An event that is raised when Survey Creator populates a condition editor with operators. Use this event to hide individual condition operators.
Parameters:
sender
:CreatorBase
A Survey Creator instance that raised the event.options.questionName
:string
The name of a question for which conditions are displayed.options.questionName
:string
The name of a question for which conditions are displayed.options.operator
:"empty"
|"notempty"
|"equal"
|"notequal"
|"contains"
|"notcontains"
|"anyof"
|"allof"
|"greater"
|"less"
|"greaterorequal"
|"lessorequal"
A condition opeator for which the event is raised.options.show
:boolean
A Boolean property that you can set tofalse
if you want to hide the condition operator.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
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 showObjectTitles
property instead of handling this event.
Parameters:
sender
:CreatorBase
A Survey Creator instance that raised the event.options.obj
:Survey.Base
A survey element (survey, page, question, or panel) whose name has been requested.options.area
:string
A Survey Creator UI element that requests the display name. Contains one of the following values:"page-selector"
- Page selector on the design surface"condition-editor"
- Condition pop-up window or drop-down menus that allow users to select questions in the Logic tab"logic-tab:question-filter"
- Question filter in the Logic tab"logic-tab:question-selector"
- Question selector on editing actions in the Logic tab"preview-tab:page-list"
- Page list in the Preview tab"preview-tab:selected-page"
- Selected page name in the Preview tab"property-grid:property-editor"
- Property editors in the Property Grid"property-grid-header:element-list"
- Survey element list in the header of the Property Grid"property-grid-header:selected-element"
- Selected survey element in the header of the Property Grid"translation-tab"
- Translation tab
options.displayName
:string
A survey element's display text. Modify this property to set a custom display text for the survey element.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
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.
Parameters:
sender
:CreatorBase
A Survey Creator instance that raised the event.options.actions
:IAction[]
An array of actions. You can add, modify, or remove actions from this array.options.page
:PageModel
A page for which the event is raised.options.addNewQuestion(type)
: Method
Adds a new question of a specifiedtype
to the page.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
- See also:
- onDefineElementMenuItems
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.
Parameters:
sender
:CreatorBase
A Survey Creator instance that raised the event.options.property
:JsonObjectProperty
A property whose read-only status you can change.options.parentProperty
:JsonObjectProperty
A property that nestsoptions.property
(choices
for an item value,columns
for a matrix column,rows
for a matrix row etc.).options.parentProperty
has a value only for nested properties.options.obj
:Survey.Base
A survey element (question, panel, page, or the survey itself) for which you can change the read-only status.options.parentObj
:any
A survey element that containsoptions.parentProperty
.options.parentObj
has a value only for nested properties.options.readOnly
:boolean
A Boolean value that specifies the property's read-only status.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
This event is raised after a user has edited a text value on the design surface. This value may include HTML markup. You can handle the onHtmlToMarkdown
event to convert the HTML markup to Markdown.
The event handler accepts the following arguments:
sender
- A Survey Creator instance that raised the event.options.element
- The instance of a survey element (survey, page, panel, question) that the user configures.options.name
- The name of a property whose value has been edited.options.html
- HTML content. Pass this field's value to an HTML-to-Markdown converter.options.text
- A text string that may contain Markdown. Assign the result of the HTML-to-Markdown conversion to this field.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
The event is called on adding a new Survey.ItemValue object. It uses as an element in choices array in Radiogroup, checkbox and dropdown questions or Matrix columns and rows properties. Use this event, to set ItemValue.value and ItemValue.text properties by default or set a value to the custom property.
- sender the survey creator object that fires the event
- options.obj the object that contains the itemsValues array, for example selector, rating and single choice matrix questions.
- options.propertyName the object property Name. It can be "choices" for selector questions or rateValues for rating question or columns/rows for single choice matrix.
- options.newItem a new created Survey.ItemValue object.
- options.itemValues an editing Survey.ItemValue array. newItem object is not added yet into this array.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
Use this event to modify the display text of a logic item in the Logic tab.
The event handler accepts the following arguments:
sender
- A Survey Creator instance that raised the event.options.expression
- A logical expression associated with the logic item.options.expressionText
- The same expression in a user-friendly format. It may contain question titles instead of question names.options.logicItem
- A logic item object. Contains an array of actions and other properties.options.text
- The expression and actions in a user-friendly format. Redefine this property if you want to change the display text.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
An event that allows you to integrate a machine translation service, such as Google Translate or Microsoft Translator, into Survey Creator.
Parameters:
sender
:CreatorBase
A Survey Creator instance that raised the event.options.fromLocale
:string
A locale from which you want to translate strings. Contains a locale identifier ("en"
,"de"
, etc.).options.toLocale
:string
A locale to which you want to translate strings. Contains a locale identifier ("en"
,"de"
, etc.).options.strings
:Array<string>
Strings to translate.options.callback: (strings: Array<string>)
:Function
A callback function that accepts translated strings. If the translation failed, pass an empty array or call this function without arguments.
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:
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");
});
});
Survey Creator does not include a machine translation service out of the box. Our component only provides a UI for calling the service API.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
The event is called when a user adds a new column into MatrixDropdown or MatrixDynamic questions. Use it to set some properties of Survey.MatrixDropdownColumn by default, for example name or a custom property.
- sender the survey creator object that fires the event
- options.matrix a matrix question where column is located, matrix.columns.
- options.newColumn a new created Survey.MatrixDropdownColumn object.
- options.columns editable columns objects. They can be different from options.matrix.columns. options.columns and options.matrix.columns are equal after user press Apply or Cancel and options.columns will be set to options.matrix.columns or reset to initial state.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
An event that is raised when users modify survey or theme settings.
Parameters:
sender
:CreatorBase
A Survey Creator instance that raised the event.options.type
:"ADDED_FROM_TOOLBOX"
|"PAGE_ADDED"
|"PAGE_MOVED"
|"QUESTION_CONVERTED"
|"QUESTION_CHANGED_BY_EDITOR"
|"PROPERTY_CHANGED"
|"ELEMENT_REORDERED"
|"OBJECT_DELETED"
|"VIEW_TYPE_CHANGED"
|"DO_DROP"
|"TRANSLATIONS_CHANGED"
|"JSON_EDITOR"
|"THEME_MODIFIED"
A value that indicates the modification.
Depending on the options.type
value, the options
object contains parameters listed below:
options.type
: "ADDED_FROM_TOOLBOX"
options.question
- An added question.
options.type
: "PAGE_ADDED"
options.newValue
- An added page.
options.type
: "PAGE_MOVED"
options.page
- A moved page.options.indexFrom
- A previous index.options.indexTo
- A current index.
options.type
: "QUESTION_CONVERTED"
options.className
- The name of a class to which a question has been converted.options.oldValue
- An object of a previous class.options.newValue
- An object of a class specified byoptions.className
.
options.type
: "QUESTION_CHANGED_BY_EDITOR"
options.question
- A question that has been edited in a pop-up editor.
options.type
: "PROPERTY_CHANGED"
options.name
- The name of the changed property.options.target
- An object that contains the changed property.options.oldValue
- A previous value of the changed property.options.newValue
- A new value of the changed property.
options.type
: "ELEMENT_REORDERED"
options.arrayName
- The name of the changed array.options.parent
- An object that contains the changed array.options.element
- A reordered element.options.indexFrom
- A previous index.options.indexTo
- A current index.
options.type
: "OBJECT_DELETED"
options.target
- A deleted object.
options.type
: "VIEW_TYPE_CHANGED"
options.newType
- A current view:"editor"
or"designer"
.
options.type
: "DO_DROP"
options.page
- A parent page of the dragged element.options.source
- A dragged element.options.target
- A drop target.options.newElement
- A new element. This parameter is defined only if users drag a question or panel from the Toolbox.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
The event is called in case of UI notifications. By default all notifications are done via built-in alert () function. In case of any subscriptions to this event all notifications will be redirected into the event handler.
- options.message is a message to show.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
An event that is raised when Survey Creator opens a dialog window for users to select files.
Parameters:
sender
:CreatorBase
A Survey Creator instance that raised the event.options.input
:HTMLInputElement
A file input HTML element.options.element
:SurveyElement
|SurveyModel
A question, panel, page, or survey for which this event is raised.options.item
:ItemValue
A choice item for which the event is raised. This parameter has a value only when the dialog window is opened to select images for an Image Picker question.options.callback: (files: Array<File>)
:Function
A callback function to which you should pass selected files.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
- See also:
- uploadFiles
An event that is raised when a new page is added to the survey. Use this event to customize the page.
Parameters:
sender
:CreatorBase
A Survey Creator instance that raised the event.options.page
:PageModel
The page users added.
Customize Survey Elements on Creation
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
An event that is raised before a new page is added to the survey. Handle this event if you do not want to add the page.
Parameters:
sender
:CreatorBase
A Survey Creator instance that raised the event.options.page
:PageModel
A page to be added.options.allow
:boolean
Set this property tofalse
if you do not want to add the page.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
An event that is raised when users add a Panel element to the survey. Use this event to customize the panel.
Parameters:
sender
:CreatorBase
A Survey Creator instance that raised the event.options.panel
:PanelModel
The panel users added.options.page
:PageModel
A page to which the panel was added.options.reason
:"DROPPED_FROM_TOOLBOX"
|"ADDED_FROM_PAGEBUTTON"
|"ELEMENT_COPIED"
A value that indicates how the panel was added: dragged from the Toolbox, created using the Add Question button, or duplicated.
Customize Survey Elements on Creation
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
An event that is raised when Survey Creator instantiates a survey for the Preview tab. Use this event to customize the survey.
Parameters:
sender
:CreatorBase
A Survey Creator instance that raised the event.options.survey
:SurveyModel
A survey to be displayed in the Preview tab.
If you want this event raised at startup, assign a survey JSON schema to the
JSON
property after you add a handler to the event. If the JSON schema should be empty, specify theJSON
property with an empty object.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
The event is called after a property editor (in fact a survey question) has been created and all it's properties have been assign. You can use this event to modify the property editor properties or set event handlers to customize it's behavior
- options.obj the survey object that is currently editing in the property grid
- options.property the property that the current property editor is editing
- options.editor the property editor. In fact it is a survey question. We are using a heavily customizable survey as a property grid in Creator V2. It means that every property editor is a question.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
The event is called after a property editor setups its title actions. You can use this event to modify the property editor title actions
- options.obj the survey object that is currently editing in the property grid
- options.property the property that the current property editor is editing
- options.editor the property editor. In fact it is a survey question. We are using a heavily customizable survey as a property grid in Creator V2. It means that every property editor is a question.
- options.titleActions the list of title actions.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
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, and so on.
Use this event to customize the pop-up window, for example, add custom action buttons.
Parameters:
sender
- A Survey Creator instance that raised the event.options.obj
- An instance of a survey element (question or panel) that users are configuring in the Property Grid.options.property
- AJsonObjectProperty
object with metadata about the property being edited.options.editor
- A property editor. It is an object of theQuestion
type because the Property Grid is built upon a regular survey.options.popupEditor
- An editor inside the pop-up window.options.popupModel
- APopupBaseViewModel
object that describes the pop-up window model. Useoptions.popupModel.footerToolbar
to access the actions at the bottom of the window.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
The event is called after a survey that represents the Property Grid is created and all its questions (property editors) are setup. You can use this event to modify this survey to change the property grid behavior
- options.obj the survey object that is currently editing in the property grid
- options.survey the property grid survey
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
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.
Parameters:
sender
:CreatorBase
A Survey Creator instance that raised the event.options.obj
:Survey.Base
A survey element (survey, page, panel, question) whose property is being validated.options.propertyName
:string
The name of a property being validated.options.value
:any
The property value.options.error
:string
An error message you want to display. Ifoptions.value
is valid, this parameter contains an empty string.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
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.
Parameters:
sender
:CreatorBase
A Survey Creator instance that raised the event.options.obj
:Survey.Base
A survey element (question, panel, page, or the survey itself) whose property is being edited.options.propertyName
:string
The name of a property being modified.options.value
:any
An old property value.options.newValue
:any
A new property value. Modify this parameter if you want to override the property value.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
An event that is raised when users add a question to the survey. Use this event to customize the question.
Parameters:
sender
:CreatorBase
A Survey Creator instance that raised the event.options.question
:Question
The question users added.options.page
:PageModel
A page to which the question was added.options.reason
:"DROPPED_FROM_TOOLBOX"
|"ADDED_FROM_PAGEBUTTON"
|"ELEMENT_COPIED"
A value that indicates how the question was added: dragged from the Toolbox, created using the Add Question button, or duplicated.
Customize Survey Elements on Creation
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
An event that is raised after a survey element (a question, panel, page, or the survey itself) is focused.
Parameters:
sender
:CreatorBase
A Survey Creator instance that raised the event.options.newSelectedElement
:Survey.Base
The focused element.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
- See also:
- onSelectedElementChanging
An event that is raised before a survey element (question, panel, page, or the survey itself) is focused. Use this event to move focus to a different survey element.
Parameters:
sender
:CreatorBase
A Survey Creator instance that raised the event.options.newSelectedElement
:Survey.Base
An element that is going to be focused.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
- See also:
- onSelectedElementChanged * , selectedElement
Use this event to control Property Editors UI.
- sender the survey creator object that fires the event
- options.obj the survey object which property is edited in the Property Editor.
- options.propertyName the name of the edited property.
- options.editorOptions options that can be changed.
- options.editorOptions.allowAddRemoveItems a boolean property, true by default. Set it false to disable add/remove items in array properties. For example 'choices', 'columns', 'rows'.
- options.editorOptions.allowRemoveAllItems a boolean property, true by default. Set it false to disable remove all items in array properties. For example 'choices', 'columns', 'rows'.
- options.editorOptions.allowBatchEdit a boolean property, true by default. Set it false to hide the "Edit" button for the "choices" property.
- options.editorOptions.itemsEntryType a string property, 'form' by default. Set it 'fast' to show "Manual Entry" tab for "choices" property by default.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
An event that is raised when Survey Creator adds properties to a survey element selected on the design surface. Handle this event if you cancel the addition of certain properties and thus hide them from the Property Grid.
Parameters:
sender
:CreatorBase
A Survey Creator instance that raised the event.options.property
:JsonObjectProperty
A property being added.options.parentProperty
:JsonObjectProperty
A property that nestsoptions.property
(choices
for an item value,columns
for a matrix column,rows
for a matrix row etc.).options.parentProperty
has a value only for nested properties.options.obj
:any
A survey element that containsoptions.property
: page, panel, question, the survey itself, item value (choice option), matrix column, etc.options.parentObj
:any
A survey element that containsoptions.parentProperty
.options.parentObj
has a value only for nested properties.options.canShow
:boolean
A Boolean property that you can set tofalse
if you do not want to add the property.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
The event is fired when the survey creator creates a survey object (Survey.Survey).
- sender the survey creator object that fires the event
- options.survey the survey object showing in the creator.
- options.reason indicates what component of the creator requests the survey. There are several reason types: "designer" - survey for designer survey, "test" - survey for "Preview" tab and "conditionEditor", "defaultValueEditor", "restfulEditor" - surveys for different property editors.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
An event that is raised after a survey element property has changed.
Parameters:
sender
:CreatorBase
A Survey Creator instance that raised the event.options.obj
:Survey.Base
A survey element (question, panel, page, or the survey itself) whose property is has changed.options.propertyName
:string
The name of the modified property.options.value
:any
A new property value.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
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.
Parameters:
sender
:CreatorBase
A Survey Creator instance that raised the event.options.obj
:Survey.Base
A survey element (survey, page, panel, question) whose string translations are being exported to CSV.options.locale
:string
The current locale identifier ("en"
,"de"
, etc.). Contains an empty string if the default locale is used.options.name
:string
A full name of the translated string. It is composed of names of all parent elements, for example:"mySurvey.page1.question2.title"
.options.locString
:LocalizableString
ALocalizableString
instance. Call theoptions.locString.getLocaleText(locale)
method if you need to get a text string for a specific locale.options.text
:string
A text string to be exported. The string is taken from the current locale. You can modify this property to export a different string.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
- See also:
- onTranslationImportItem
An event that is raised after all translated strings are imported from a CSV file.
Parameters:
sender
:CreatorBase
A Survey Creator instance that raised the event.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
- See also:
- onTranslationImportItem * , onTranslationExportItem
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.
Parameters:
sender
:CreatorBase
A Survey Creator instance that raised the event.options.locale
:string
The current locale identifier ("en"
,"de"
, etc.). Contains an empty string if the default locale is used.options.name
:string
A full name of the translated string. It is composed of names of all parent elements, for example:"mySurvey.page1.question2.title"
.options.text
:string
A text string to be imported. You can modify this property to import a different string or set this property toundefined
to cancel the import.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
- See also:
- onTranslationExportItem * , onTranslationImported
An event that is raised before a string translation is changed. Use this event to override a new translation value.
Parameters:
sender
:CreatorBase
A Survey Creator instance that raised the event.options.obj
:any
A survey element instance (survey, page, panel, question) whose string translation is being changed.options.locale
:string
The current locale identifier ("en"
,"de"
, etc.). Contains an empty string if the default locale is used.options.locString
:LocalizableString
An object that you can use to manipulate a localization string. Call theoptions.locString.getLocaleText(locale)
method if you need to get a text string for a specific locale.options.newText
:string
A new value for the string translation.
Refer to the following help topics for more information on localization:
- Localization & Globalization in SurveyJS Form Library
- Localization & Globalization in Survey Creator
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
An event that is raised when the Translation tab displays a property for translation. Use this event to control the property visibility.
Parameters:
sender
:CreatorBase
A Survey Creator instance that raised the event.options.obj
:Survey.Base
A survey element (survey, page, panel, question) whose string translations are edited in the Translation tab.options.propertyName
:string
The name of a property being translated.options.visible
:boolean
A Boolean value that specifies the property visibility. Set it tofalse
to hide the property.
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
The event is fired on uploading the files.
sender
- the survey creator object that fires the eventoptions.files
- the Javascript File objects arrayoptions.callback(status, imageLink)
- called on upload complete
- Type:
- CreatorEvent
- Implemented in:
- CreatorBase
- See also:
- uploadFiles
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.
- Type:
- "standard" | "single" | "bypage" writable
- Implemented in:
- CreatorBase
- See also:
- allowModifyPages
Specifies the orientation of the selected device in the Preview tab.
Possible values:
"landscape"
(default)"portrait"
- Type:
- "landscape" | "portrait" readonly
- Implemented in:
- CreatorBase
Enables the read-only mode. If you set this property to true
, users cannot change the initial survey configuration.
Default value: false
- Type:
- boolean writable
- Implemented in:
- CreatorBase
Repeats the last undone action if possible.
- Type:
- () => void
- Implemented in:
- CreatorBase
- See also:
- undo * , onBeforeRedo
Refreshes the Designer tab.
refreshDesigner()
is useful if the Designer tab UI depends on an external variable. Call this method each time this variable changes to update the UI.
- Type:
- () => void
- Implemented in:
- CreatorBase
Calls the saveSurveyFunc
and saveThemeFunc
functions to save the survey and theme JSON schemas.
- Type:
- () => void
- Implemented in:
- CreatorBase
- See also:
- saveSurvey * , saveTheme
Calls the saveSurveyFunc
function to save the survey JSON schema.
- Type:
- () => void
- Implemented in:
- CreatorBase
- See also:
- saveTheme * , save
A function that is called each time users click the Save button or auto-save is triggered to save a survey JSON schema.
For more information, refer to the Save and Load Survey Model Schemas help topic for your framework: Angular | Vue | React | Knockout / jQuery.
- Type:
- any writable
- Implemented in:
- CreatorBase
- See also:
- saveThemeFunc
Calls the saveThemeFunc
function to save the theme JSON schema.
- Type:
- () => void
- Implemented in:
- CreatorBase
- See also:
- saveSurvey * , save
A function that is called each time users click the Save button or auto-save is triggered to save a theme JSON object.
For more information, refer to the Save and Load Custom Themes help topic.
- Type:
- any writable
- Implemented in:
- CreatorBase
- See also:
- showThemeTab * , themeEditor * , saveSurveyFunc
Gets or sets the focused survey element: a question, panel, page, or the survey itself.
- Type:
- Base writable
- Implemented in:
- CreatorBase
- See also:
- onSelectedElementChanging * , onSelectedElementChanged
Specifies whether the Preview tab displays a language selector.
Accepted values:
"auto"
(default)
Display the language selector only if the survey is translated into more than one language.true
Always display the language selector regardless of how many languages the survey uses.false
Never display the language selector."all"
Always display the language selector with all supported languages.
- Type:
- string | boolean writable
- Implemented in:
- CreatorBase
Specifies whether to display the Designer tab.
Default value: true
- Type:
- boolean readonly
- Implemented in:
- CreatorBase
- See also:
- activeTab * , onDesignerSurveyCreated
Specifies whether to show an error message if a survey is not saved in the database.
Default value: true
- Type:
- boolean readonly
- Implemented in:
- CreatorBase
Specifies whether the Preview tab displays a toggle that allows users to show or hide invisible survey elements.
Default value: true
- Type:
- boolean writable
- Implemented in:
- CreatorBase
Specifies whether to display the JSON Editor tab.
Default value: true
- Type:
- boolean readonly
- Implemented in:
- CreatorBase
- See also:
- activeTab
Specifies whether to display the Logic tab.
Default value: false
- Type:
- boolean readonly
- Implemented in:
- CreatorBase
- See also:
- activeTab
Specifies whether drop-down menus and other UI elements display survey, page, and question titles instead of their names.
Default value: false
- Type:
- boolean readonly
- Implemented in:
- CreatorBase
- See also:
- onGetObjectDisplayName
Set this property to true if you want to show "page selector" in the toolabar instead of "pages editor"
- Type:
- boolean readonly
- Implemented in:
- CreatorBase
Specifies whether to show a page selector at the bottom of the Preview tab.
Default value: true
- Type:
- boolean writable
- Implemented in:
- CreatorBase
Specifies whether to display the Preview tab.
Default value: true
- Type:
- boolean writable
- Implemented in:
- CreatorBase
- See also:
- activeTab * , onPreviewSurveyCreated
Specifies whether to display a button that saves the survey or theme (executes the saveSurveyFunc
or saveThemeFunc
function).
Default value: false
- Type:
- boolean readonly
- Implemented in:
- CreatorBase
- See also:
- isAutoSave * , syncSaveButtons
Specifies whether to show the sidebar that displays Property Grid.
Default value: true
- Type:
- boolean writable
- Implemented in:
- CreatorBase
- See also:
- sidebarLocation
Specifies whether the Preview tab displays a Device button that allows users to preview the survey on different device types.
Default value: true
- Type:
- boolean writable
- Implemented in:
- CreatorBase
Specifies whether users can see and edit the survey header and related survey properties.
Default value: true
- Type:
- boolean writable
- Implemented in:
- CreatorBase
Specifies whether to display the Themes tab.
Default value: false
Use the themeEditor
object to manage UI themes available in the Themes tab.
- Type:
- boolean readonly
- Implemented in:
- CreatorBase
- See also:
- activeTab * , saveThemeFunc
Specifies whether to display question titles instead of names when users edit logical expressions.
Default value: false
- Type:
- boolean readonly
- Implemented in:
- CreatorBase
- See also:
- showObjectTitles * , onGetObjectDisplayName
Specifies whether to display the Translation tab.
Default value: false
- Type:
- boolean readonly
- Implemented in:
- CreatorBase
- See also:
- activeTab
Specifies the position of the sidebar that displays Property Grid. Applies only when showSidebar
is true
.
Possible values:
"right"
(default) - Displays the sidebar on the right side of the design surface."left"
- Displays the sidebar on the left side of the design surface.
- Type:
- "left" | "right" readonly
- Implemented in:
- CreatorBase
- See also:
- toolboxLocation
Returns the creator state. It may return empty string or "saving" and "saved".
- Type:
- string readonly
- Implemented in:
- CreatorBase
Specifies whether to synchronize Save buttons in the Designer and Themes tabs.
Default value: false
When this property is disabled, the Save button in the Designer tab saves only the survey JSON schema, while the Save button in the Themes tab saves only the theme JSON schema. If you enable this property, both buttons will save both JSON schemas.
- Type:
- boolean readonly
- Implemented in:
- CreatorBase
- See also:
- saveSurveyFunc * , saveThemeFunc * , save
A survey JSON schema as a string.
This property allows you to get or set the JSON schema of a survey being configured. Alternatively, you can use the JSON
property.
- Type:
- string writable
- Implemented in:
- CreatorBase
An object that enables you to manage UI themes. Refer to the following API section for information on available properties, methods, and events: ThemeTabPlugin
.
- Type:
- ThemeTabPlugin readonly
- Implemented in:
- CreatorBase
- See also:
- showThemeTab * , saveThemeFunc
A UI theme used to display the survey in the Preview tab.
Accepted values: "modern"
, "default"
, "defaultV2"
Default value: "defaultV2"
- Type:
- string readonly
- Implemented in:
- CreatorBase
- See also:
- allowChangeThemeInPreview
Specifies Toolbox location.
Possible values:
"left"
(default) - Displays Toolbox on the left side of the design surface."right"
- Displays Toolbox on the right side of the design surface."sidebar"
- Displays Toolbox as an overlay on top of Property Grid. Use thesidebarLocation
property to specify Property Grid position.
- Type:
- toolboxLocationType readonly
- Implemented in:
- CreatorBase
Cancels the last change if possible.
- Type:
- () => void
- Implemented in:
- CreatorBase
- See also:
- redo * , onBeforeUndo
Upload the files on a server
- Type:
- (files: {}, question: Question, uploadingCallback: (status: string, data: any) => any) => void
- Parameters:
-
files, type: {} ,
files to upload
question, type: QuestionuploadingCallback, type: (status: string, data: any) => any ,a call back function to get the status on uploading the file and operation result - URI of the uploaded file
- Implemented in:
- CreatorBase
Validates the property values of the focused element.
- Type:
- () => boolean
- Return Value:
-
true
if all property values of the focused element are valid or if no element is focused,false
otherwise.
- Implemented in:
- CreatorBase
- See also:
- onSelectedElementChanging * , onSelectedElementChanged
Copyright © 2023 Devsoft Baltic OÜ. All rights reserved.