Question T15127
Visible to All Users

Add custom property dropdown with other choice

created a year ago

Hi,
I am trying to add a custom property (dropdown type) in the Property Grid. The property has to be a dropdown, and this have to allow the user if can't find the id in the list, can write a different id, or choose other option.

Code
serializer.addProperty("survey", { name: "id:string", displayName: "ID", category: "general", visibleIndex: 2, choices: [ "(ID100) Id de Proyecto 1 ", "(ID200) Id de Proyecto 2", "(ID300) Id de Proyecto 3", "(ID400) Id de Proyecto 4", "(ID500) Id de Proyecto 5", "(ID600) Id de Proyecto 6" ] })

Also, the choices display an id (ID100) and a name (Id de Proyecto 1) , but the value when the user choose or set have to be only the id (ID100) .

Clipboard-File-1.png

Please , your help. Thank you so much

Answers approved by surveyjs Support

created a year ago

Hello,
Thank you for contacting us. From what I gather, you wish to create a property which allows users to select an item from a drop-down list, or, if none of the options fits, enter a custom value. You can create an additional input text field and make it dependent (see dependsOn) from the ID property value. To save an ID of a selected choice, specify both value and text properties for choices.

Consider this example:

JavaScript
import { Serializer } from "survey-core"; Serializer.addProperty("survey", { name: "id", displayName: "ID", category: "general", visibleIndex: 2, choices: [ { value: "ID100", text: "(ID100) Id de Proyecto 1" }, { value: "ID200", text: "(ID200) Id de Proyecto 2" }, { value: "ID300", text: "(ID300) Id de Proyecto 3" }, { value: "ID400", text: "(ID400) Id de Proyecto 4" }, { value: "ID500", text: "(ID500) Id de Proyecto 5" }, { value: "other", text: "Other value (Specify)..." } ], showOtherItem: true, showNoneItem: true }); Serializer.addProperty("survey", { name: "id_other", type: "string", displayName: "Other Value (Specify)", category: "general", visibleIndex: 3, dependsOn: ["id"], visibleIf: function (obj) { const isVisible = obj.id === "other"; if (!isVisible) { // Reset the id_other property value when a user selects another ID obj.setPropertyValue("id_other", null); } return isVisible; } });

Please let me know if you have any further questions.

Thanks

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.