Question T15227
Visible to All Users

Survey Creator customize question default value property

created a year ago

Hi,

we have a placeholder mechanism for our surveys that replaces certain substrings in the defaultValue of a question with context dependent values (external, not from the survey) when the survey is served.
Since there are quite a few placeholders and we don't want to just display a list of available placeholders to the users who create the surveys using the Survey Creator component, I replaced the entire defaultValue property with a custom text property that allows the users to insert placeholders via a dropdown.
This works quite nicely for questions of type text and comment but not so much for multipletext since the defaultValue of multipletext is an object and not just a string.

I came up with two possible solutions for multipletext but unfortunately I can't figure out how to make either work:

1.) display the default values of a multipletext question as a multipletext custom property

TypeScript
const customDefaultMultiValue = { name: 'customDefaultMultiValue', displayName: 'Standardwerte', category: 'data', type: 'multipletext', // items? onSetValue: (question, value) => { question.defaultValue = value; } }; Serializer.addProperty('multipletext', customDefaultMultiValue);

How can I set the items of a property of type multipletext?
I tried the following three variants but the property just renders as a single line.

JSON
{ ... items: [ { 'name': 'line1' }, { 'name': 'line2' } ] }
JSON
{ ... [value, defaultValue]: { 'line1': '', 'line2': '' } }

2.) customize the default value popup
I couldn't find any documentation, examples, older support tickets or articles on 3rd party websites that describe if it's possible to customize the default value popup and if so how to do it.
It would be great if I could add my placeholder selector to the existing default value popups instead of having to create custom properties.
Is this possible?

Answers approved by surveyjs Support

created a year ago

Hello,
Thank you for reaching out to us. Have you tried registering a custom property for the multipletextitem class?

JavaScript
import { Serializer } from "survey-core"; Serializer.addProperty("multipletextitem", { name: "customplaceholder", ... });

The custom property will appear within the items editor.

Regarding the second question: yes, it is possible. To activate a dialog which would allow users to enter values, you would register a custom property of the value type.

JavaScript
import { Serializer } from "survey-core"; Serializer.addProperty("multipletextitem", { name: "customDefaultValue", type: "value" ... });

A user would be able to specify a default value using this property.

Should you have any further questions, we are always here to help.

P.S. We hope you enjoyed the level of service you received. If so, we would love if you could leave your feedback on SurveyJS page at g2.com. As we’re building our business, every review helps build credibility for future customers and your feedback would be greatly appreciated.

P.S.

    Show previous comments (3)

      Hello,
      You're always welcome.

      1. Yes, it is possible.
        You can register a property editor for the custom type in the PropertyGridEditorCollection. At this point, you can specify a standard JSON object (e.g. multipletext) that the custom type should produce. You can use the default property to specify the default property value. Note that each question may accept values in different format. For instance, a Multiple Textboxes accepts an object which is a collection of key-value pairs. The key is a multiple text item's name and the value can be of various data types.

      Consider this code:

      JavaScript
      import { Serializer } from "survey-core"; Serializer.addProperty("multipletext", { name: "myDefaultValue", type: "customDefaultValue", category: "data", visibleIndex: 3, default: { text1: "My Value 1", text2: "My Value 2" } }); PropertyGridEditorCollection.register({ fit: function (prop) { return prop.type === "customDefaultValue"; }, getJSON: function (obj, prop, options) { return { type: "multipletext", items: [ { name: "text1" }, { name: "text2" } ] }; } });
      1. Thank you for the clarification. Unfortunately, we don't have an example on how to customize the default value popup dialog. However, you can refer to the following thread for a possible solution: Survey Creator customize question default value property. You'll find an example on how to implement a custom property editor action which activates a dialog with a custom Angular component.

      I hope this information can help you. Should you have any further questions, we are here to help.

        Hello,

        1. Generally speaking this works, the property is rendered and when I change its values, it updates the defaultValue of the multipletext question that I added the property to.
          But for some reason the SurveyCreatorModel onModified callback that I registered is only called the first time I edit this specific property. The onSetValue callback is called every time. It works for everything else. There are no errors in the JS console.
          I don't know if that makes any difference but the property is registered before the the onModified callback is registered.
          Here is my modification of your example:
        TypeScript
        Serializer.addProperty('multipletext', { name: 'customDefaultValue', displayName: 'Standardwerte', category: 'data', type: 'customDefaultMultiValue', onSetValue: (question, value) => { question.defaultValue = value; }, }); PropertyGridEditorCollection.register({ fit: prop => prop.type === 'customDefaultMultiValue', getJSON: (question, prop, options) => ({ type: 'multipletext', items: (question as Question).items }) });
        1. Thank you, this looks promising.

          Hello,
          If you wish to set a specific property value within the onSetValue callback, you need to call the element's setPropertyValue(propertyName, newValue) method instead. Please refer to the following documentation topic for a sample code: onSetValue.

          Would you please clarify why you wish to set a property's default value within the onSetValue callback?