4

I have an InfoPath form used for ordering inventory from our warehouse. There are drop-down lists with the roughly 180 inventory items available for request.

I would like to make hybrid drop-down lists: they need to operate both as drop-downs and as a search field. Chosen is a jQuery plugin that does exactly what I want.

My first attempt was to use a Content Editor Web Part to import Chosen on the page where the InfoPath Web Part resides. This works, visually, but results in "undefined" when an option is actually selected. Is there a way to do this?

Code:

_spBodyOnLoadFunctionNames.push("changeSelectFields"); //waits for form to load
            function changeSelectFields() {
                jQuery().SPServices({ //populates select options
                    operation: "GetListItems",
                    async: false,
                    listName: "MaterialData2",
                    CAMLViewFields: "<ViewFields><FieldRef Name='Order1' /> <FieldRef Name='Material' /> <FieldRef Name='Part' /></ViewFields>",
                    completefunc: function(xData, Status) {
                        jQuery(xData.responseXML).SPFilterNode("z:row").each(function() {
                            var selectOption;
                            if(typeof $(this).attr("ows_Part") != 'undefined') {
                            selectOption = '<option value="'
                                                + $(this).attr("ows_Order") + '">'
                                                + $(this).attr("ows_Material") +
                                                ", PART " + $(this).attr("ows_Part")
                                                + '</option>';
                            } else {
                                selectOption = '<option value="'
                                                + $(this).attr("ows_Order") + '">'
                                                + $(this).attr("ows_Material")
                                                + '</option>';
                            }
                            jQuery("select").append(selectOption);
                        });
                    }
                });
                jQuery('select').chosen({ //changes select fields to "Chosen" hybrid search fields.
                    search_contains: true,
                });
1

TL; DR - InfoPath does not allow adding select options client-side. This must be done during form creation.

It turns out that editing select input boxes in InfoPath forms using jQuery isn't a good plan. The code above works. In the end, I developed a custom web part in Visual Studio that did exactly what I wanted. Here's some info on why I chose not to use an InfoPath form.

Things that make it work:

  • Placing the code to run in a function called by _spBodyLoadFunctionNames.push(<insert function name here>);. Without this, your jQuery will attempt to run before the InfoPath form has loaded into the DOM.
  • Using the SPServices jQuery plugin to pull items from a SharePoint list and insert them into the page. This works beautifully if you want to display read-only information on a page.

Things that make it not work:

  • InfoPath validates select options on the server side. Even if you disable validation on that field, it will still validate whether the option entered is a possible value for that list.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.