Question T16264
Visible to All Users

Trying to pass extra data through choicesByURL

created a year ago (modified a year ago)

I need to let people pick their three favorite SUVs. As you know, visually most SUVs look alike, and most people can't remember SUVs by name, either. So, I need to display both the name and image of the SUV. And of course the backend has a unique ID for each one.

This list changes, so of course I have to make an API call to get the latest list.

Now, a checkbox question with a renderAs seemed like the perfect setup, however, for the life of me I can't seem to get choicesByURL to pass along anything other than the title and value, even though Checkbox.choices has a "customProperty" property.

Am I right? Is my only option to make the API call myself and somehow merge it into the JSON before passing it into the "new Model()" call? That would make me a little sad, as it defeats some of the purpose of surveyJS.

Answers approved by surveyjs Support

created a year ago

Hello Shannon,
You can actually register a custom choice property and bind it to any required data source field. You can register a custom property for an itemvalue object. For instance, register the suvImage property. When you initialize the choicesByUrl settings, set the suvImage property to the name of a SUV image data source field. Implement a custom item template and render the suvImage field value using a corresponding HTML element.

Consider this simple demo: View CodeSandbox.
In this demo, I fetch items from this endpoint: https://surveyjs.io/api/CountriesExample. I define the valueName and titleName, and also use the custom defined region property to bind it to a region data source field.

JavaScript
import { Serializer } from "survey-core"; Serializer.addProperty("itemvalue", "region");
  • Configure a survey question and bind a custom property to the corresponding data source field.
JSON
{ type: "tagbox", name: "car", title: "Which is the brand of your car?", itemComponent: "new-item", isRequired: true, choicesByUrl: { url: "https://surveyjs.io/api/CountriesExample", valueName: "name", titleName: "officialName", region: "region", }, searchEnabled: false }
  • Implement a custom item template. It renders the item's title and region property values.
JavaScript
class ItemTemplateComponent extends React.Component { render() { const item = this.props.item; return ( <div className="my-list-item" style={{ display: "flex" }}> <span className="list-item_text"> {item.region} : {item.title} </span> </div> ); } } ReactElementFactory.Instance.registerElement("new-item", (props) => { return React.createElement(ItemTemplateComponent, props); });

I hope this example helps. Please let me know if you have any further questions.

    Comments (2)
    SH SH
    Shannon Hicks a year ago

      That's exactly the answer I needed. A little helper addition to the ChoicesRestful docs would be useful here. For that matter, the "choices" property, too.

        Hello Shannon,
        You're always welcome!

        Please review the following help topics for the corresponding Checkbox settings.

        For a ChoicesRestful documentation topic, please visit ChoicesRestful.

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

        Thanks

        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.