Custom property with multiple values from a dropdown

[trumbitta]

I'd like to add a custom property to the question confs, let's say "pizzas". Using the creator, a user should be able to select multiple values for this property from a dropdown. So that, given this array of possible choices:

[
      {
       "value": "foo",
       "text": "Pizza Pepperoni"
      },
      {
       "value": "bar",
       "text": "Napoli"
      },
      {
       "value": "baz",
       "text": "Margherita"
      },
      {
       "value": "fuber",
       "text": "Capricciosa"
      }
]

once saved by the surveyjs creator, a question's JSON would be something like:

{
     "type": "text",
     "name": "question1",
     "pizzas": [
      {
       "value": "foo",
       "text": "Pizza Pepperoni"
      },
      {
       "value": "bar",
       "text": "Napoli"
      }
     ]
}

Is this possible?

I was able to build the desired final JSON, but adding the items one at a time. Instead I need to choose them from a well-defined array of possible choices.

[trumbitta]

I also tried the custom property editor way, to no avail. I don't seem to be understanding the docs very well.

  JsonObject.metaData.addProperty('question', {
    name: 'pizzas',
    type: 'multiSelect',
    category: 'Food',
  });

  PropertyGridEditorCollection.register({
    fit: function (prop: any) {
      return prop.type === 'multiSelect';
    },
    getJSON: function (obj: any, prop: any, options: any) {
      return {
        type: 'select',
        options: [
          { text: 'Foo a fiori', value: 'foo' },
          { text: 'Barraci tottu', value: 'bar' },
        ],
      };
    },
  });

[andrewtelnov]

@trumbitta There is already "multiplevalues" type that you can use. Regarding your code. 1) Please use type in lowercase mode. 2) getJSON it is actually a survey question definition. Property Grid that you see on the right side bar is a survey. Every category is a panel and every property editor is a question. There is not "select" question type out of the box and we do not have options.

The correct way to do it:

  Serializer.addProperty('question', {
    name: 'pizzas',
    type: 'multiplevalues',
    category: 'Food',
    choices: [
          { text: 'Foo a fiori', value: 'foo' },
          { text: 'Barraci tottu', value: 'bar' },
        ]
  });

Here is the example. You can override the existing property editor and introduce your own. However, if you add a "tagbox" question type, for example by using select2 widget, then it will be used as property editor. Here is the code for defining this property editor.

Thank you, Andrew

[trumbitta]

@andrewtelnov thank you 🙏 that should do the trick.

I was referring to this bit of the docs: https://surveyjs.io/Examples/Survey-Creator?id=addproperties&platform=ReactjsV2&theme=defaultV2#content-docs

propertyType It is an optional attribute. If the value is not set then the library treats it as a string property. string - it is the default value type. Property editor is a text input. "myProperty" and "myProperty:string" - give the same result. boolean - a Boolean type. Property editor is a checkbox. number - a numeric type. Property editor is a text input. text - string type. Property editor is text input with an optional modal window for entering large text. html - string type. Property editor is text input with an optional modal window for entering large text. In the future modal window becomes a very simple html editor. itemvalues - the array of ItemValue object. ItemValue object has two properties {value: any, text: string}. Dropdown, checkbox and radiogroup questions has choices property with itemvalues type. matrixdropdowncolumns -for matrixdropdown and matrixdynamic columns have this type. texitems - items property of multiple text question has this type triggers - survey triggers property has this type. validators - question validators property has this type.

where there's no mention of the multiplevalues prop type. Is that the right page to look at for this issue?

[andrewtelnov]

@trumbitta Yes, this is the right place. @RomanTsukanov Let's correct the page and/or documentation and add this property type. We missed it, because we do not use it ourselves for editing survey objects properties. However, it was requested by some our customers.

Thank you, Andrew