Populating a Sitefinity Form Field from a remote API

I was inspired to make this post by a thread on the official forums. Basically the idea is you want to pre-populate some data in a form field from a remote source, not statically from the UI. You might first end up on the KB Article on making custom form widgets, but geez that’s complex. I’ve been burned on it in the past as well. Like I had a complex custom forms widget in webforms just for his, then MVC forms showed up and it was all trash because it didn’t work with MVC.

So conceptually trash all this, it’s so unbelievably simple to just push complexity to the frontend, and you don’t even need a developer to do this for you!

Form

• Open your form
• Add a Textbox
• Give it a custom class name (something you can get a hold of with javascript)

Page

• Open the page
• Add your form to the page
• Add a Javascript widget
• Implement a remote bound dropdown

This is the code from that sample to use… So for example this will save the ProductID back to the Sitefinity form results

(You can even just paste this into your chrome dev console and run it live)

$(".form-control.input-lg").kendoDropDownList({
                        dataTextField: "ProductName",
                        dataValueField: "ProductID",
                        dataSource: {
                            transport: {
                                read: {
                                    dataType: "jsonp",
                                    url: "https://demos.telerik.com/kendo-ui/service/Products",
                                }
                            }
                        }
                    });

Where this would save back the ProductName itself

$(".form-control.input-lg").kendoDropDownList({
                        dataTextField: "ProductName",
                        dataValueField: "ProductName",
                        dataSource: {
                            transport: {
                                read: {
                                    dataType: "jsonp",
                                    url: "https://demos.telerik.com/kendo-ui/service/Products",
                                }
                            }
                        }
                    });

Just replace the transport.read with your actual endpoint, and the data fields to your JSON properties.

Now just to be clear, this is using only KendoUI, you can literally use anything you want, it’s just kendo is bundled with Sitefinity so it’s free to use. But you could just as easily use any library as long as it’s available on the clientside.