Edit Item Form Dropdown

Question

I'm trying to create an edit item form for an XML data source. When I begin the process in SharePoint Designer 2010, it gives me a row for each of the XML elements, with their values in a text box. Is it possible to convert a text box into a dropdown, where the value of the dropdown would replace the corresponding value in the XML document? I would prefer to include static data in the dropdown item list. How can I do this?

Here is what I have so far:

<SharePoint:DVDropDownList runat="server" id="DVDropDownList1{$Pos}"  __designer:bind="{ddwrt:DataBind('u',concat('DVDropDownList1',$Pos),'SelectedValue','SelectedIndexChanged','',string($XPath),'notification_day')}">
    <asp:ListItem value="0">Sunday</asp:ListItem>
    <asp:ListItem value="1">Monday</asp:ListItem>
    <asp:ListItem value="2">Tuesday</asp:ListItem>
    <asp:ListItem value="3">Wednesday</asp:ListItem>
    <asp:ListItem value="4">Thursday</asp:ListItem>
    <asp:ListItem value="5">Friday</asp:ListItem>
    <asp:ListItem value="6">Saturday</asp:ListItem>
</SharePoint:DVDropDownList>

Answer 1

You have another option and I find myself using it in many occasions. It involves reusing the ddwrt:DataBind syntax.

In SP Designer, customize the entire view of the LVWP/DVWP. You will see a number of <SharePoint:FormField> controls. Find the one you want to replace with a dropdown list, take note of the attribute that reads __designer:bind. Eg:

__designer:bind="{ddwrt:DataBind('i',concat('ff10',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@SomeField')}"

Now, add a <SharePoint:DVDropDownList> or a normal <asp:DropDownList> (I usually use the former, because contrary to the latter, it allows you to set the SelectedValue property declaratively). This control lets you specify static values, like this:

<SharePoint:DVDropDownList runat="server" id="DVDropDownList1">
  <asp:ListItem value="value1">Option1</asp:ListItem>
  <asp:ListItem value="value2">Option2</asp:ListItem>
  <asp:ListItem value="value3">Option3</asp:ListItem>
</SharePoint:DVDropDownList>

Make sure to set the ID value to something unique, and add the __designer:bind expression you copied previously. You need to amend it to this:

<SharePoint:DVDropDownList runat="server" id="DVDropDownList1"  __designer:bind="{ddwrt:DataBind('i','DVDropDownList1','SelectedValue','SelectedIndexChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@SomeField')}">

The relevant changes are:

• the 2nd argument (it's the ID of the dropdownlist control)
• the 3rd argument (it's the control property -SelectedValue- that holds the value to be bound to the field)
• the 4th argument (it's the control event to listen to: its SelectedIndexChanged)
• the last argument is the list field the control will be bound to (@SomeField)

For a complete dissection of the ddwrt:DataBind function, see this excellent blog post.

You can now delete the FormField control as your DVDropDownList will replace it.

Answer 2

I take it that within SharePoint Designer you are viewing the form in a dataviewwebpart, and the form elements within that webpart XSLT are being rendered via a "SharePoint:FormField" control. The difficult part here is that SharePoint doesn't give you any real configuration options with that control in SharePoint Designer. It automatically renders the form element based on how you configure the field in your list's column definition. So, if you make it a text field, you'll get a input element. If you make it a 'Choice' column, you'll get a select list. It is not trivial to just drop your own select list in the xslt either. SharePoint generates unique IDs for the form elements at render time.

I would use jQuery to transform the textbox to a select list at rendertime in the browser. To reference a sharepoint form field at render time, you use a jQuery selector on the 'title' attribute. The code below will get the correct 'name' and 'id' for your form input field and replace it with a select element with your desired values. Just replace the 'title' values in the first 2 lines with the title that your targeted field is using. You can use your F12 browser dev tools to help verify what title is being set:

var fieldName = $("input[title='title of the input control']").attr("name");
var fieldId = $("input[title='title of the input control']").attr("id");
$("input[title='title of the input control']"))
    .replaceWith('<select id="' + fieldId + '" name="' + fieldName + '">' +
          '<option value="1">1</option>' +
          '<option value="2">2</option>' +
          '<option value="3">3</option>' +
          '<option value="4">4</option>' +
          '<option value="5">5</option>' +
        '</select>');

Some good SharePoint and jQuery starter info is located here: http://social.technet.microsoft.com/Forums/sharepoint/en-US/a9fb3163-109c-4309-96d2-4f2f19e6824a/sharepoint-and-jquerygetting-setting-sharepoint-form-fields?forum=sharepointgeneralprevious